@charset "utf-8";

/*-----------------------------------------------------

Base Layout Style
※ブラウザ表示速度を考慮し、インデント・改行を無くしています。
※yui fonts.cssで文字サイズをbodyに対して標準15pxに指定しています。ここでbodyにfont-sizeを指定すると設定を上書きしてしまうことになるので絶対に避けてください。Wrapにかけるなどする。

------------------------------------------------------*/

/* =========================================================
◆common parts
========================================================= */
@media screen and (min-width:789px) {
.pcnone{ display: none !important;}
}



/* =========================================================
◆Link Style
========================================================= */

a:link    { color: #6a3331; text-decoration: none; }
a:visited { color: #6a3331; text-decoration: none; }
a:hover   { color: #6a3331; text-decoration: underline; cursor: pointer;}
a:active  { color: #6a3331; text-decoration: none; }
a:hover img  { opacity: 0.8;}

/* =========================================================
◆Wrap
========================================================= */
body { min-width: 960px; overflow: hidden; background:url(/common/img/bg_body.jpg) left top repeat; color:#6b3332; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;}
#Wrap {  margin: 0 auto; }


/* =========================================================
◆header
========================================================= */
header { background:url(/common/img/head_bg_001.png) center bottom no-repeat; position:relative; padding-bottom: 15px; z-index:250;}
header #headWrap{ background:#FFF; padding: 10px 0 15px 0;}
#headWrap:after  { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
#headWrap       { min-height: 1px; }
* html #headWrap{ height: 1px; }

header #headInner > div{ width:960px; margin:0 auto; position: relative;}

header .headInnerSP{ display:none;}

.logoArea h1 {width:135px; float:left; margin: 11px 10px 0; }
header #headR{ float:right; text-align:right;}

.subNav{
display: flex;
justify-content: flex-end;
text-align: right;
font-size: 95%;
font-family: "游明朝";
font-weight: bold;
}
.subNav li{
display: flex;
align-items: center;
margin-right:10px;
}
.subNav li:last-child{
margin-right: 0;
}
.subNav li a{
display: inline-block;
}

/* =========================================================
◆Gnav
========================================================= */
.gnav {text-align:right;clear:both;margin: 20px 0 0;}
/*header #headR .gnavPanel {background:url(/common/img/bg_gnav.gif) left 11px no-repeat; display:table;}*/
.gnavPanel > li {display:inline-flex;background: none;padding:4px 3px;vertical-align:middle;margin-right:0;min-height:36px;border-left: solid 1px #eee;}
.gnavPanel > li.last{background:none;  border-right: solid 1px #eee;}
/*header #headR .gnavPanel > li.last a{padding-right:0;}*/
.gnavPanel > li > a{ vertical-align:middle;font-size: 108%; font-weight: bold; padding: 4px 15px; font-family: "游明朝"; cursor: pointer;}
.gnavPanel > li > a:hover { text-decoration: none; background-color:#f5b1a2; color: #6b3332; border-radius: 3px;}
.gnavPanel > li > a.product_series_ttl span:first-child:before{
content:"コラージュ";
}

/* gnav
-------------------------------------------------------------- */
.gnavInner{
margin: auto;
}
.gnavPanel > li > div{
display: none;
position: absolute;
left:0;
right: auto;
top: 42px;
margin: auto;
z-index: 1000;
width: 960px;
}
.clone-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: 2;
transition: .3s;
transform: translateY(-150%);
background: white;
}
.clone-nav > div{
display: flex;
padding: 5px 0;
}
.clone-nav .logoArea{
display: flex;
align-items: center;
}
.clone-nav .logoArea h1{
width: 80px;
margin: auto 10px auto 0px;
}
.clone-nav .logoArea h1 a img{
width: 100%;
height: auto;
}
.clone-nav #headR{
display: flex;
flex-direction: row-reverse;
align-items: center;
width: 100%;
}
.clone-nav #headR .gnav{
margin-top: 0;
margin: 0 10px;
}
.clone-nav #headR .subNav{
text-align: center;
}
.clone-nav #headR .subNav li{
margin-right: 5px;
}
.clone-nav #headR .gnavPanel > li > a{
display: inline-block;
font-size: 95%;
text-align: center;
padding: 4px 10px;
}
.clone-nav #headR .subNav > li > a span{
display: block;
}
.clone-nav #headR .gnavPanel > li > a span{
display: block;
}
.clone-nav.is-show{
transform: translateY(0);
}
.overlay {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
}
.nav-open .overlay {
display: block !important;
}

/* dropdownMenu
-------------------------------------------------------------- */
.dropMenu{
display: none;
height:auto;
margin: auto;
border: 1px solid #f5b1a2;
box-sizing: border-box;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
position: relative;
text-align: left;
background: #fff;
z-index: 1000;
overflow: hidden;
padding: 20px 20px 0;
}
.dropMenu .btnClose{
justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
align-items: flex-end;
-webkit-align-items: flex-end;
-ms-align-items    : flex-end;
background: #f5b1a2;
position: absolute;
display: flex;
right: 0;
top: 0;
cursor: pointer;
box-sizing: border-box;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
font-size: 90%;
font-family: "游明朝";
font-weight: bold;
padding: 8px 16px;
}
.dropMenu .btnClose:hover{
opacity: 0.5;
}
.dropMenu h2{
vertical-align: middle;
font-size: 125%;
font-weight: bold;
font-family: "游明朝";
margin-bottom: 14px;
}
.dropMenu .dup2 {
vertical-align: middle;
font-size: 125%;
font-weight: bold;
font-family: "游明朝";
margin-bottom: 14px;
}

/* 製品シリーズ
-------------------------------------------------------------- */
.seriesWrap{
display: flex;
flex-wrap: wrap;
width: 960px;
}
.series{
margin: 0 9px 40px 0;
flex: 0 0 auto;
}
.seriesTtl{
vertical-align: middle;
font-size: 100%;
font-weight: bold;
color: #2f260d;
padding: 8px 10px;
font-family: "游明朝";
background: #fdefec;
white-space: nowrap;
margin-bottom: 10px;
}
.styleMain{
display: flex;
max-width: 713px;
}
.style404Main{
display: flex;
max-width: 960px;
}
.styleMain li{
display: inline-block;
font-size: 90%;
/*flex: 1 1 25%;*/
/*flex-basis: calc(25% - 30px);*/
width: calc(25% - 30px);
flex-grow: 1;
flex-shrink: 1;
text-align: left;
background: none;
padding-left: 0;
margin-right: 6px;
}
.styleMain li:last-child{
margin-right: 0;
}
.styleMain li a{
display: inline-block;
box-sizing: border-box;
position: relative;
}
.styleMain li a:hover{
opacity: 0.8;
}
.styleMain .imgBox{
display: block;
border: 1px solid #eaeceb;
min-width: 230px;
width: 100%;
text-align: center;
background: white;
}
.styleMain .imgBox img{
max-height: 200px;
background: white;
}
.styleMain .txtBox{
padding-top: 5px;
}
.styleMain .txtTtl{
vertical-align: middle;
font-size: 105%;
color: #6a3331;
margin: 0;
display: block;
line-height: 1.5;
}
.styleMain li a:hover .txtTtl{
text-decoration: underline;
}
.styleMain .txtcopy{
vertical-align: middle;
font-size: 85%;
color: #ea5550;
margin: 0;
display: inline-block;
line-height: 1.5;
}
.style404Main li{
display: inline-block;
font-size: 90%;
/*flex: 1 1 25%;*/
/*flex-basis: calc(25% - 30px);*/
width: calc(25% - 30px);
flex-grow: 1;
flex-shrink: 1;
text-align: left;
background: none;
padding-left: 0;
margin-right: 6px;
}
.style404Main li:last-child{
margin-right: 0;
}
.style404Main li a{
display: inline-block;
box-sizing: border-box;
position: relative;
}
.style404Main li a:hover{
opacity: 0.8;
}
.style404Main .imgBox{
display: block;
border: 1px solid #eaeceb;
min-width: 230px;
width: 100%;
text-align: center;
background: white;
}
.style404Main .imgBox img{
max-height: 200px;
background: white;
}
.style404Main .txtBox{
padding-top: 5px;
}
.style404Main .txtTtl{
vertical-align: middle;
font-size: 105%;
color: #6a3331;
margin: 0;
display: block;
line-height: 1.5;
}
.style404Main li a:hover .txtTtl{
text-decoration: underline;
}
.style404Main .txtcopy{
vertical-align: middle;
font-size: 85%;
color: #ea5550;
margin: 0;
display: inline-block;
line-height: 1.5;
}
/*ヘッダー用*/
header .series{
margin: 0 6px 24px 0;
flex: 0 0 auto;
}
header .styleMain li{
flex: 0 1 auto;
margin-right: 6px;
width: auto;
}
header .styleMain .imgBox{
min-width: 220px;
width: 220px;
}
header .seriesTtl{
padding: 4px 10px;
font-size: 95%;
}
header .styleMain .imgBox img{
max-height: 100px;
background: white;
}
header .styleMain .txtcopy{
display: none;
}
header .styleMain .txtTtl{
font-size: 95%;
}
header p.repair_note {
    padding: 0 25% 0 23px;
    text-indent: -15px;
}
header .repair_bg {
    background: url(/common/img/collage_series_medical_bg.png) left 450px center no-repeat;
    background-size: 100%;
    display: block;
    width: 920px;
    padding: 0 0 130px;
    position: relative;
}
header .other_bg {
    background: url(/common/img/cllage_series_bg.png) center bottom 20px no-repeat;
    background-size: 90%;
    display: block;
    width: 920px;
    padding: 10px 0 160px;
}
.repair_bg > .ico_orangeLink {
    position: absolute;
    top: 55px;
}
.border_pink {
    border-bottom: solid 1px #f5b1a2;
    margin: 15px -20px;
}

/* =========================================================
◆モーダル
========================================================= */
.tbox {position:absolute; display:none; padding:0; z-index:900}
.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; -webkit-border-radius:5px; background:#fff url(/common/img/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(/common/img/close.png) no-repeat}
#error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; border-right:1px solid #000; border-bottom:1px solid #000; padding:0}
#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px}
#success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; border-bottom:1px solid #000; -moz-border-radius:0; border-radius:0; -webkit-border-radius:5px;}
#bluemask {background:#4195aa}
#blackmask {background:#000000}
#frameless {padding:0}
#frameless .tclose {right: -30px; top: -30px;}


/* =========================================================
◆Main
========================================================= */
#dirPath { margin: 10px 0 55px; font-size:93%;}
#dirPath span { padding:5px; }

#mainVis { margin-bottom: 15px; outline: none; text-align:center;}

#Main{ margin:0 auto;}
#Main.col1,
#Main.col2{ width:960px; margin:0 auto;}
#Main.col2 #Cont{ width:715px; padding-bottom:30px; line-height:1.5; float:left;}

#Cont {position:relative;}



#Rside { float: right; width: 220px; }
#Rside nav.mainNav{ background:url(/common/img/bg_side_001.png) left top #f0f4f7 no-repeat; padding-top:10px; padding-bottom:10px; margin-bottom:20px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;}
#Rside nav.mainNav > ul{ padding:0 10px; line-height:0;}
#Rside nav.mainNav > ul li{}
#Rside nav.mainNav ul.sideList li{border-bottom:1px solid #f0f4f7; background:#FFF; line-height:1.5; cursor: pointer}
#Rside nav.mainNav ul.sideList li:hover{border-bottom:1px solid #f0f4f7; background:#fdefec; line-height:1.5; cursor: pointer}
#Rside nav.mainNav ul.sideList a{ padding:10px;margin-left:10px;background:url(/common/img/ico_002.png) left 1.1em no-repeat; padding-left:10px; display:block;}
#Rside nav.mainNav > ul.ac_inner li > ul.sideList li > p.ac_inner {background: url(/common/img/ico_001.png)0.5em no-repeat; background-color: #FFE4CA;}
#Rside nav.mainNav > ul.ac_inner li > ul.sideList li > p.ac_inner a{ padding:10px;margin-left:10px; background:none!important; padding-left:10px; color:#262626; display:block;}
#Rside nav.mainNav > ul.ac_inner li > ul.sideList li > p.ac_inner:hover{background-color: #f5b1a2;}

#Rside .bnrArea li{ margin-bottom:10px;}

/* =========================================================
◆pageTop
========================================================= */
.pageTop {clear: both; position:fixed; margin-left: 980px; bottom: 20px; z-index: 100;}

/* =========================================================
◆footer
========================================================= */
footer { background: url(/common/img/bg_shadow_001.png) center top repeat-x #f8f7f3; padding-top:40px;}
footer a{ color:#6a3331 !important;}

footer nav#footTop{ width:960px; margin:0 auto 80px; position:relative;}
footer nav#footTop:after  { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
footer nav#footTop       { min-height: 1px; }
* html footer nav#footTop{ height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }

footer nav#footTop > ul{ float:left; width:300px; margin-right:10px;}
footer nav#footTop > ul:last-child{ margin-right: 0;}
footer nav#footTop > ul > li{ background:url(/common/img/ico_001.png) left 0.3em no-repeat; font-weight:bold; font-size:116%; padding-left:20px;}
footer nav ul li ul{ margin-top:20px;}
footer nav ul li li{ font-weight:normal; font-size:86.7%; margin-bottom:10px;}

footer #footBtm{ border-top:1px solid #e2e2e2; position:relative; padding:30px 0 30px; text-align:center;}
footer #footBtm:after{ content:"."; border-top:1px solid #FFF; height:1px; position:absolute; top:0px; z-index:2; display:block; min-width:100%; text-indent:-9999px;}
footer #footBtm li{ display:inline-block; margin:0 10px;}

footer #copy{ text-align:center; padding-bottom:30px; font-size:77%;}

/* footer snsエリア
-------------------------------------------------------------- */
.sns_area {
  position:relative;width:960px;
  margin: 0 auto 42px;
}
.sns_wrap a:hover {
    text-decoration:none;
    opacity:1;
    }
  .sns_wrap a:hover img {
    opacity:1;
    }
.sns_wrap p {
  font-size:15px;
  line-height:1.6;
  margin-bottom:15px;
  }

.sns_insta {
  display:flex;
  flex-direction:column;
  }
.sns_x {
  //display:flex;
  //flex-direction:column;
  }
.sns_x h3::before {
  display:inline-block;
  width:37px;
  height:37px;
  content:"";
  background: url(/common/img/sns_x.svg);
  background-repeat: no-repeat;
  background-size: contain;
  }
.sns_line h3::before {
  width:37px;
  content:url(/common/img/sns_line.svg);
  }
.sns_insta h3::before {
  display:inline-block;
  width:37px;
  height:37px;
  content:"";
  background:url(/common/img/sns_insta.png);
  background-repeat:no-repeat;
  background-size:contain;
  }
.sns_insta ul {
  display:flex;
  gap:10px;
  max-width:357px;
  margin-top:auto;
  margin-left: 10px;
  }
.sns_insta ul li {
  width:100%;
  }
.sns_insta img {
  display:flex;
  gap:10px;
  width:100%;
  margin-top:22px;
  box-shadow:-7px 7px 0px 2px rgba(77, 76, 74, 0.15);
  }

@media (min-width: 768px) {
  .sns_wrap {
    display:grid;
    grid-template-columns: 40% 26% 34%;
    padding-bottom: 40px;
    border-bottom: 1px solid #cccccc;
    }
.sns_wrap a:hover p {
    text-decoration:underline;
    }
  .sns_insta {
    margin-left: 20px;
    padding-left: 20px;
    border-left:1px solid #cccccc;
    }
  .sns_line {
    display:grid;
    grid-template-columns:1fr 97px;
    gap: 0 30px;
    margin-right: 20px;
    padding-right: 20px;
    border-right:1px solid #cccccc;
    grid-template-rows:auto auto;
    grid-template-areas:
    "txt img"
    "btn img";
    justify-items:end;
    }
  .sns_line_txt {
    grid-area:txt;
    }
  .sns_line img {
    grid-area:img;
    -webkit-filter:drop-shadow(-9px 8px 0px rgba(77, 76, 74, 0.15));
            filter:drop-shadow(-9px 8px 0px rgba(77, 76, 74, 0.15));
    }
  .sns_line button {
    font-size:17px;
    width: 100%;
    height:100%;
    padding: 10px;
    cursor:pointer;
    color:#6a3331;
    border:none;
    border:1px solid rgb(238, 238, 238);
    border-radius:5px;
    background-color:transparent;
    background-image:-webkit-linear-gradient( 90deg, rgb(240,240,240) 0%, rgb(240,240,240) 50%, rgb(255,255,255) 100%);
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    grid-area:btn;
    }
  a:hover .sns_line button {
    opacity:0.7;
    }
  .sns_wrap h3 {
    font-size:17px;
    font-weight:bold;
    display:grid;
    align-items:center;
    grid-template-columns:37px 1fr;
    gap:16px;
    margin-bottom:15px;
    }
  }
@media (max-width: 760px) {
  .sns_area {
    position:relative;
    width:100%;
    margin: 0 auto 60px;
    }
  .sns_area h3 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:20px;
    text-align:center;
    }
  .sns_wrap {
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:14px;
    }
  .sns_wrap p {
    font-size:13px;
    display:grid;
    align-items:center;
    grid-template-columns:60px 183px;
    gap:15px;
    margin-bottom:0;
    line-height: 1.5;
    }
  .sns_wrap p::before {
    width:60px;
    content:url(/common/img/sns_line.svg);
    }
  .sns_wrap .sns_insta p::before {
    display:inline-block;
    width:60px;
    height:60px;
    content:"";
    background:url(/common/img/sns_insta.png);
    background-repeat:no-repeat;
    background-size:contain;
    }
  .sns_wrap .sns_x p::before {
    display:inline-block;
    width:60px;
    height:60px;
    content:"";
    background:url(/common/img/sns_x.svg);
    background-repeat:no-repeat;
    background-size:contain;
    }
  }