/*****　全ページ共通CSS　*****/

/****************/
/***　初期化　***/
/****************/

html{font-size:62.5%}
body,h1,h2,h3,h4,h5,ul,ol,li,dl,dt,dd,div,p{
font-style:normal;
font-size:1.6rem;
-webkit-text-size-adjust: 100%;
line-height:180%;
margin:0;
padding:0;
color:#444;
}
strong{font-weight:normal}
em{font-style:normal}
body{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin:0 auto;
}
img{border:0}
ul,ol,li{list-style:none}
br{letter-spacing:normal}/*IEの改行バグ対策*/ 
a{text-decoration:none;outline:none}
/*html,body{overflow-x:hidden}/*vw幅をしようしているため横スクロールバー非表示処理*/


/************************/
/***　配置レイアウト　***/
/************************/

.left{text-align:left}
.center{text-align:center}
.right{text-align:right}

/*横並び均等配置（中央寄せ）*/
.flex_cen{
display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
}
/*横並び均等配置（先頭末尾余白無し）*/
.flex_bw{
display:flex;
display:-webkit-flex;
justify-content:space-between;
-webkit-justify-content:space-between;
}
/*横並び均等配置（先頭末尾余白有り）*/
.flex_ar{
display:flex;
display:-webkit-flex;
justify-content:space-around;
-webkit-justify-content:space-around;
}
/*縦中央寄せ*/
.flex_mid{
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
}
/*　clearfix　*/
.clearfix:after {display:block;content:" ";clear:both;visibility:hidden}


/**********************/
/***　フォント設定　***/
/**********************/

/*　基本文字装飾　*/
.bold{font-weight:bold}
.uline{text-decoration:underline}
.cancel{text-decoration:line-through;color:#000}

/*　フォントカラー　*/
.red{color:#FF0000}
.blue, .blue a:visited{color:#4169E1}
.bs_font{color:#5dab92}/*TOPページなどのベースフォント色（エメラルド）*/

/***　各パーツ用Webフォント設定　***/

/*明朝体（リュウミン太字）*/
.fnt_Min{
font-family:Ryumin Bold KL;
letter-spacing:-0.05em;
}
/*ノトサンズ*/
.fnt_Noto, .fnt_NotoGrn{
font-family:'Noto Sans JP', sans-serif;
}
/*ノトサンズ（深緑）*/
.fnt_NotoGrn{color:#5dab92}
/*アルファベット用ゴシック（新ゴ）*/
.fnt_Shingo, .fnt_ShingoGrn{
font-family:UD Shin Go Conde90 M;
letter-spacing:0.3rem;
}
/*アルファベット用ゴシック（新ゴ深緑）*/
.fnt_ShingoGrn{color:#5dab92}


/*****個別タイトルフォント（サイズ、太字固定用）*****/

/*見出し明朝*/
.explain h2{
font-size:2.7rem;
padding:20px 0;
font-family:Ryumin Bold KL;
letter-spacing:-0.05em;
}

/*タイトル見出し（テキスト＋英語表記）*/
.headline{
font-family:'Noto Sans JP', sans-serif;
font-weight:400;
font-size:3.0rem;
}
.headline + p{
font-family: UD Shin Go Conde90 M;
letter-spacing: 0.2rem;
font-size:1.8rem;
color:#5dab92;/*全体共通カラー深緑（指定の色があれば個別CSSにて上書き）*/
}

/*タイトル見出し（テキスト＋英語表記　フォント大　現在コンテンツ用、その他流用可）*/
.headline_b{
font-family:'Noto Sans JP', sans-serif;
font-weight:400;
color:#000;
font-size:3.6rem;
}
.headline_b + p{
font-family: UD Shin Go Conde90 M;
letter-spacing: 0.2rem;
font-size:1.6rem;
color:#5dab92;/*全体共通カラー深緑（指定の色があれば個別CSSにて上書き）*/
}

/*長い商品名のフォントサイズ調整*/
.item_longfont{font-size:1.4rem !important}

/**********************/
/***　ヘッダー設定　***/
/**********************/

div#hd_wrap{
text-align:center;
width:100%;
position:fixed;
height:80px;
background-color:#fff;
z-index:99;
}
header h1 img, header h2 img{
width:200px;
padding-top:15px;
}
nav#pc_menu > ul{
background-color:#fff;
padding:0 20px;
display:table;
height:80px;
}
#pc_menu > ul > li, #pc_menu > ul > a{
text-align:center;
display:table-cell;
vertical-align:middle;
padding:0 10px;
cursor:pointer;
}
#pc_menu > ul > li:hover, #pc_menu > ul > a:hover{
background:url("../img/common/nav_hoverbtn.gif") center 70px no-repeat;
}
.hd_lstJP, .hd_lstEN{white-space:nowrap}
.hd_lstJP{
color:#444;
letter-spacing:0.1em;
font-weight:bold;
}
.hd_lstEN{
font-family: 'Abel', sans-serif;
color:#5dab92;
font-size:1.4rem;
/*font-size:1.3rem;*/
font-weight:normal;
}

/***メガドロップダウンメニュー***/
#pc_menu > ul li:hover ul.pc_submenu{
visibility:visible;
opacity:1;
}
ul.pc_submenu{
position:absolute;
top:80px;
left:50%;
padding:10px;
background:#5dab92;
transition: all .2s ease;
-webkit-transition: all .2s ease;
opacity:0;
visibility:hidden;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
cursor:default;
}
/*商品紹介*/
ul#hd_lup > li{
background:#fff;
padding:20px 10px;
width:170px;
margin:10px;
min-width:170px;/*IE用*/
}
ul#hd_lup ul p + li{padding:10px 0 5px 0}
ul#hd_lup ul p img{width:48px}
ul#hd_lup ul li a{
color:#444;
font-size:1.45rem;
}
ul#hd_lup ul p + li, ul#hd_lup ul p + li a, p.art_text, p.abt_text{
font-weight:bold;
color:#5dab92;
font-size:1.5rem;
}
ul#hd_lup a:hover{text-decoration:underline}
a.tdnone_hover:hover{text-decoration:none !important}
ul#hd_lup ul li.small a{font-size:1.3rem}


/*コンテンツ*/
ul#hd_art ul li{
background:#fff;
width:280px;
height:100px;
margin:10px;
}
p.art_photo{margin-right:10px}
p.art_photo img{
width:64px;
border-radius:48px;
}
p.art_text{
width:180px;
text-align:left;
}
ul#hd_art ul li:hover{background:#e6f4e9}
/*企業情報*/
ul#hd_abt ul li{
background:#fff;
width:220px;
height:80px;
margin:10px;
}
ul#hd_abt ul li:hover{background:#e6f4e9}
p.abt_photo{margin-right:20px}
p.abt_photo img{
width:74px;
border:3px solid #fff;
}
p.abt_text{
width:130px;
text-align:left;
}
p.art_photo img, p.abt_photo img{
vertical-align:bottom;/*途中で突然TOPのみ画像が枠よりはみ出していることを確認。他コンテンツページでははみ出さないが、応急処置として挿入*/
}

/*スマホメニュー用追加分*/
a.sm_openbtn, nav#sm_menu{display:none}


/**********************/
/***　フッター設定　***/
/**********************/

div#foot{
width:auto;
/*margin-top:50px;*/
background-color:#f2f2f1;
}
div#ft_wrap{
width:1040px;
padding:30px 0;
margin:0 auto;
}
div#ft_left{
background-color:#fff;
padding:20px;
margin-right:60px;
text-align:center;
}
#ft_left h3{
padding:10px 0;
font-size:1.4rem;
}
#ft_left > p{
line-height:140%;
margin-bottom:10px;
font-size:1.5rem;
}
#ft_left > p img{
width:250px;
height:90px;
}
#ft_left > p span{font-size:1.3rem}
#ft_left ul{margin-top:30px}
#ft_left ul li{
font-size:1.3rem;
width:180px;
margin:15px auto;
display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
background-position:15px center;
background-size:12% auto;
padding:5px 0 5px 20px;
}
#ft_left ul.sns_grp li{
width:auto;
margin-left:0;
margin-right:0;
}
#ft_left ul.sns_grp li img{
width:32px !important;
}

div#ft_right{
text-align:left;
width:600px;
}
#ft_right a:hover{text-decoration:underline}
#ft_right h2, #ft_item dl dt a, #ft_right h3, p#copy{
font-family: 'Noto Sans JP', sans-serif;
font-weight:700;
}
div#ft_itemwrap,#ft_box ul{margin-top:10px}
#ft_item dl dt a,#ft_right h3{color:#5dab92}
#ft_item dl dd a,#ft_add a,#ft_box a{
color:#444;
font-size:1.5rem;
}
div#ft_add,div#ft_box{margin-top:30px}
#ft_add ul li,div#ft_cnt,div#ft_corp{float:left}
.ft_vline_a:after{
content:"|";
padding:0 10px;
}
div#ft_cnt{margin-right:70px}
p#copy{
background-color:#5dab92;
color:#fff;
line-height:400%;
font-weight:normal;
text-align:center;
}


/************************/
/***　パンくずリスト　***/
/************************/

div#topic_path{
border-top:1px solid #ccc;
background:#f2f2f1;
width:auto;
}
#topic_path ul{
display:flex;
padding-left:80px;
max-width:1040px;
margin:0 auto;
}
#topic_path ul li{
float:left;
padding:10px 0;
color:#666;
height:30px;/*webkit用*/
}
#topic_path ul li:after{
content:">";
padding-left:5px;
padding-right:5px;
color:#ccc;
font-weight:bold;
}
#topic_path ul li:last-child:after{content:""}
#topic_path ul li a{color:#5dab92}
#topic_path ul li a:hover{text-decoration:underline}
#topic_path ul li img{
width:18px;
height:18px;
vertical-align:middle;
padding-right:5px;
}


/******************/
/***　共通項目　***/
/******************/

/*説明・Q&Aなどセンタリング箇所*/
div.explain ,div.question{
text-align:center;
padding-top:30px;
}
/*説明文箇所*/
.explain > div > p{
width:780px;
padding-bottom:10px;
text-align:left;
margin:0 auto;
}
/*説明文箇所画像センタリング*/
.explain .exp_img{text-align:center}
.explain div p a{
color:#444;
text-decoration:underline;
}
.explain div p a:hover{text-decoration:none}
.td_none a{text-decoration:none !important}

/************************/
/***　その他共通設定　***/
/************************/

/*ヘッダーメニュー直下要素高さ確保*/
header + div{padding-top:80px}

/*緑背景ボタンレイアウト*/
ul.gr_btn li, p.grn_btn{
color:#fff;
font-weight:700;
font-family: 'Noto Sans JP', sans-serif;
}
/*ショップ・お問い合わせ・戻るボタン*/
.shopbtn, .contactbtn{border-radius:15px}
.shopbtn{background:#5dab92 url("../img/common/icon_shop.png") no-repeat}
.contactbtn{background:#5dab92 url("../img/common/icon_qa.png") no-repeat}
.prevbtn{background:#5dab92 url("../img/common/icon_prev.png") no-repeat}

/***進む・戻るボタン***/
a p.indicate{
border:2px solid #5dab92;
text-align:center;
color:#5dab92;
font-weight:bold;
padding:8px;
width:360px;
margin:30px auto 30px auto;
}
a p.forwardbtn:after{
content:"";
display:inline-block;
border:10px solid transparent;
border-left:15px solid #5dab92;
position:relative;
top:3px;
float:right;
}
a p.backbtn:before{
content:"";
display:inline-block;
border:10px solid transparent;
border-right:15px solid #5dab92;
position:relative;
top:3px;
float:left;
}


/*疑似ボタンhover透過処理*/
/*imgタグのclassに"over"を入れると透過処理*/
a:hover img.over, p.prevbtn:hover, p.forwardbtn:hover, p.backbtn:hover, .hover_effect ul li:hover, .hover_effect a dl:hover, .hover_effect a > p:hover, a.tdnone_hover div:hover{-moz-opacity:0.5;opacity:0.5;filter:alpha(opacity=50)}

/***TOPへ戻るボタン***/
#page-top{
display:none;
position:fixed;
right:30px;
bottom:30px;
}
#page-top p{
margin:0;
padding:0;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
}
#move-page-top{
display:block;
cursor:pointer;
}



/**************************************************/
/*****　タブレット用CSS(android10インチ基準)　*****/
/**************************************************/
@media screen and (max-device-width:800px) {

/*携帯デバイスでフォントが枠に収まらない場合に使用*/
.reduce{font-size:0.8em !important}
.reduce2{font-size:0.9em !important}

/*タブレット右余白処理*/
header, header + div, footer{
overflow:hidden;
min-width:1040px;
}

/*フッター調整*/
div#ft_wrap{width:900px}
div#ft_left{
margin-right:30px;
padding:15px;
}
div#ft_cnt{margin-right:30px}

}

/****************************************************/
/*****　スマホ用横置き専用CSS(iPhone6Plusまで)　*****/
/****************************************************/
@media screen and (max-device-width:736px) and (orientation: landscape){

html{line-height:120%}

}

/**********************************************/
/*****　スマホ用CSS(iPhone6Plusまで対応)　*****/
/**********************************************/
@media screen and (max-device-width:414px) , screen and (max-device-width:736px) and (orientation: landscape){

body{width:min-content}

/*見出し明朝フォント共通*/
.explain h2{
font-size:5.4rem;
padding:20px 80px;
line-height:125%;
}
/*改行*/
span.linefeed::before{
content:"\A";
white-space:pre;
}
.explain h2 span::before{
content:"\A";
white-space:pre;
}
/*タイトル見出し（テキスト＋英語表記）*/
.headline{
font-weight:400;
font-size:6.0rem;
}
.headline + p{font-size:3.6rem}
.headline_b{
font-size:6.4rem;
font-weight:300;
}
.headline_b + p{font-size:4.0rem}

/*説明文共通*/
.explain div p{
font-size:4.2rem;
width:auto;
padding:0 40px 30px 40px;
line-height:155%;
}

/*文字非表示*/
.hidden{display:none}

/**********************/
/***　　ヘッダー　　***/
/**********************/

div#hd_wrap{height:170px}

#hd_wrap h1 img, #hd_wrap h2 img{
width:85%;
height:auto;
}
header h1 img, header h2 img{padding-top:35px !important}

/***スマホナビメニュー用追加分***/

/*表示非表示処理*/
nav#pc_menu ul, #hd_wrap div#catalog{display:none}
a.sm_openbtn{display:inline}
a.sm_openbtn img, a.sm_closebtn img{width:170px}
#sm_menu > div:first-of-type{height:170px}

/*ボタン設定*/
.sm_openbtn{
position:fixed;
top:0;
right:0;
color: #5dab92;
z-index:99;
}
.sm_homebtn p{
background:#86c0ad;
border-radius:50px;
padding:15px;
margin-right:30px;
}
.sm_homebtn p img{width:64px}
/*ナビメニュー*/
/* --- スマホメニューの動きを滑らかにする修正 --- */
nav#sm_menu {
    display: block;
    position: fixed;
    top: 0;
    right: -80%; /* 初期状態は画面外 */
    width: 80%;
    height: 100%; /* 高さを固定 */
    overflow-y: auto; /* メニューが長い場合にスクロール可能に */
    
    /* JavaScriptではなくCSSで動かす設定 */
    transition: transform 0.3s ease-in-out; 
    z-index: 100;
}
/* メニューが開いている状態のクラス（JSでこれを付与する） */
nav#sm_menu.is-active {
    transform: translateX(-100%); /* 右からスッと出てくる */
}
/* 背景を固定するための設定（ガタつき防止） */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
/* メニュー内の余白調整（135pxのズレを防ぐ） */
#sm_menu > ul {
    margin-left: 0; /* JSでの計算を不要にするため0に調整を推奨 */
}
div.main_menu{
width:auto;
display:block;
}
/*展開アイコン切り替え*/
#sm_menu ul li div p:after{
content:"＋";
float:right;
font-size:4.8rem;
font-weight:bold;
}
div.open p:after{content:"－" !important}
/**********************/

#sm_menu > div, #sm_menu ul{background:#5dab92}
#sm_menu > ul{
margin-left:135px;/*変更時jsも修正*/
}
#sm_menu > ul a li, div.main_menu{padding:10px 30px}
#sm_menu > ul a{text-decoration:none}
#sm_menu > ul a li, #sm_menu > ul li p{
color:#fff;
font-size:4.2rem;
font-weight:bold;
padding-top:30px;
padding-bottom:30px;
line-height:140%;
}
#sm_menu > ul li{
text-align:left;
border-bottom:2px solid #fff;
}
#sm_menu > ul li ul{display:none}
/*サブメニュー*/
ul.sub_menu li{
background:#dfeee9;
border-bottom:2px solid #5dab92 !important;
}
ul.sub_menu a li{
color:#5dab92 !important;
font-family:'Noto Sans JP', sans-serif;
font-weight:400;
}
/*サブメニュー商品アイコン*/
.sm_lup ul a:nth-of-type(1) li{background:#dfeee9 url("../img/common/nav_supple.png") 20px center no-repeat}
.sm_lup ul a:nth-of-type(2) li{background:#dfeee9 url("../img/common/nav_cosme.png") 20px center no-repeat}
.sm_lup ul a:nth-of-type(3) li{background:#dfeee9 url("../img/common/nav_goods.png") 20px center no-repeat}
.sm_lup ul a:nth-of-type(4) li{background:#dfeee9 url("../img/common/nav_water.png") 20px center no-repeat}
.sm_lup ul li{
padding-left:120px !important;
background-size:10% auto !important;
}


/**********************/
/***　　フッター　　***/
/**********************/

div#ft_wrap{width:100%}
div#ft_right{display:none}
div#ft_left{
width:85%;
margin-right:0;
}
#ft_left > p img{
/*width:65%;*/
height:auto;
margin-top:20px;
}

#ft_left h3{font-size:4.0rem}
#ft_left p{
font-size:4.0rem;
margin-bottom:10px;
}
#ft_left p span{font-size:3.6rem}
#ft_left p:last-of-type{padding:30px 0}
#ft_left ul li{
width:50%;
font-size:4.0rem;
margin:30px auto;
}
#ft_left ul.sns_grp li{
margin-left:30px;
margin-right:30px;
}
#ft_left ul.sns_grp li img{
width:96px !important;
}
p#copy{font-size:3.2rem}


/********************/
/***パンくずリスト***/
/********************/

#topic_path ul{
width:calc(100% - 30px);
padding-left:30px;
padding-bottom:5px
}
#topic_path ul li{
font-size:3.6rem;
height:60px;
font-weight:bold;
}
#topic_path ul li a img{
width:30px;
height:auto;
}

/*説明テキスト・Q&A*/
.explain h1, .question h1{font-size:6.0rem}
.explain h1 + p, .question h1 + p{font-size:3.2rem}

/***共通設定***/

/*ヘッダーメニュー直下要素高さ確保*/
header + div, main > div{padding-top:170px}
/*スマホ文字数調整非表示*/
.hidden{display:none}

a p.indicate{
border-width:4px;
font-size:3.6rem;
width:90%;
margin-top:80px;
margin-bottom:80px;
}
a p.forwardbtn:after{
border:20px solid transparent;
border-left:30px solid #5dab92;
top:10px;
}
a p.backbtn:before{
border:20px solid transparent;
border-right:30px solid #5dab92;
top:10px;
}
/*長い商品名のフォントサイズ調整*/
.item_longfont{font-size:3.0rem !important}

}