@charset "UTF-8";
@font-face {
    font-family:'DM Serif Display';
    src: url(/public/fonts/DMSerifDisplay-Regular.ttf);
}
@font-face {
    font-family:'Noto Sans Japanese';
    src: url(/public/fonts/NotoSansJP-Medium.ttf);
}
@font-face {
    font-family:'Arial';
    src: url(/public/fonts/Arialn.ttf);
}
@font-face {
    font-family:'Oswald';
    src: url(/public/fonts/Oswald-Regular.ttf);
}
@font-face {
    font-family:'KosugiMaru';
    src: url(/public/fonts/KosugiMaru-Regular.ttf);
}



/*******************************************************************************************
共通処理
*******************************************************************************************/
html {
    font-size: 100%;/*フォントサイズの基本値*/
    scroll-snap-type:y proximity;/*ページ内リンク少し上に着地調整*/
    scroll-padding-top:10vh;/*ページ内リンク少し上に着地調整*/
    /*scroll-behavior:smooth;/*上に戻る挙動をスムーズ化　　問い合わせフォームの画面外のフォームエラーが表示されなくなる影響あり*/
    scroll-behavior:auto;/*上に戻る挙動をスムーズ化　　問い合わせフォームの画面外のフォームエラーが表示されなくなる影響あり*/
    transition: font-size 0.3s ease; /* なめらかにフォントサイズが切り替わる */
}
body {
    background-color:#fdf6e3;
    font-family:'KosugiMaru','Noto Sans Japanese';
    font-size: 1.0rem;
    line-height: 1.7;
}
/*中身のコンテンツ幅指定の共通クラス*/
.wrapper {
    width:1400px;
    max-width:100%;
    margin: 0 auto;
    padding:0 3%;
    text-align: center;
    position:relative;
}
/*新着記事に「NEW」を付与*/
.text_icon{
    color:white;
    font-weight:bold;
    background-color:red;
    border-radius:30px;
    padding:3px 10px;
    margin-left:10px;
}
/*ＰＣ用の改行*/
br.br_pc{
    display:block;
}
/*スマホ用の改行*/
br.br_sm{
    display:none;
}
/*タイトル用*/
.title_pc{
    display:block;
}
.title_sm{
    display:none;
}

span.block{
    display:block;
}
/*******************************************************************************************
変数定義
*******************************************************************************************/
body{
    /*テーマカラー*/
    --themecolor:#d4a373;
    
    /*テーマカラー サブ*/
    /*--themecolor_sub:#faedcd;*/
    --themecolor_sub:#fdf6e3;
    /*テーマカラー 強調部*/
    --themecolor_emphasis:#ffab16;
    /*フォントカラー rgb(66,30,4)*/
    --fontcolor:#421e04; 
    /*フォントカラー　サブ*/
    --fontcolor_sub:white; 

    color:var(--fontcolor);
}
/*******************************************************************************************
demo
*******************************************************************************************/
#demo .inner{
    display:none;
    width:100%;
    height:auto;
    font-size:0.8rem;
    color:white;
    background-color:rgb(0,0,0,0.8);
    position:fixed;
    bottom:15%;
    left:0;
    padding:2%;
    z-index:100;
}
/*******************************************************************************************
header
*******************************************************************************************/
#header{
    /*display:block;*/ 
    display:flex;
    width:100%;
    max-width:100%;
    /*height:9vh;*/
    background-color:rgb(255,255,255,0.7);
    position:fixed;
    top:0;
    left:0;
    right:0;
    transition: top 0.3s ease; /* アニメーション */
    z-index:20;
}
#header #header_menu_area{
    display:flex;
    justify-content:space-between;
    width:100%;
    height:auto;
    flex: 1; /* 必要に応じて調整。全体を埋める */
    align-items: stretch;
}
#header #header_menu_area #header_menu{
    display:flex;
    width:100%;
    height:auto;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    padding:0 1%;
}
#header #header_menu_area #header_menu .logo_area{
    display:block;
    width:100%;
    height:auto;
    text-align:center;
    margin:0 auto;
}
#header #header_menu_area #header_menu .logo_area a.header_menu_title{
    display:flex;
    width:150px;
    height:auto;
    margin:0 auto;
}
#header #header_menu_area #header_menu .logo_area a.header_menu_title img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

#header #header_menu_area #header_menu .menu_area{
    display:flex;
    width:100%;
    height:auto;
    justify-content:center;
    align-items:center;
    position:relative;
}
#header #header_menu_area #header_menu .menu_area .arrow_left{
    display:none;
    width:20px;
    height:20px;
    position:absolute;
    top:50%;
    left:0;
    translate: -100% -50%;
    z-index:3;
}
#header #header_menu_area #header_menu .menu_area .arrow_left img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
#header #header_menu_area #header_menu .menu_area .arrow_right{
    display:none;
    width:20px;
    height:20px;
    position:absolute;
    top:50%;
    right:0;
    translate: 100% -50%;
    z-index:3;
}
#header #header_menu_area #header_menu .menu_area .arrow_right img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
#header #header_menu_area #header_menu .menu_area #nav{
    display:block;
    width:100%;
    height:auto;
    overflow:hidden;
}
#header #header_menu_area #header_menu .menu_area #nav ul#nav_menu{
    display:flex;
    height:auto;
    justify-content:center;
    overflow: visible;
}
#header #header_menu_area #header_menu .menu_area #nav ul#nav_menu li.nav_menu_item{
    display:block;
    font-size:0.9rem;
    font-weight:bold;
    /*font-family:'DM Serif Display', serif;*/
    font-family:serif;
    letter-spacing:0.2rem;
    position:relative;
    padding:5px 1vw;
    border-radius:20px;
    transition-duration:0.5s;
}
#header #header_menu_area #header_menu .menu_area #nav ul#nav_menu li.nav_menu_item:hover{
    color:var(--themecolor);
    background-color:white;
    text-shadow:none;
    transition: background-color 0.5s;
}
#header #header_menu_area #header_menu .menu_area #nav ul#nav_menu li.nav_menu_item a{
    display:block;
    width:100%;
    height:100%;
    white-space:nowrap;
}
#header #header_menu_area #header_menu .right_area{
    display:block;
    width:300px;
    height:auto;
    background-color:rgb(255,255,255,0.8);
    position:absolute;
    top:10px;
    right:0;
}
#header #header_menu_area #header_menu .right_area .time_area{
    display:block;
    width:100%;
    height:auto;
}
#header #header_menu_area #header_menu .right_area .time_area span.text{
    font-size:1.2rem;
    font-weight:bold;
}
#header #header_menu_area #header_menu .right_area .comment_area{
    font-size:0.7rem;
}
#header #header_menu_area #header_menu .right_area .sns_area{
    display:flex;
    width:100%;
    height:auto;
    justify-content:center;
}
#header #header_menu_area #header_menu .right_area .sns_area .item{
    display:block;
    width:25px;
    height:25px;
    overflow:hidden;
    margin:1%;
}
#header #header_menu_area #header_menu .right_area .sns_area .item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
/*
ハンバーガメニュー（共通）
*/
#header .hamburger_btn{
    display:none;
    width:fit-content;
    /*margin:0 2% 0 auto;*/
    z-index:100;
    position:absolute;
    top:100%;
    right:0;
}
/*ボタン外側*/
#header .hamburger_btn .header_menu_lines{
    position: relative;/*ボタン内側を基点とする*/
    cursor: pointer;
    width: 40px;
    height:40px;
}
/*ボタン内側*/
#header .hamburger_btn .header_menu_lines span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 5px;
    height: 4px;
    border-radius: 5px;
    background: var(--fontcolor);
    width: 75%;
}
#header .hamburger_btn .header_menu_lines span:nth-of-type(1) {
    /*top:10px; */
    top:calc(50% - 20%);
    transform:translateY(-50%);
}
#header .hamburger_btn .header_menu_lines span:nth-of-type(2) {
    /*top:18px;*/
    top:calc(50%);
    transform:translateY(-50%);
}
  
#header .hamburger_btn .header_menu_lines span:nth-of-type(3) {
    /*top:26px;*/
    top:calc(50% + 20%);
    transform:translateY(-50%);
}
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(1) {
    top: 12px;
    left:10px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}
  
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(2) {
    opacity: 0;
}
  
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(3){
    top: 24px;
    left: 10px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}
  
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(3)::after {
    /*content:"Close";MENU文言非表示*/
    transform: translateY(0) rotate(-45deg);
    top:5px;
    left:4px;
}

/*
スライドメニュー
*/
#header_slide_menu_area{
    display:block;/*PC非表示*/
    background-color:var(--fontcolor);
    position: fixed;
    top: 0px;
    right: 0px;
    width: 80%;
    height:100%;
    transform: translateX(100%); /* ハンバーガーメニューOFF時、右側へスライドさせておく */
    z-index:100;
    transition: 0.4s;
    overflow-y:scroll;/*メニュー縦スクロール許可*/
    pointer-events: none; /* 非表示時はクリック不可に */
    opacity: 0;
}
#header_slide_menu_area.active{
    transform: translateX(0);
    pointer-events: auto;
    opacity: 1;
}
#header_slide_menu_area .shop_name{
    margin-bottom:50px;
}
#header_slide_menu_area .shop_name .link{
    display:block;
    width:150px;
    height:auto;
    margin:0 auto;
}
#header_slide_menu_area ul.header_slide_menu li{
    color:white;
    text-align:center;
    margin-bottom:30px;
}
#header_slide_menu_area .close_btn{
    display:block;
    width:fit-content;
    z-index:100;
    position:absolute;
    top:0;
    left:0;
}
/*ボタン外側*/
#header_slide_menu_area .close_btn .header_menu_lines{
    position: relative;/*ボタン内側を基点とする*/
    cursor: pointer;
    width: 40px;
    height:40px;
}
/*ボタン内側*/
#header_slide_menu_area .close_btn .header_menu_lines span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 5px;
    height: 4px;
    border-radius: 5px;
    background: white;
    width: 75%;
}
#header_slide_menu_area .close_btn .header_menu_lines span:nth-of-type(1) {
    transform:translateY(-50%);
    top: 12px;
    left:10px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}
#header_slide_menu_area .close_btn .header_menu_lines span:nth-of-type(2) {
    opacity: 0;
}
#header_slide_menu_area .close_btn .header_menu_lines span:nth-of-type(3) {
    top: 24px;
    left: 10px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}
/*******************************************************************************************
mask_area
*******************************************************************************************/
#mask_area{
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background-color:rgb(51,51,51,0.5);
    z-index:99;
}
#mask_area.active{
    display:block;
}
/*******************************************************************************************
mainvisual_slide
*******************************************************************************************/
#mainvisual_slide{
    display:block;
    width:100%;
    /*height:auto;*/
    height:100vh;
    overflow:hidden;
}
#mainvisual_slide .inner{
    display:block;
    width:100%;
    height:100%;
    position:relative;
}
#mainvisual_slide .inner .mainvisual_area{
    display:block;
    width:100%;
    height:100%;
}
#mainvisual_slide .inner .mainvisual_area .slider_item{
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
}
#mainvisual_slide .inner .mainvisual_area .slider_item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}
#mainvisual_slide .inner .mask_area{
    display:block;
    width:100%;
    height:100%;
    background-color:rgb(66,30,4,0.1);
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:2;
    transition: 0.3s;
    visibility:visible;
    opacity:1;
}

/*******************************************************************************************
slick
*******************************************************************************************/
.slick-list{
    height:100%;
}
.slick-track{
    height:100%;
}
.slick-prev{
    position:absolute;
    left:0;
    z-index:100;
}
.slick-prev::before {
    content:"";
    display:block;
    width:15px;
    height:15px;
    left: 0;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: translateX(100%) rotate(45deg);
    position:relative;
    z-index:5;
}
.slick-next{
    position:absolute;
    right:0;
    z-index:100;
}
.slick-next::before {
    content:"";
    display:block;
    width:15px;
    height:15px;
    right: 0;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: translateX(-100%) rotate(45deg);
    position:relative;
    z-index:5;
}
/*******************************************************************************************
h1　（非表示）
*******************************************************************************************/
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/*******************************************************************************************
news
*******************************************************************************************/
#news{
    margin-top:100px;
    margin-bottom:100px;
}
#news .inner{
    display:flex;
    width:100%;
    height:auto;
    background-color:white;
    padding: 2% 10%;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5) inset; /* 影をくぼみに */
}
#news .inner .head_area{
    display:flex;
    width:30%;
    height:auto;
    align-items: flex-start;
}
#news .inner .head_area h2{
    display:block;
    width:100%;
    height:auto;
    color:var(--fontcolor);
    font-size:1.3rem;
    font-weight:bold;
    text-align:left;
    letter-spacing:0.2rem;
    position:relative;
}
#news .inner .head_area h2::after{
    content:"";
    display:block;
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:0;
}
#news .inner .body_area{
    display:flex;
    width:70%;
    height:auto;
}
#news .inner .body_area dl{
    display:flex;
    width:100%;
    height:auto;
    flex-wrap:wrap;
}
#news .inner .body_area dl dt{
    display:flex;
    width:30%;
    height:auto;
    font-size:0.9rem;
    border-bottom:1px dotted var(--themecolor);
    padding:5px;
}
#news .inner .body_area dl dt span.date{
    display:block;
    width:fit-content;
    margin-right:10px;
}
#news .inner .body_area dl dt span.category{
    display:block;
    width:100px;
    color:white;
    font-size:0.8rem;
    background-color:var(--themecolor);
    border:1px solid var(--themecolor);
    margin-right:30px;
    letter-spacing: 0.3em;
}
#news .inner .body_area dl dd{
    display:flex;
    width:70%;
    height:auto;
    font-size:0.9rem;
    text-align:left;
    border-bottom:1px dotted var(--themecolor);
    padding:5px;
}
#news .inner .body_area dl dt:nth-of-type(1){
    border-top:1px dotted var(--themecolor);
}
#news .inner .body_area dl dd:nth-of-type(1){
    border-top:1px dotted var(--themecolor);
}


/*******************************************************************************************
recommend
*******************************************************************************************/
#recommend{
    margin-bottom:100px;
}
#recommend .inner h2{
    display:block;
    width:400px;
    height:auto;
    margin:0 auto;
}
#recommend .inner .list{
    display:flex;
    width:100%;
    height:auto;
    justify-content:space-between;
    align-items:stretch;
}
#recommend .inner .list .item{
    display:flex;
    width:30%;
    height:auto;
    background-color:white;
    box-shadow: 2px 2px 4px gray;
    flex-direction:column;
    border-radius:20px;
    position:relative;
}
#recommend .inner .list .item:nth-of-type(1)::before{
    content:"";
    display:block;
    width:100px;
    height:100px;
    background-image:url(/public/img/new.svg);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    position:absolute;
    top:0%;
    left:0%;
    translate:-30% -30%;
    z-index:2;
}
#recommend .inner .list .item:nth-of-type(2)::before{
    content:"";
    display:block;
    width:100px;
    height:100px;
    background-image:url(/public/img/seasonal.svg);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    position:absolute;
    top:0%;
    left:0%;
    translate:-30% -30%;
    z-index:2;
}
#recommend .inner .list .item:nth-of-type(3)::before{
    content:"";
    display:block;
    width:100px;
    height:100px;
    background-image:url(/public/img/seasonal.svg);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    position:absolute;
    top:0%;
    left:0%;
    translate:-30% -30%;
    z-index:2;
}
#recommend .inner .list .item .img_area{
    display:flex;
    width:100%;
    height:auto;
    border-radius:20px 20px 0 0;
    overflow:hidden;
}
#recommend .inner .list .item .img_area img{
    display:flex;
    width:100%;
    height:100%;
    object-fit:cover;
    aspect-ratio: 2 / 1.3;
}
#recommend .inner .list .item .text_area{
    display:flex;
    width:100%;
    height:auto;
    flex-direction:column;
    padding:0 0% 1% 0%;
}
#recommend .inner .list .item .name_area{
    display:block;
    width:100%;
    height:auto;
    background-color:var(--themecolor);
    padding-top:10px;
    padding-bottom:10px;
}
#recommend .inner .list .item .name_jp{
    display:block;
    width:100%;
    height:auto;
    font-size:1rem;
    color:white;

}
#recommend .inner .list .item .name_en{
    display:block;
    width:100%;
    height:auto;
    font-size:0.8rem;
    color:white;

}
#recommend .inner .list .item .explanation{
    font-size:0.9rem;
    text-align:left;
    padding:4%;
}
#recommend .inner .list .item .price{
    font-size:1rem;
    text-align:right;
    padding:4%;
}
/*******************************************************************************************
concept_area
*******************************************************************************************/
#concept{
    padding-top:50px;
    padding-bottom:100px;
    background-color:white;
}
#concept .inner{
    display:flex;
    width:100%;
    height:auto;
    justify-content:space-between;
    align-items:stretch;
}
#concept .inner .img_area{
    display:block;
    width:40%;
    position:relative;
    padding:2% 4% 2% 0;
    z-index:1;
}
#concept .inner .img_area .image{
    display:block;
    width:100%;
    height:auto;
    border-radius:30px;
    overflow:hidden;
    position:relative;
}
#concept .inner .img_area .image img{
    display:flex;
    width:100%;
    height:100%;
    object-fit:cover;
    aspect-ratio:2 / 1.3;
    position:relative;
    z-index:2;
}
#concept .inner .text_area{
    display:flex;
    width:60%;
    height:auto;
    align-items:center;
    background-image:url(/public/img/concept_decoration.png);
    background-size:300px 150px;
    background-repeat:no-repeat;
    background-position:top right;
    text-align:left;
    padding:0 0 0 60px;
}
#concept .inner .text_area .text_inner{
    display:block;
    width:auto;
    height:auto;
}
#concept .inner .text_area h2{
    color:var(--fontcolor);
    font-size:1.3rem;
    font-weight:bold;
    letter-spacing:0.2rem;
    margin-bottom:50px;
    position:relative;
}
#concept .inner .text_area h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:0;
}
#concept .inner .text_area .message_area span.bold{
    display:block;
    font-size:1.2rem;
    margin-bottom:20px;
}
#concept .inner .text_area .message_area span.text{
    display:block;
}
/*******************************************************************************************
safty
*******************************************************************************************/
#safety{
    margin-bottom:200px;
}
#safety .inner .inner_box{
    display:flex;
    width:100%;
    height:auto;
    flex-direction:column;
    background-color:white;
    background-image:url(/public/img/safety_parentchild.png);
    background-size:200px 200px;
    background-repeat:no-repeat;
    background-position:top 5% right 5%;
    border:3px solid var(--fontcolor);
    border-radius:20px;
    padding:5%;
    margin-top:100px;
    position:relative;
    z-index:-1;
}
#safety .inner .inner_box::before{
    content:"";
    display:block;
    width:250px;
    height:250px;
    background-image:url(/public/img/safety_left.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    position:absolute;
    top:0;
    left:0;
    translate:-30% -20%;
    z-index:2;
}
#safety .inner .inner_box::after{
    content:"";
    display:block;
    width:250px;
    height:250px;
    background-image:url(/public/img/safety_right.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    position:absolute;
    bottom:0;
    right:0;
    translate:10% 30%;
    z-index:2;
}
#safety .inner .inner_box h2{
    display:inline-block;
    color: var(--fontcolor);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 70px;
    position: relative;
}
#safety .inner .inner_box h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
}
#safety .inner .inner_box .explanation{
    display:block;
    width:100%;
    height:auto;
    text-align:left;
    margin:0 15% 50px 15%;
}
#safety .inner .inner_box .explanation span.inline{
    display:block;
}
#safety .inner .inner_box .item{
    display:flex;
    width:100%;
    height:auto;
    margin-bottom:50px;
}
#safety .inner .inner_box .item .img_area{
    display:block;
    width:20%;
    height:auto;
    border-radius:50%;
    overflow:hidden;
}
#safety .inner .inner_box .item .img_area img{
    display:block;
    width:100%;
    height:100%;
    /*border-radius:50%;*/
    object-fit:cover;
    aspect-ratio:1 / 1;
}
#safety .inner .inner_box .item .text_area{
    display:flex;
    width:70%;
    height:auto;
    flex-direction:column;
    justify-content:center;
    text-align:left;
    padding-left:50px;
}
#safety .inner .inner_box .item .text_area span.inline_head{
    display:inline-block;
    font-size:1.5rem;
    font-weight:bold;
    margin-bottom:10px;
}
#safety .inner .inner_box .item .text_area span.inline{
    display:inline-block;
    font-size:1rem;
}
/*******************************************************************************************
product
*******************************************************************************************/
#product{
    padding-bottom:100px;
    position:relative;
}
#product .inner h2{
    display:inline-block;
    color: var(--fontcolor);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 50px;
    position: relative;
}
#product .inner h2:before{
    content:"";
    width:80px;
    height:30px;
    background-image:url(/public/img/header_decoration_left.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    left:0%;
    translate:-100% -50%;
}
#product .inner h2:after{
    content:"";
    width:80px;
    height:30px;
    background-image:url(/public/img/header_decoration_right.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    right:0%;
    translate:100% -50%;
}
#product .inner .content{
    display:flex;
    width:100%;
    height:auto;
    justify-content:space-between;
    flex-wrap:wrap;
    padding:0 10%;
}
#product .inner .content .item{
    display:flex;
    width:30%;
    /*height:auto;*/
    border-radius:20px;
    background-color:white;
    box-shadow: 2px 2px 4px gray;
    flex-direction:column;
    overflow:hidden;
    margin-bottom:100px;
}
#product .inner .content .item .img_area{
    display:block;
    width:100%;
    /*height:auto;*/
    aspect-ratio:2 / 1.3;
    overflow:hidden;
}
#product .inner .content .item .img_area img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
#product .inner .content .item .text_area{
    display:flex;
    width:100%;
    height:100%;
    flex-direction:column;
    justify-content:flex-start;
    /*padding:1% 3%;*/
    flex:1;
}
#product .inner .content .item .text_area .name_area{
    display:flex;
    width:100%;
    height:auto;
    flex-direction:column;
    background-color:var(--themecolor);
}
#product .inner .content .item .text_area .name_area .name_jp{
    display:flex;
    width:100%;
    height:auto;
    color:white;

    justify-content:center;
    font-size:1rem;
}
#product .inner .content .item .text_area .name_area .name_en{
    display:flex;
    width:100%;
    height:auto;
    color:white;
    justify-content:center;
    font-size:0.8rem;
}
#product .inner .content .item .text_area .information_area{
    display:flex;
    width:100%;
    height:100%;
    flex-direction:column;
    justify-content:space-between;
    flex:1;
}
#product .inner .content .item .text_area .information_area .inner_top{
    display:flex;
    width:100%;
    height:auto;
    flex-direction:column;
}

#product .inner .content .item .text_area .information_area .inner_top .explanation{
    display:block;
    width:100%;
    height:auto;
    text-align:left;
    font-size:0.8rem;
    padding:3%;
}
#product .inner .content .item .text_area .information_area .inner_top .allergen{
    display:block;
    width:100%;
    height:auto;
    text-align:left;
    font-size:0.7rem;
    padding:1% 3%;
}
#product .inner .content .item .text_area .information_area .inner_top .allergen span.tag_head{
    display:inline-block;
    width:fit-content;
    height:auto;
    text-align:left;
    font-size:0.7rem;
}
#product .inner .content .item .text_area .information_area .inner_top .allergen span.tag{
    display:inline-block;
    width:fit-content;
    height:auto;
    font-size:0.7rem;
    background-color:var(--themecolor_sub);
    border-radius:20px;
    padding:0 5px;
    margin:0 2px;
}
#product .inner .content .item .text_area .information_area .inner_bottom{
    display:flex;
    width:100%;
    height:auto;
    flex-direction:column;
}
/*******************************************************************************************
access
*******************************************************************************************/
#access{
    padding-top:0px;
}
#access .inner{
    text-align:center;
    padding:0;
}
#access .inner h2{
    display:inline-block;
    color: var(--fontcolor);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 50px;
    position: relative;
}
#access .inner h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
}
#access .map_area{
    display:block;
    width:100%;
    height:auto;
    margin-bottom:20px;
}
#access .map_area iframe{
    display:block;
}
#access .text_area span.inline{
    display:inline-block;
}
/*******************************************************************************************
information
*******************************************************************************************/
#information{
    padding-top:100px;
    padding-bottom:100px;
}
#information h2{
    display:inline-block;
    color: var(--fontcolor);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 50px;
    position: relative;
}
#information h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
}
#information .inner{
    display:flex;
    width:100%;
    height:auto;
    text-align:center;
    padding:0;
    margin:30px 0 100px 0;
}
#information .inner .img_area{
    display:block;
    width:40%;
    height:auto;
    overflow:hidden;
    position:relative;
    margin:0 5%;
}
#information .inner .img_area img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
}
#information .inner .text_area{
    display:flex;
    width:60%;
    height:auto;
    align-items:center;
    overflow:hidden;
}
#information .inner .text_area .text_inner{
    display:block;
    width:auto;
    height:auto;
}
#information .inner .text_area dl{
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 10px;
    column-gap: 1em;
    margin-bottom:10px;
}
#information .inner .text_area dl dt{
    display: flex;
    white-space: nowrap; /* 改行させない */
    color:white;
    background-color:var(--themecolor);
    border-radius:10px;
    justify-content:center;
    align-items:center;
    padding:1px 10px;
}
#information .inner .text_area dl dd{
    margin: 0;
    text-align:left;
}
#information .inner .text_area dl dd span{
    display:inline-block;
}
#information .inner .text_area .body .body_inner .way{
    display:block;
    width:100%;
    height:auto;
    text-align:left;
}
#information .inner .text_area .body .body_inner .supplement{
    display:block;
    width:100%;
    height:auto;
    text-align:left;
}
/*******************************************************************************************
footer トップへ戻るボタン    
*******************************************************************************************/
#footer{
    display:block;
    width:100%;
    height:auto;
    background-color:var(--themecolor);
    position:relative;
}
#footer #return_top_btn{
    display:block;
    width:2.5rem;
    height:2.5rem;
    right: 0;
    z-index:19;/*ハンバーガーメニュー表示中は後ろに隠す*/
    scroll-behavior:smooth;
}
#footer #return_top_btn img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
/*******************************************************************************************
footer
*******************************************************************************************/
/*フッターメニュー*/
#footer ul.footer_menu_lists{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    margin:0;
    padding:70px 0 20px 0;
}
#footer ul.footer_menu_lists li.footer_menu_item{
    display:flex;
    height:auto;
    padding:0.5% 1%;
}
#footer ul.footer_menu_lists li.footer_menu_item a.link{
    display:block;
    width:100%;
    font-size:0.9rem;
    text-align:center;
    white-space:nowrap;
}
/*ロゴ*/
#footer .logo_area{
    display:block;
    width:200px;
    height:auto;
    text-align:center;
    margin:0 auto;
    margin-bottom:70px;
}
/*コピーライト*/
#footer #copyright{
    display:block;
    width:100%;
    height:auto;

}
#footer #copyright .copyright_area{
    display:block;
    width:fit-content;
    height:auto;
    text-align:center;
    margin:0 auto;
}
#footer #copyright .copyright_area p{
    font-size:0.8rem;
}
#footer #copyright .webdesign_area{
    display:block;
    width:fit-content;
    height:auto;
    text-align:center;
    margin:0 auto;
}
#footer #copyright .webdesign_area p{
    font-size:0.7rem;
}
/*******************************************************************************************
アニメーション（共通）
*******************************************************************************************/
/*
アニメーション（スクロール時、右下にフェードイン）
フェードイン前の初期ポジションを指定用？
*/
.anime_slideBottom {
    opacity: 0;
    transform: translateY(20px);
    transition-property:all;
    transition-duration:0.5s;
    transition-delay:0s;
    transition-timing-function:ease-in-out;
}
/*******************************************************************************************
Media Queries
*******************************************************************************************/
@media only screen and (min-width: 1930px) {

}
/* Smaller than standard 1200 */
@media only screen and (max-width: 1199px) {

}
/* Smaller than standard 980 */
@media only screen and (max-width: 991px) {

}
@media only screen and (max-width: 1024px) {

}
@media only screen and (max-width: 780px) {

}
/* Tablet Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

@media only screen and (max-width: 1399px) {

}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 600px) {

}

/* Mobile Portrait Size */
/*@media only screen and (max-width: 479px) {*/
@media only screen and (max-width: 768px) {
    .wrapper {
        width:100%;
        max-width:100%;
        /*margin: 0 20px;*/
        padding:0 20px;

    }
    /*PC用の文章改行を解除*/
    br.br_pc{
        display:none;
    }
    br.br_sm{
        display:block;
    }
    /*タイトル用*/
    .title_pc{
        display:none;
    }
    .title_sm{
        display:block;
    }
    /*
    header
    */
    #header #header_menu_area #header_menu .right_area{
        display:none;
    }
    #header #header_menu_area #header_menu .menu_area .arrow_left{
        display:block;
    }
    #header #header_menu_area #header_menu .menu_area .arrow_right{
        display:block;
    }
    #header #header_menu_area #header_menu .menu_area #nav ul#nav_menu{
        justify-content:left;
        overflow: scroll;
    }
    #header #header_menu_area #header_menu .menu_area #nav ul#nav_menu li.nav_menu_item{
        padding:5px 2.5vw;
    }
    #header .hamburger_btn{
        display:block;
        top:50%;
        right:5%;
        translate:0 -50%;
    }

    /*
    mainvisual
    */


    /*
    news
    */
    #news .inner{
        flex-direction:column;
    }
    #news .inner .head_area{
        width:100%;
        margin-bottom:50px;
    }
    #news .inner .body_area{
        width:100%;
    }
    #news .inner .body_area dl{
        flex-direction:column;
    }
    #news .inner .body_area dl dt{
        width:100%;
        border-bottom:none;
    }
    #news .inner .body_area dl dd{
        width:100%;
    }
    #news .inner .body_area dl dd:nth-of-type(1){
        border-top:none;
    }
    /*
    recommend
    */
    #recommend .inner h2{
        width:100%;
    }
    #recommend .inner .list{
        flex-direction:column;
    }
    #recommend .inner .list .item{
        width:100%;
        margin-bottom:50px;
    }
    #recommend .inner .list .item:nth-of-type(1)::before{
        translate:-10% -20%;
    }
    #recommend .inner .list .item:nth-of-type(2)::before{
        translate:-10% -20%;
    }
    #recommend .inner .list .item:nth-of-type(3)::before{
        translate:-10% -20%;
    }
    /*
    concept
    */
    #concept .inner{
        flex-direction:column;
    }
    #concept .inner .img_area{
        width:100%;
        padding:0;
        margin-bottom:10px;
    }
    #concept .inner .text_area{
        width:100%;
        background-size:150px 100px;
        background-position:bottom right;
        padding:0;
    }
    #concept .inner h2.title_sm{
        color:var(--fontcolor);
        font-size:1.3rem;
        font-weight:bold;
        letter-spacing:0.2rem;
        margin-bottom:50px;
        position:relative;
    }
    #concept .inner h2.title_sm:after{
        content:"";
        width:70px;
        height:3px;
        background-color:var(--themecolor);
        position:absolute;
        bottom:-20px;
        left:50%;
        translate:-50% 0;
    }
    /*
    safety
    */
    #safety .inner .inner_box{
        display:flex;
        width:100%;
        flex-direction:column;
        background-size:150px 150px;
        background-repeat:no-repeat;
        background-position:top 12% right 5%;
        padding:5%;
        margin-top:100px;
    }
    #safety .inner .inner_box::before{
        width:100px;
        height:100px;
        translate:-30% -40%;
    }
    #safety .inner .inner_box::after{
        width:100px;
        height:100px;
        translate:10% 30%;
    }
    #safety .inner .inner_box .explanation{
        width:100%;
        margin:0 0 150px 0;
    }
    #safety .inner .inner_box .item{
        flex-direction:column-reverse;
        margin-bottom:80px;

    }
    #safety .inner .inner_box .item .img_area{
        width:50%;
        text-align:center;
        margin-bottom:20px;
        margin:0 auto 20px auto;
    }
    #safety .inner .inner_box .item .text_area{
        width:100%;
        padding:0;
    }
    /*
    product
    */
    #product .inner .content{
        padding:0;
    }
    #product .inner .content .item{
        display:flex;
        width:100%;
        /*height:auto;*/
        border-radius:20px;
        background-color:white;
        box-shadow: 2px 2px 4px gray;
        flex-direction:column;
        overflow:hidden;
        margin-bottom:100px;
    }
    /*
    information
    */
    #information .inner{
        flex-direction:column-reverse;
        margin:0;
    }
    #information .inner .img_area{
        width:100%;
        margin:0 0 30px 0;
    }
    #information .inner .text_area{
        width:100%;
    }
    /*
    footer
    */
    #footer ul.footer_menu_lists li.footer_menu_item{
        padding:0.5% 3%;
    }
}
@media only screen and (max-width: 320px) {

}
/* Center menu vertically */
@media screen and (min-width: 1025px) {
	
}