@charset "utf-8";

/* =========================================================
◆Wrap
========================================================= */
body { min-width: 100%;}
#Wrap { margin: 0;}
.spnone{ display: none !important;}

/* =========================================================
◆header
========================================================= */
header{ position: fixed; top: 0;}
header #headWrap{
background:#FFF;
padding:0;
top: 0;
width: 100vw;
z-index: 9999;
box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
header #headInner{ display:block; width:100%; }
header #headInner > div{
width: 100%;
display: flex;
}
header #headInner.is-show{
transform: translateY(-150%);
}
header #headR{
float: none;
display: flex;
flex-grow: 1;
flex-direction: row-reverse;
justify-content: center;
}
.subNav{
flex: 1 1 auto;
}
.subNav li{
border-left: solid 1px #eee;
margin-right: 0;
text-align: center;
flex: 1 1 auto;
justify-content: center;
}
.subNav li a{
font-size: 2.5vw;
white-space: nowrap;
}

/* =========================================================
◆Gnav
========================================================= */
.gnav{
flex: 2 1 auto;
margin: 0;
text-align: center;
}
.gnavInner,.gnavPanel{
height: 100%;
}
.gnavPanel > li{
display: inline-flex;
justify-content: center;
align-items: center;
height: 100%;
width: 48%;
box-sizing: border-box;
}
.gnavPanel > li:nth-child(n+3){
display: none;
}
.gnavPanel > li > a{
font-size: 3.5vw;
padding: 5px;
}
.gnavPanel > li.selected .product_series_ttl{
background-color: #f5b1a2;
}
.gnavPanel > li.selected .sp_store_guide














.gnavPanel > li > a:hover{
background-color: transparent;
}
.gnavPanel > li > a.product_series_ttl span:first-child:before{
content:"";
}
.gnavPanel > li > a span,
.subNav > li > a span{
display: block;
}
.gnavPanel > li > div{
width: 100%;
height: auto;
max-height: calc(100% - 63px);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: fixed;
top: 63px;
}

/* dropdownMenu
-------------------------------------------------------------- */
.dropMenu{
padding: 0;
}
.dropMenu .btnClose{
bottom: 0;
top: auto;
left: 0;
right: 0;
}
.dropMenu h2{
display: none;
}
.dropMenuWrap{
width: 100%;
}
.dropMenu .dup2 {
display: none;
}

/* 製品シリーズ
-------------------------------------------------------------- */
.seriesWrap{
display: block;
width: 100%;
margin-bottom: 32px;
}
.series{
margin: 0 0 10px 0;
}
.styleMain,.style404Main{
flex-wrap: wrap;
justify-content: space-between;
}
.styleMain li,.style404Main li{
flex-basis: calc(50% - 5px);
flex-grow: 0;
flex-shrink: 1;
margin: 0 0 20px 0;
}
.styleMain .imgBox,.style404Main .imgBox{
min-width: auto;
}
.styleMain .imgBox img,.style404Main .imgBox img{
max-height: none !important;
width: 100%;
height: auto;
}
/*ヘッダー内*/
header .series{
margin: 0;
}
header .styleMain .txtBox,header .style404Main .txtBox{
padding: 0;
}
header .styleMain,header .style404Main{
display: block;
}
header .styleMain li,header .style404Main li{
display: block;
}
header .styleMain li a,header .style404Main li a{
display: flex;
align-items: center;
}
header .styleMain li,header .style404Main li{
flex: 0 0 100%;
border-bottom: 1px solid #efefef;
background: white;
margin: 0;
}
header .styleMain li:last-child,header .style404Main li:last-child{
border: none;
}
header .styleMain .imgBox,header .style404Main .imgBox{
width: 50px;
min-width: auto;
border: none;
}
header .styleMain li img,header .style404Main li img{
width: 100%;
}
header .seriesTtl{
margin-bottom: 0;
white-space: normal;
}
header .repair_bg {
	background: url(/common/img/collage_series_medical_bg.png) left 10px bottom 0px no-repeat;
	background-size: 90%;
	width: 100%;
	padding: 15px 10px 77px;
	box-sizing: border-box;
}
header .other_bg {
    background: url(/common/img/cllage_series_bg.png) left 10px bottom 50px no-repeat;
    background-size: 90%;
    width: 100%;
    padding: 0 10px 110px;
    box-sizing: border-box;
}
.repair_bg > .ico_orangeLink {
    top: unset;
}

/* logoArea
-------------------------------------------------------------- */
.logoArea{
min-height: 50px;
display: flex;
align-items: center;
flex: 0 1 auto;
}
.logoArea h1{
width: auto;
margin: auto 5vw auto 3vw;
}
.logoArea h1 a{
display: inline-block;
margin:auto;
height: 30px;
box-sizing: border-box;
}
.logoArea h1 a img{
width: 16vw;
height: auto;
vertical-align: middle;
}
.logoArea ul{
display: flex;
flex: 1 1 auto;
justify-content: space-around;
}
.logoArea ul li{
font-size: 3.5vw;
font-family: "游明朝";
font-weight: bold;
padding: 1.5vw;
}
.nav-open .nav-btn{
background: #f5b1a2;
border-radius: 5px;
}
.logoArea ul li span{
display: block;
}

/* nav-open
-------------------------------------------------------------- */
.nav-open{
position: fixed;
left: 0;
}
.nav-open .overlay {
display: block !important;
}
.nav-open .overlay:after{
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgba(0,0,0,.6);
}

/* =========================================================
◆parts
========================================================= */

/* お問い合せ・オンラインショップボタン
-------------------------------------------------------------- */
/* ヘッダー用 */
header .btn_shop,
header .btn_store{
padding: 34px 20px 5px 5px;
background: transparent;
border: none;
color: #6a3331;
}
header .btn_store02{
padding: 5px;
background: transparent;
border: none;
color: #6a3331;
}
.subNav li a.btn_store02{
font-size: 3.5vw;
}
header .btn_shop span{
color: #6a3331;
}
header .btn_shop:after,
header .btn_store:after{
bottom: 10px;
top: auto;
left: auto;
right: 5px;
width: 12px;
background: url(/common/img/ico_blank_pink.png) no-repeat center center/contain;
}
header .btn_store02:after{
bottom: 0;
top: 0;
//left: auto;
right: -11px;
width: 12px;
background: url(/common/img/ico_blank_pink.png) no-repeat center center/contain;
}
header .btn_shop:before,
header .btn_store:before{
bottom: auto;
top: 7px;
left: 0;
right: 0;
width: 20px;
height: 20px;
}
header .btn_shop:before{
background: url(/common/img/ico_shop.png) no-repeat center center /contain;
}
/*メインカラム用*/
.contact .btn_outer,
.contact .btn_outer li,
.contact .btn_tel,
.contact .btn_mail,
.contact .btn_mail span{
display: block;
width: 100%;
}
.contact .btn_outer li{
margin-bottom: 10px;
}
.contact .btn_store,
.contact .btn_hospi,
.contact .btn_ds{
font-size: 125%;
padding: 20px 11%;
}
.contact .btn_shop{
font-size: 130%;
padding-left: 45px;
}
.contact .btn_ds,
.contact .btn_hospi{
text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
-1px 1px 0 #FFF, 1px -1px 0 #FFF,
0px 1px 0 #FFF,  0-1px 0 #FFF,
-1px 0 0 #FFF, 1px 0 0 #FFF;

}
.contact .btn_tel,
.contact .btn_mail{
font-size: 100%;
}
.contact .btn_mail span.note{
width: auto;
margin-top: 5px;
}
.contact .btn_shop:before,
.contact .btn_store:before,
.contact .btn_ds:before,
.contact .btn_hospi:before,
.contact .btn_tel:before,
.contact .btn_mail:before{
width: 20px;
height: 20px;
left: 15px;
}
.contact .btn_shop:after{
right: -12em;
left: 0;
top: auto;
bottom: 28px;
}
.contact .btn_store:after{
right: -13.5em;
left: 0;
}
.contact .btn_outer.order { display: flex;}
.contact .btn_outer.order li { flex-basis: calc(100% - 0px);}
.contact .btn_outer.order li:nth-child(1){order: 1;}
.contact .btn_outer.order li:nth-child(2){order: 4;}
.contact .btn_outer.order li:nth-child(3){order: 2;}
.contact .btn_outer.order li:nth-child(4){order: 3;}


/*   第二階層メニュー   */

/* =========================================================
◆Main
========================================================= */
#dirPath { display: none;}

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

#Main,#Main.col1,#Main.col2{width:100% ; margin:0 auto; padding-top: 63px;}
#Main #Cont{
width: 94% !important;
padding: 0 3% 30px !important;
float:none !important;
}

#Cont {
position:relative;
margin-bottom: 0;
}
#Cont h1 {
font-size: 150%;
margin:30px 0;
}
#Cont .products h1 {
margin-bottom:10px;
}
#Cont h2,.contact h2 {
font-size: 130%;
margin-bottom:20px;
padding-left:7px;
}
#Cont h3 span{
font-size: 110%;
padding: 0  0 2px;
}
#Cont h3{
margin-bottom:10px;
}
.historyarea table {
width: 100%;
}

#Cont p.lead {
font-size:100%;
margin: 15px 0 20px;
}

.thumb {
position:relative;
width:100%;
height:0;
padding-bottom: 60vw;/* 幅に対する縦のサイズ */
overflow:hidden;
}
.historyarea .thumb_center img{
width: 100%;
height: auto;
}

.thumb img {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:auto;
height: 60vw;
max-width:224%;/* 横向き16:9の画像が表示エリア一杯になるように指定 */
max-height:initial;
}
.txt_left {float:none;width:100%;text-align:left;}
.txt_right {float:none;width:100%;text-align:left;}
.thumb_left,
.thumb_right,
.thumb_center {float:none !important;width:100%;text-align:center;}
.w530,
.w525,
.w598,
.w440,
.w530,
.w400,
.w260 { width: 100% !important;} { width: 100% !important;}

.spOnly_w100p { width: 100% !important ; height: auto;}

/*-----------------------------------------------------
TOPページ
------------------------------------------------------*/
.visualArea {
/*スライド1枚しかないとき*/
padding-bottom: 0;
/*padding-bottom: 50px;*/
height: auto;
margin-bottom: 0;

}
.top_movie{
margin-bottom: 55px !important;
background: none;
}
.movie_inner{
width: 100% !important;
}
.slider img{
max-width: 100%;
height:auto;
}
/* スライド1枚しかないとき */
.visualArea > a img{
max-width: 100%;
height:auto;
}


/*新着情報*/
.news,
#Cont .news h2,
.newsArea,
.newsArea dt,
.newsArea dd{
display:block;
width: 100%;
float: none;
}
#Cont .news h2{
margin-bottom: 10px;
font-size: 110%;
}
.newsArea{
padding-left: 0;
box-sizing: border-box;
}
.newsArea dt{
margin-bottom: 10px;
}
/*バナーエリア*/
.bnArea .inner,.Section .inner,ul.inner { display: block;}
.bnCol{ display: block; margin-bottom: 50px;}
.contact .inner {
width: 94% !important;
padding: 20px 0 !important;
margin:0 auto;
}

/*コラージュの理念*/
.bnArea .inner .bnCol.mr20,.Section .inner .bnCol.mr20,.Section .inner .bnCol.mr30 { margin-right:0 !important;}

/* ご購入はこちら */
.contact .inner h2{ margin-bottom:10px;}

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

商品情報

------------------------------------------------------*/
.productsInfo{
padding:5px 0 30px !important;
}
.productsInfo h1{
margin:5px 0 !important;
font-size:150% !important;
}
.productsInfo .saleEnd{
    top: 7px !important;
    left: 20px;
    right: 0 !important;
    font-size: 85%;
}
.productsInfo .inner .saleEnd2{
    display: block;
    top: 32px !important;
    left: 20px;
    right: 0 !important;
    font-size: 85%;
}
@media only screen and (max-width: 358px) {
.productsInfo .saleEnd{
    top: 7px !important;
    left: 15px !important;
    right: 0 !important;
    font-size: 80%;
}
.productsInfo .inner .saleEnd2{
    display: block;
    top: 32px !important;
    left: 15px !important;
    right: 0 !important;
    font-size: 80%;
}
}

.productsInfo .inner{padding:0 10px 30px}
.productsInfo .inner:last-child{padding:0 10px 0; position:relative;}
.productsInfo .inner.lower{ padding-top:30px !important;}
.productsInfo .inner .thumbArea{ float:none; width:100%;}
.productsInfo .inner .thumbArea img{ width: 100%; height:auto;}
.productsInfo .inner .ico_orangeLink { display: block;}
.productsInfo .inner .thumbArea .ico_orangeLink { display: none;}
.productsInfo .inner .info{ float:none; width:100%;}
.productsInfo .inner .info h2{ display: none;}
#Cont .productsInfo .inner .thumbArea h2{
	display: block;
	margin-bottom: 0;
	font-weight: bold;
	font-family: "游明朝";
	line-height: 1.4;
	border-left:none !important;
	padding: 20px 10px !important;
	font-size:140% !important;
}
#Cont .productsInfo .inner .thumbArea .dup2 {
    display: block;
    margin-bottom: 0;
    font-weight: bold;
    font-family: "游明朝";
    line-height: 1.4;
    border-left: none !important;
    padding: 20px 10px !important;
    font-size: 140% !important;
}
#Cont .productsInfo .inner .thumbArea h2 span.gray{ display: block !important; }
.productsInfo .inner .info ul.component li span { white-space: normal !important;}


.innerWrap h1{
display: none;
}
.innerWrap .dup1 {
display: none;
}
.productsInfo .inner .info ul.cat2{
margin-bottom: 30px;
}
.productsInfo .inner .info .price {
padding: 12px 0;
margin-bottom: 12px;
}
.productsInfo .inner .info .catch {
display: none;
}
.productsInfo a.btn_shop{
width: 90%;
}
.productsInfo .inner .info .dup2 {
display: none;
}
.productsInfo .dup1 {
margin: 5px 0 !important;
font-size: 150% !important;
}
/*ページ内リンク*/
.pageLinkArea{
width: 100%;
padding: 10px;
}
.pageLinkList dl{
display: block;
}
.pageLinkList dd{
margin-left: 10px;
}
.recommendedBox{
padding: 10px;
}
.recommendedBox_repairsoap{background: #fff url(/common/img/contect_bg_repairsoap.png) right 10px center no-repeat; padding: 20px 50px 15px 10px;
}
.recommendedBox_repairsoap a{
margin-left: 0px !important;
}
.br-sp {display: block;}
.notesBox_repairimg {font-size:84.6%; margin-bottom:15px; background: #fdefec url(/common/img/contect_bg_repair.png) right 15px bottom 10px no-repeat; padding:15px !important;}
.notesBox_repairimg a{
margin-left: 0px !important;
}
.spScroll{
overflow-x: scroll;
}

/*-----------------------------------------------------
製品情報ページ内FAQ
------------------------------------------------------*/
.productsFaq .accordion_dl{
font-size: 90%;
}
.productsFaq .accordion_dl dt{
padding: 14px 40px 14px 50px;
}
.productsFaq .accordion_dl dt:before,
.productsFaq .accordion_dl dd:before{
font-size: 26px;
top: 7px;
width: 50px;
}
.productsFaq .accordion_dl dt:after{
top: 19px;
}
.productsFaq .accordion_dl dt.Side_Open:after{
top: 22px;
}
.productsFaq .accordion_dl dd{
padding-left: 50px;
margin-top: 10px;
}
.productsFaq .accordion_dl dd:before{
top: -4px;
}


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

コラージュ倶楽部

------------------------------------------------------*/
#Cont h1.cc {
padding-top:35px;
background-size: 33%;
margin: 20px 0 30px
}
#Rside nav.mainNav > ul.club li p{
font-size: 75%;
padding: 0;
/*display:inline;*/
}
#Rside nav.mainNav > ul.club li p:before {content:"（";}
#Rside nav.mainNav > ul.club li p:after {content:"）";}
#Cont h2.benefits{
font-size: 130%;
padding: 10px 0 10px 7px;
}
#Cont h2.benefits span{
display:block;
font-size: 90%;
color:#ea5550;
margin-top:25px;
}
img.over{
max-width:413px;
width:100%;
height:auto;
}
div.productsInfo .innerWrap .w330 {
    width: 100% !important;
    padding-right: 0 !important;
}
div.productsInfo .innerWrap .ml25 {
    margin-left: 10px !important;
}
.orangeBdrTtl {
    text-align: left;
}
.present02 .manual span.txt01{left:0%;}
.present02 .manual span.txt02{left: 35%;}
.present02 .manual span.txt03{left: 70%;}

/*アイコン*/
.ico_blank{background: url(/common/img/ico_blank_pink.png) right 1px bottom no-repeat !important;}

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

サイトマップ

------------------------------------------------------*/
div.mapcont_inner { padding: 10px;}
div.mapcont_inner .fl_L { float: none !important ; }
div.mapcont_inner .fl_R { float: none !important ; }
div.mapcont_inner div div.map_inner { width: 100% !important;}
ul.map_link {
    width: 100% !important;
    padding: 10px 5px;
    box-sizing: border-box;
}
div.mapcont_inner .ml30 { margin-left: 0 !important;}


/* =========================================================
◆sidenavi
========================================================= */
#Rside { float: none; width:100%; }
#Rside nav.mainNav{ background: #f0f4f7; 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:#f5b1a2; 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 center no-repeat; padding-left:10px; color:#262626; 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{ display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px;}
#Rside .bnrArea li{ flex: 1 1 45%; margin-bottom:5px;}
#Rside .bnrArea li:nth-child(odd){ margin-right: 5px;}
#Rside .bnrArea li img{ width: 100%; height: auto;}

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


/* =========================================================
◆footer
========================================================= */
footer { padding: 40px 20px 10px 20px;}
footer a{ color:#6a3331 !important;}
footer nav#footTop{ width:100%; margin:0 auto 20px; 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{ font-size: 80%;float:none; width:100%; margin-right:0; margin-bottom: 40px;}
footer nav#footTop > ul > li{ background:url(/common/img/common/ico_001.png) left 0.2em no-repeat; font-weight:bold; font-size:116%; padding-left:15px;}
footer nav ul li ul{ margin-top:10px;}
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:block; margin:10px 0;}
footer #copy{ text-align:center; padding-bottom:0; font-size:77%;}

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

取り扱い店舗（医療機関）一覧

------------------------------------------------------*/
.tenpoList table {
	box-sizing: border-box;
}
.tenpoList table th{
	display: none;
}
.tenpoList table td{
	width: 100%;
	display: block;
	border:none !important;
	padding-left: 45px !important;
}
.tenpoList table td:first-child{ background:url(/common/img/icon_search_shisetsu.png) left 6px center no-repeat; }
//.tenpoList table td:first-child{ background:url(/common/img/icon_search_tenpo.png) left 6px center no-repeat; }
.tenpoList table td:nth-child(2){ background:url(/common/img/icon_search_addr.png) left 6px center no-repeat; }
.tenpoList table td:nth-child(3){ background:url(/common/img/icon_search_tel.png) left 6px center no-repeat; min-height:40px;}
//.tenpoList table.clinic td:first-child{ background:url(/common/img/icon_search_shisetsu.png) left 6px center no-repeat !important; }
.prefecturesArea.Section > .inner li.bnCol {margin-right: 0 !important;}

.prefecturesArea .accordion_dl {
    margin-bottom: 7px;
}
.prefecturesArea .accordion_dl dt{
	pointer-events: auto;
	cursor: pointer;
}
.prefecturesArea .accordion_dl dt:after{
	position: absolute;
	top: 13px;
	bottom: auto;
	right: 20px;
	left: auto;
	margin: auto;
	content: "";
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #6b3332;
	border-right: 2px solid #6b3332;-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.prefecturesArea .accordion_dl dt.Side_Open:after{
	top: 17px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.prefecturesArea .accordion_dl dd{
	display: none;
}
.prefecturesArea li.bnCol{
	margin-bottom: 0 !important;
}
.prefecturesArea li.mr20{
	margin-right: 0 !important;
}
.prefecturesArea .accordion_dl ul.ico_orangeLink li{
	margin-bottom: 20px !important;
}
.prefecturesArea .accordion_dl ul.ico_orangeLink li a {
    display: block;
}

/*市区町村リスト*/
.cityArea ul.ico_orangeLink {
	margin-bottom: 30px !important;
}

.cityArea ul.ico_orangeLink li {
	width: 49.2%;
	margin: 0 0 1% 0 !important;
	padding: 0 0 0 15px;
}
.cityArea ul.ico_orangeLink li a{
    display: block;
	width: 100%;
	line-height:3.0;
	background:url(/common/img/ico_001.png) left center no-repeat;
}
.cityArea ul.ico_orangeLink li:hover{
	background-color: #ea908d;
}
.cityArea ul.ico_orangeLink li a:hover{
	text-decoration: none;
}

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

コラージュリペアシリーズ サンプルお申込み

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

.sample_center{
	width: 100%;
}


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

Cookie取得同意モーダル

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

.js-modal-cookie_inner{
	padding: 30px 20px 10px 20px;
	width: 100%;
	display: block;
}
.cookie-btn-agree{
	width: 100%;
	margin-left: 0;
	margin-top: 10px;
}