/* カットロック無料キャンペーン */

 /* フォント */
.cc_font{
	font-family: "游ゴシック", "Yu Gothic","游ゴシック体","YuGothic","Courier","Courier New","monospace","sans-serif","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic" ;
}
.p_m10{
margin-bottom: 10px;
}
.p_m20{
margin-bottom: 20px;
}

/* 目次 */
.toc-cl {
    margin-bottom: 30px;
    border-radius: 3px;
	background-color: #f5f5f5;
}

.toc-cl div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #476f81;
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
}

.toc-cl div::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    content: '';
}

.toc-cl label::after {
    margin-left: 7px;
    font-weight: 500;
    font-size: .7em;
    color: #fff;
    content: "[開く]";
    cursor: pointer;
}

.toc-cl:has(:checked) label::after {
    content: "[閉じる]";
}

.toc-cl input {
    display: none;
}

.toc-cl ol {
    list-style-type: decimal;
    margin: 0;
    overflow: hidden;
}

.toc-cl > ol {
    height: 0;
}

.toc-cl:has(:checked) > ol {
    height: auto;
    padding: 1em 1em 1em 3em;
}

.toc-cl ol ol {
    margin-top: 5px;
    padding-left: 1.1em;
}

.toc-cl li {
    padding: 5px 0;
    font-weight: 600;
}

.toc-cl ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.toc-cl a {
    color: #333;
    text-decoration: none;
}

.toc-cl a:hover {
  opacity: 0.7; 
}


/* 見出し */
.cl_h2{
  padding: 0.5em;
  background: #edf1f3;
  border-left: solid 5px #476f81;/*左線（実線 太さ 色）*/
}

/* 見出しトップ */
.heading-1 {
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 3px solid #21944a;
    color: #333333;
	
}

.heading-1::before,
.heading-1::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.heading-1::before {
    background-color: #21944a;
}

.heading-1::after {
    bottom: -11px;
    background-color: #fff;
}

/* 対象品 */
.cc_flex{
	margin: 0 auto;
    display: flex;
    gap: 10px;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
}
.cc_box1 {
  width: 70%;
}
.cc_box2 {
  width: 30%;
}
@media screen and (max-width: 767px) {
.cc_flex{
    flex-direction: column;
  }
.cc_box1 {
  width: 100%;
}
.cc_box2 {
  width: 100%;
}
}
/*見出しリボン*/
.ribbon1 {
  display: inline-block;
  position: relative;
  height: 50px;/*リボンの高さ*/
  line-height: 50px;/*リボンの高さ*/
  text-align: center;
  padding: 0 30px;/*横の大きさ*/
  font-size: 18px;/*文字の大きさ*/
  background: #21944a;/*塗りつぶし色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
　margin-bottom: 10px;
}

.ribbon1:before, .ribbon1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon1:before {
  top: 0;
  left: 0;
  border-width: 25px 0px 25px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.ribbon1:after {
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

/*メリット*/
.merit{
background-color: #476f81;
border-radius: 10px;
padding: 5px 10px;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 14pt;
margin-bottom: 5px;
}

/*毛足のタイプ*/
.cl_type{
padding: 5px 10px;
color: #476f81;
text-align: center;
font-weight: bold;
font-size: 14pt;
margin-bottom: 5px;
}

/*残ったカーペットは希望サイズに加工｜サイズ加工囲み*/
.cc_size{
border: solid 2px #cccccc;
border-radius: 10px;
padding: 10px;
text-align: center;
}

.under{
border-bottom: double 2px #476f81;
padding-bottom: 2px;
text-align: center;
}

.cl_sozai{
	background-color: #f2f5f6;
	border-radius: 5px;
	padding: 10px 5px;
	margin: 5px 0px;
}



/* サイズ表 */

.ff-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
.ff-table th,
.ff-table td {
  border: 2px solid #eee;
  padding: 4px 8px;
}


/* サイズ代 */
.cl-table02 {
  width: 90%;
  border-collapse: collapse;
  white-space: nowrap;
}
.cl-table02 th,
.cl-table02 td {
  border: 2px solid #eee;
  padding: 4px 8px;
}

/* サイズの測り方見出し */
.cl_midashi03{
	font-weight: bold;
	font-size: 14pt;
	margin-bottom: 5px;
}

/* 箱見出し */
.midashi2{
  display: inline-block;
  position: relative;
  background: #21944a;
  box-shadow: 0px 0px 0px 5px #21944a;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px;
}
.midashi2:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #114a25;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.cc_triangle{
  display: flex;
  justify-content: center; 
  align-items: center;
  color: #cccccc;
}
  /* スマホ（画面幅が767px以下）の場合非表示 */
  @media (max-width: 767px) {
    .cc_triangle {
      display: none; /* 要素を消す */
    }
  }

.cc_triangle2{
  text-align: center;
  font-size: 20pt;
  color: #cccccc;
}
  /* PC（画面幅が768px以下）の場合非表示 */
  @media (min-width: 768px) {
    .cc_triangle2 {
      display: none; /* 要素を消す */
    }
  }

.cc_size2{
	background: #f2f8fb;
	border-radius: 10px;
	padding: 10px 5px;
}
.cc_size2_1{
background: #fff;
border-radius: 10px;
border: solid 0.25px #476f81;
padding: 5px;
}

/* 素材特徴点 */
.list-cl {
  background-color: #f2f5f6;
　border-radius: 10px;
}


.list-cl ul {
  list-style-type: disc;
  margin: 0;
  padding: 1em 1em 1em 2.5em;
}

.list-cl li {
  padding: .3em .3em .3em 0;
}

.list-cl li::marker {
  color: #476f81;
  font-size: 1.1em;
}



/* サイズ表 */
.cctable-wrap {
  overflow-x: scroll;
}
.cc-table {
  width: 100%;
  border: 1px solid #b3b3b3;
  border-radius: 10px;
  border-spacing: 0;
  border-collapse: collapse;
  white-space: nowrap;
  
}
.cc-table th,
.cc-table td {
  border: 2px solid #b3b3b3;
  padding: 4px 8px;
}
.cc-table tr th:first-child {
  border-radius: 10px 0 0 0;
}
.cc-table tr th:last-child {
  border-radius: 0 10px 0 0;
}
.cc-table tr th:last-child {
  border-radius: 0 0 10px 0;
}
.cc-table tr th:first-child {
  border-radius: 0 0 0 10px;
}
.cc-table th,
.cc-table td {
  border-bottom: 1px solid #b3b3b3;
  border-right: 1px solid #b3b3b3;
  padding: 8px;
}
.cc-tablemidashi {
  background-color: #b3b3b3;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

/* サイズ代表 */
.size_processing {
  overflow-x: auto; /* 画面幅より広い場合に横スクロールバーを表示 */
  width: 100%;
}

.cl_table1 {
  width: 100%;
  border-collapse: collapse; /* 線の重なりを消す */
}

.cl_table1 th, td {
  border: 1px solid #b3b3b3;
  padding: 10px;
}

/* スラッシュ */
.cl_slash {
   position: relative;
  text-align: center;
  font-weight: bold;
  line-height: 1.1;
  font-size: 1.5rem;
	color: #c4995b;
}

.cl_slash::before,
.cl_slash::after {
   position: relative;
  display: inline-block;
  content: "";
  background: #c4995b;//斜め線の色
  width: 3px;//斜め線の太さ
  height: 1.5em;//斜め線の長さ
  margin: 0 1em;//テキストとの間に左右余白をつくる
  margin-top: -.2em;//斜め線の位置調整
  vertical-align: middle;
}

.cl_slash::before {
  
    transform: rotate(-30deg);
}

.cl_slash::after {

    transform: rotate(30deg);
}

.cc_check {
  position: relative;
  border-top: solid 2px #476f81;
  border-bottom: solid 2px #476f81;
  background: #f5f5f5;
  line-height: 1.4;
  padding: 1em 0.5em;
  margin: 2em 0 0.5em;
}
.cc_check:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: bold;
  content: '納期';
  background: #476f81;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.05em;
}

.cc_check2 {
  position: relative;
  border-top: solid 2px #476f81;
  border-bottom: solid 2px #476f81;
  background: #f5f5f5;
  line-height: 1.4;
  padding: 1em 0.5em;
  margin: 2em 0 0.5em;
}
.cc_check2:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: bold;
  content: 'お渡し方法';
  background: #476f81;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.05em;
}

.under2{
border-bottom: dashed 2px #fff;
padding-bottom: 2px;
text-align: center;
width: 150px;
color: #fff;
font-weight: 300;
margin:0 auto;

}

/* 商品名 */
.cc_item {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
  font-size: 14px;
　color: #cdb884;
}

.cc_item:before, .cc_item:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.cc_item:before {
  border-left: solid 1px #93dd75;
  border-top: solid 1px #93dd75;
  border-bottom: solid 1px #93dd75;
  left: 0;
}
.cc_item:after {
  content: '';
  border-top: solid 1px #93dd75;
  border-right: solid 1px #93dd75;
  border-bottom: solid 1px #93dd75;
  right: 0;
}

.cl_material {
  font-size: 14px;
  line-height: 0.8;
  font-weight: bold;
  color: #476f81;
}
.cl_material span {
  display: block;
  font-size: 9px;
  margin-top: 10px;
  text-align: center;
  color: #c4995b;
}

/* 商品ボタン */
a.cl_btn1a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin:0 auto;
    padding: .9em 2em;
    border: 1px solid #476f81;
    border-radius: 5px;
    background-color: #fff;
    color: #476f81;
    font-size: 1em;
}

a.cl_btn1a::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #476f81;
    border-right: 2px solid #476f81;
    content: '';
}
.cl_btn1 a{
	text-decoration: none;
}


/* 店舗を探す・来店予約ボタン */
.cl_btn2 {
 display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin:0 auto;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    background-color: #476f81;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.cl_btn2::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

.cl_btn2:hover {
    background-color: #638594;
}

.cl_btn2 a{
	text-decoration: none;
}

/* カットロック加工 */
.cc_box03{
	background: #f2f8fb;
	border-radius: 10px;
	padding: 5px;
}

.cc_flex02{
    display: flex;
    gap: 10px;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
}
.cc_box3 {
  width: 50%;
}

@media screen and (max-width: 767px) {
.cc_flex02{
    flex-direction: column;
  }
.cc_box3 {
  width: 100%;
}
}

/* アイコン */
.cc_icon2{
  padding: 0.5em;
  margin: 2px 0;
  display: block;
}
.cc_icon2:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 5px 0 0;
  background: url("/dcms_media/image/cc_icon2.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.cc_icon3{
  padding: 0.5em;
  margin: 2px 0;
  display: block;
}
.cc_icon3:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 5px 0 0;
  background: url("/dcms_media/image/cc_icon3.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}