@charset "utf-8";
/* BASE CSS Document */

*{
	margin:0;
	padding:0;
}

body{
	background-color: #ffffff;
	background-position: bottom;
	background-repeat: no-repeat;
	color:#000;
	font-size:11px;
	line-height:1.6;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Yu Gothic","Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Segoe UI", Verdana, Meiryo, sans-serif;
}

img{
	border:none;
	height: auto;
	vertical-align: bottom;
	max-width: 100%;
}

.searchBox input,textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-appearance: none;
    max-width: 100%;
    border-radius: 0;
}

a{
	color:#000;
}

/*a:link{
	color:#333333;
	text-decoration:none;
}

a:visited{
	color:#333333;
	text-decoration:none;
}*/

a:hover{
	text-decoration:none;
}

.clr{
	clear:both;
}

hr{
	height:1px;
	border-bottom:none;
	border-left:none;
	border-right:none;
	border-top:1px solid #A7A3A0;
}

hr.guide{
	margin:0 0 20px 0;
	height:1px;
	border-bottom:none;
	border-left:none;
	border-right:none;
	border-top:1px dotted #A7A3A0;
}

address{
	font-style:normal;
	margin:10px 0px 0 12px;
	font-size:80%;
}

p.howto{
	margin: 8px 0;
	text-align: center;
}

/* お問い合わせフォーム用 */
/* labelにポイントしたとき、マウスカーソルを変える */
label { cursor: pointer; }
/* フォーム要素 (このクラスを適用すると、左側に20ピクセルの余白を作ります) */
div.form_item {
	margin:0 0 10px 20px; }
/* ボタン (このクラスを適用すると、上側に20ピクセル、左側に80ピクセルの余白を作ります) */
div.form_submit { margin: 20px 0 0 80px; }
/* リンク表示領域 */
div.jb-link {
text-align: right;
position:absolute;
top:0;
left:-9999px;
}
/* 必須項目エラーメッセージ */
div.error {
width: 400px;
background-color: #fcc;
padding: 6px;
}
/* 必須 */
span.required {
	font-weight: bold;
	color:#ff3333;
}

/* for IE6 */
* html #primary ol li dl {
	display: inline;
}

/* for IE7 */
*:first-child+html #primary ol li dl {
	display: inline;
}


.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
.clearfix{
	display: inline-block;
}
/* Hides from IE Mac */
* html .clearfix{
	height: 1%;
}
.clearfix{
	display:block;
}
/* End Hack */

/*fancy-box*/
.fancybox-lock {
    overflow: hidden;
}



/* -----------------------------------------------
	header ヘッダー
-------------------------------------------------- */
/* ヘッダー ナビゲーション */
#headerNav {
	width: 862px;
	margin: 2% auto 1%;
}
#headerNav .spSiteIcon{
	display: none;
}
#headerNav ul{
	list-style-type: none;
	display: flex;
	align-items: flex-end;
}
#headerNav ul li{
	/* display: inline-block; */
	text-align: center;
}
.headerNav__item {
	flex-grow: 1;
	align-items: center;
}
#headerNav ul li.navLogo{
	/* padding-top: 1.5em; */
	padding-bottom: 1.5em;
	margin: 0 1em;
}
#headerNav ul li a {
	/* display: block; */
	/* margin: 15px 1px 0; */
	padding: 30px 11px;
	font-size: 11px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
}
.headerNav__ttl {
	line-height: 1.2;
}
#headerNav ul li a .subTtl{
	margin-top: .5em;
	font-size: 10px;
}

/* ヘッダー テキストロゴ */
.piacolleLogoWrap{
	margin: 0 auto 3%;
	text-align: center;
	width: 862px;
}
.piacolleLogoWrap a{
	text-decoration: none;
	display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.piacolleLogoWrap .subTtl{
	display: block;
	font-size: 10px;
	font-weight: normal;
}
.piacolleLogoWrap #piacolleLogo{
	/* width: 32%; */
	width: 275px;
}
#home .piacolleLogoWrap #piacolleLogo{
	width: 335px;
}


/* -----------------------------------------------
	footer フッター
-------------------------------------------------- */

/* フッター部分 */
#footer{
	background-color: #CCC;
	color: #FFF;
	padding: 25px 0;
}
#footer .wrap {
	margin: 0 auto;
	width: 862px;
}
#footer .copyright{
	float: left;
	font-size: 12px;
}
#footer .footer_menu{
	float: left;
	list-style-type: none;
	margin: 0 0 15px;
	width: 46%
}
#footer .footer_menu li{
	display: inline-block;
}
#footer .footer_menu li::after{
	content: '/';
	display: inline-block;
	margin: 0 0 0 4px;
}
#footer .footer_menu li:last-child::after{
	display: none;
}
#footer .footer_menu li a{
	color: #FFF;
	display: inline-block;
	font-size: 11px;
	padding: 2px 1px;
	text-decoration: none;
}
#footer .footer_bn{
	float: left;
}
#footer .footer_logo{
	float: right;
}

/* -----------------------------------------------
	leftnavi レフトナビ
-------------------------------------------------- */
#leftside {
	font-size: 11px;
	float: left;
	width: 215px;
}
#leftside a{
	color: #000;
}
#leftside .bnList{
	list-style-type: none;
	margin: 0 0 30px;
}
#leftside .bnList li{
	margin: 0 0 10px;
}
#leftside .bnList li a.borderWrap{
	border: 1px solid #CCC;
	display: block;
	text-decoration: none;
}
#leftside .bnList li.alignMiddle{
	text-align: center;
}
#leftside .bnList li.alignMiddle img,
#leftside .bnList li.alignMiddle div.txtArea{
	display: inline-block;
	vertical-align: middle;
}
#leftside .bnList li.alignMiddle div.txtArea{
	margin: 0 0 0 5px;
}
#leftside .bnList li.sideTestPrint{
	border: 1px solid #C1272D;
	color: #C1272D;
}
#leftside .bnList li.sideTestPrint .txtArea{
	text-align: left;
}
#leftside .bnList li .freeIcon{
	background-color: #CCC;
	color: #FFF;
	margin: 0 auto 2%;
	padding: 1%;
	width: 90%;
}
#leftside .bnList li .txtWrap{
	line-height: 1.6em;
	margin: 5px 0 0;
	text-align: left;
}
#leftside .sideOl{
	list-style-type: decimal;
	margin: 5px 0 0;
	padding: 0 0 0 20px;
	text-align: left;
}
#leftside .sideOl li{
	line-height: 1.6em;
}
#leftside .sideOl li a{
	text-decoration: none;
}

/* 電話日曜受付開始 By後藤 */
.c-side-contact {
	border: solid 1px #CCCCCC;
	padding: 8px;
	font-size: 13px;
	line-height: 1.4;
}
.c-side-contact__310 {
	background-color: #CCCCCC;
	text-align: center;
	margin-bottom: 10px;
	padding: 5px 0;
}
.c-side-contact__staff {
	font-size: 12px;
	line-height: 1.7;
	margin-bottom: 15px;
}
.c-side-contact__tel {
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: dotted 1px #CACACA;
}
.c-side-contact__tel__tel {
	padding-left: 30px;
	background-image: url(/paper_download/faq/images/icon-freedial.svg);
	background-size: 25px 16px;
	background-repeat: no-repeat;
	background-position: center left;
	margin-bottom: 5px;
}
.c-side-contact__tel__link {
	font-size: 25px;
	line-height: 1.2;
	margin-bottom: 10px;
}
.c-side-contact__tel__time {
	font-size: 12px;
	line-height: 1.7;
}
.c-side-contact__mail__mail {
	padding-left: 30px;
	background-image: url(/paper_download/faq/images/icon-mail.svg);
	background-size: 21px 15px;
	background-repeat: no-repeat;
	background-position: center left;
	margin-bottom: 10px;
}
.c-side-contact__mail__link {
	color: #FFFFFF!important;
	background-color: #A0A0A0;
	font-size: 11px;
	line-height: 1.5;
	padding: 7px 0;
	text-align: center;
	border-radius: 4px;
	display: block;
	text-decoration: none;
}
.c-side-contact__mail__link:hover {
	opacity: .7;
}

/* -----------------------------------------------
	mainarea メインエリア
-------------------------------------------------- */
/* コンテンツエリア　*/
#contents_wrap {
	margin: 0 auto;
	width: 862px;
}


/* メインエリア */
#mainarea {
	float: right;
	width: 600px;
}
#home #mainarea {
	width: 862px;
}

/* #samplepage #mainarea {
    width: 862px;
} */
#samplepage {
	overflow-x: hidden;
}
#samplepage #mainarea {
    width: auto;
	float: none;
}

/*サイドバーなし*/
/* #samplepage div#freeSample {
    width: 774px;
    margin: 0 auto 30px auto;
} */

/* タイトルエリア */
#titleArea{
	border-bottom: 1px solid #CCC;
	font-weight: normal;
	margin: 0 0 4%;
	padding: 0 0 1%;
	text-align: center;
	width: 100%;
}
#titleArea span{
	font-size: 15px;
}
#titleArea .subTtl{
	font-size: 14px;
}

/* -----------------------------------------------
	404 404ページ
-------------------------------------------------- */
/* コンテンツエリア　*/
#txt404{
	margin: 5% 0;
	text-align: center;
}
#txt404 .ttl{
	font-size: 25px;
	margin: 0 0 1%;
}
#txt404 .txt{
	font-size: 13px;
}

/* -----------------------------------------------
	共通で使えそうなもの＠随時様子見て追加？
-------------------------------------------------- */

.mt5 { margin-top: 5px; }
.mr5 { margin-right: 5px; }
.mb5 { margin-bottom: 5px; }
.ml5 { margin-left: 5px; }
.mt10 { margin-top: 10px; }
.mr10 { margin-right: 10px; }
.mb10 { margin-bottom: 10px; }
.ml10 { margin-left: 10px; }
.mt15 { margin-top: 15px; }
.mr15 { margin-right: 15px; }
.mb15 { margin-bottom: 15px; }
.ml15 { margin-left: 15px; }
.mt20 { margin-top: 20px; }
.mr20,
.mr20-0 { margin-right: 20px; }
.mb20 { margin-bottom: 20px; }
.ml20 { margin-left: 20px; }
.mt25 { margin-top: 25px; }
.mr25 { margin-right: 25px; }
.mb25 { margin-bottom: 25px; }
.ml25 { margin-left: 25px; }
.mt30 { margin-top: 30px!important; }
.mr30 { margin-right: 30px; }
.mb30 { margin-bottom: 30px!important; }
.ml30 { margin-left: 30px; }

.txt-l {text-align:left;}
.txt-c {text-align:center;}
.txt-r {text-align:right;}

.wdt10 { width:10%;box-sizing:border-box; }
.wdt20 { width:20%;box-sizing:border-box; }
.wdt30 { width:30%;box-sizing:border-box; }
.wdt40 { width:40%;box-sizing:border-box; }
.wdt50 { width:50%;box-sizing:border-box; }
.wdt60 { width:60%;box-sizing:border-box; }
.wdt70 { width:70%;box-sizing:border-box; }
.wdt80 { width:80%;box-sizing:border-box; }
.wdt90 { width:90%;box-sizing:border-box; }

.flt-r{ float: right; }
.flt-l{ float: left; }

.grayBorder-t{ border-top:1px solid #CCC; }
.grayBorder-r{ border-right:1px solid #CCC; }
.grayBorder-b{ border-bottom:1px solid #CCC; }
.grayBorder-l{ border-left:1px solid #CCC; }

#samplepage .indentNote {
    font-size: 11px;
}
.indentNote{
	display: block;
	padding: 0 0 0 1em;
	text-indent: -1em;
}

.dsp-b{ display: block; }
.hide,.dsp-n{ display: none; }
.dsp-i{ display: inline; }
.dsp-ib{ display: inline-block; }

/* 》 ←コレ下向き */
.arw-90deg{ display: block; }
.arw-90deg:after{
	content: "》";
	font-size: inherit;
	display: block;
	line-height: 1em;
	margin: auto;
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	width: 1em;
}

.mincho{
	font-family: "小塚明朝 Pr6N","ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

/******************R3.7.30 EC事業部 鳥居 編集*************************/
.c-container {
	width: auto;
	height: auto;
}

.c-inner {
	margin: 0 auto;
	text-align: center;
}

.c-inner-gold {
	background-color: rgb(236, 229, 229);
}

.primary-image {
	text-align: center;
}

.sample-content__text {
	line-height: 2;
	font-size: 16px;
	text-align: center;
}

.sample-info__wrapper {
    display: block;
	width: min(95%, 862px);
}

.sample-info__img {
	margin: 0 auto;
	text-align: center;
}

.sample-img__between {
	padding: 0 5px;
}


._pc_flex {
	display: flex;
	justify-content: center;
}

._pc-sample-img__flex {
	padding: 0 7px;
	list-style: none;
}


.sample-precaution{
	text-align: center;
	font-size: 16px;
	border-bottom: 1px solid #CCC;
}
.sample-precaution__middle {
    margin-block-start: 30px;
	margin-inline: auto;
	width: min(100%, 862px);
}

.main-category {
	margin-inline: calc(50% - 50vw);
}

.sample-primary__heading {
	font-size: 24px;
}

.parent {
	display: flex;
	justify-content: center;
  }


.sample-title__inner {
	display: flex;
}

.c-sample__button {
	margin: 0 auto;
	width: 350px;
}

.primary-group__wrap
.group-box01 {
	max-width: 862px;
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	justify-content: center;
	margin: 0 auto;
  }


  .primary-group__wrap
  .group-box01
  .desc {
	display: flex;
	flex-direction: column;
	padding-right: 60px;
	width: 40%;
  }

  .primary-group__wrap
  .group-box01
  .txt {
	flex-grow: 1;
	font-size: 16px;
	text-align: start;
	line-height: 1.8;
  }

.primary-group__wrap
.group-box02 {
	max-width: 862px;
	display: flex;
	align-items: stretch;
	justify-content: center;
	margin: 0 auto;
  }


  .primary-group__wrap
  .group-box02
  .desc01 {
	display: flex;
	flex-direction: column;
	padding-left: 60px;
	width: 40%;
  }

  .primary-group__wrap
  .group-box02
  .txt01 {
	flex-grow: 1;
	font-size: 16px;
	text-align: start;
	line-height: 1.8;
  }

  .txt02 {
	  font-size: 14px;
	  text-align: start;
	  line-height: 1.5;
	  padding-bottom: 60px;
  }

  .item-introduction {
	  font-size: 14px;
	  font-weight: 700;
	  margin: 15px 0;
  }

.list-style {
	list-style: none;
}

/* .sample-precaution__middle {
	position: relative;
	height: 300px;
  } */

/* .sample-precaution__middle ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
} */

.sample-coupon__img {
	max-width: 862px;
	margin: 0 auto;
}


/*******************index_default.php / サンプル請求ページ最上部*************************/
.top-title {
	font-size: 12px;
	border-bottom: 1px solid #CCC;
}

.item-flex {
	display: flex;
    justify-content: center;
    align-items: center;
    text-align: start;
	padding: 18px 0;
}

.item-content {
	padding-right: 20px;
}

/***************サンプル請求 / 最下部ボタン********************/
#sample-under__button {
	font-weight: bold;
}

/***************サンプル請求 / サロンリンク********************/
.sample-primary__salon{
	width: 862px;
	margin: 0 auto;
	justify-content: center;
}
.sample-primary__salon-item{
	width: 31%;
	margin: 0 1rem;
}