@charset "utf-8";
/*
Theme Name: ディークロス
Theme URI: 
Description: ディークロス（カスタマーハラスメントに対する基本方針）
Version: 1.0
Author: ディークロス
Author URI: 
Tags: ディークロス
*/

/*  ※このファイル内のクラス名・CSS変数は他ファイルと干渉しないよう「cshara_」「--cshara-」で始まる名前に統一しています  */



/* ------ 変数  */

.cshara_box1 {
--cshara-txt-color: #4b4c4e;
--cshara-accent-color: #57c3e8;
--cshara-line-color: #ddd;
--cshara-define-bg: #f2fafd;
--cshara-note-bg: #f7f7f7;
--cshara-note-color: #d9534f;
--cshara-font: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
}

/* --------------------------------------------- 変数  */



/* ------ 一段目  */


.cshara_box1 {
width: 100%;
margin: 0px;
padding: 0px 0px 80px 0px;
box-sizing: border-box;
overflow: hidden;
display: block;
clear: both;
font-size: 0px;
line-height: 0px;
position: relative;
background: #fff;
}


.cshara_waku1 {
width: 1200px;
margin: 0px auto;
padding: 0px;
box-sizing: border-box;
overflow: hidden;
display: block;
clear: both;
font-size: 0px;
line-height: 0px;
position: relative;
text-align: left;
}


/* 大見出し（タイトル） */
.cshara_waku1 h2.cshara_title {
width: 100%;
margin: 80px 0px 0px 0px;
padding: 0px 0px 0px 20px;
box-sizing: border-box;
position: relative;
display: inline-block;
font-size: 28px;
line-height: 1.2;
color: var(--cshara-txt-color);
font-style: normal;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px;
font-family: var(--cshara-font);
border: solid 0px var(--cshara-accent-color);
border-left-width: 4px;
}


/* 1. 〜 4. の見出し */
.cshara_waku1 h3 {
width: 100%;
margin: 60px 0px 0px 0px;
padding: 0px 0px 10px 26px;
box-sizing: border-box;
position: relative;
display: inline-block;
font-size: 20px;
line-height: 1.2;
color: var(--cshara-txt-color);
font-style: normal;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px;
font-family: var(--cshara-font);
border: solid 0px var(--cshara-line-color);
border-bottom-width: 1px;
}


/* （1）〜（7）の小見出し */
.cshara_waku1 h4 {
width: 100%;
margin: 30px 0px 0px 0px;
padding: 0px 26px 0px 80px;
box-sizing: border-box;
position: relative;
display: inline-block;
font-size: 17px;
line-height: 1.6;
color: var(--cshara-txt-color);
font-style: normal;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px;
font-family: var(--cshara-font);
}


/* 本文 */
.cshara_waku1 p {
width: 100%;
margin: 20px 0px 0px 0px;
padding: 0px 26px 0px 80px;
box-sizing: border-box;
position: relative;
display: inline-block;
font-size: 16px;
line-height: 1.8;
color: var(--cshara-txt-color);
font-style: normal;
text-decoration: none;
font-weight: bold;
text-align: justify;
font-family: var(--cshara-font);
}


/* 定義（囲み） */
.cshara_waku1 p.cshara_define {
width: calc(100% - 106px);
margin: 20px 26px 0px 80px;
padding: 20px 26px;
background: var(--cshara-define-bg);
border: solid 0px var(--cshara-accent-color);
border-left-width: 4px;
}


/* ※具体的な例 */
.cshara_waku1 p.cshara_example {
margin: 40px 0px 0px 0px;
font-size: 18px;
}


/* ①〜④ */
.cshara_waku1 p.cshara_num {
margin: 10px 0px 0px 0px;
padding-left: calc(80px + 1em);
text-indent: -1em;
}

.cshara_waku1 h4 + p.cshara_num {
margin-top: 15px;
}


/* 注意（囲み） */
.cshara_waku1 p.cshara_note {
width: calc(100% - 106px);
margin: 40px 26px 0px 80px;
padding: 20px 26px;
background: var(--cshara-note-bg);
border-radius: 4px;
}


/* 「・」の箇条書き（原稿の「・」をそのまま表示し、2行目以降をぶら下げ） */
.cshara_waku1 ul.cshara_list {
width: 100%;
margin: 10px 0px 0px 0px;
padding: 0px 26px 0px 100px;
box-sizing: border-box;
position: relative;
display: inline-block;
list-style: none;
font-family: var(--cshara-font);
}

.cshara_waku1 ul.cshara_list li {
margin: 6px 0px 0px 0px;
padding: 0px 0px 0px 1em;
text-indent: -1em;
box-sizing: border-box;
position: relative;
display: block;
font-size: 16px;
line-height: 1.8;
color: var(--cshara-txt-color);
font-style: normal;
text-decoration: none;
font-weight: bold;
font-family: var(--cshara-font);
}

.cshara_waku1 ul.cshara_list.cshara_list_num {
padding-left: calc(100px + 1em);
}



/* --------------------------------------------- 一段目  */














/*  スマートフォン ※iPhone6 Plus 以下を準拠  */
@media only screen and (max-width:899px) {







/* ------ 一段目  */


.cshara_box1 {
padding: 0px 0px 20px 0px;
}


.cshara_waku1 {
width: 90%;
}


.cshara_waku1 h2.cshara_title {
margin: 30px 0px 0px 0px;
padding: 0px 0px 0px 15px;
font-size: 18px;
line-height: 1.6;
letter-spacing: 0px;
}


.cshara_waku1 h3 {
margin: 30px 0px 0px 0px;
padding: 0px 0px 10px 0px;
font-size: 18px;
line-height: 1.6;
}


.cshara_waku1 h4 {
margin: 20px 0px 0px 0px;
padding: 0px;
font-size: 16px;
letter-spacing: 0px;
}


.cshara_waku1 p {
margin: 20px 0px 0px 0px;
padding: 0px;
font-weight: normal;
}


.cshara_waku1 p.cshara_define {
width: 100%;
margin: 15px 0px 0px 0px;
padding: 15px;
}


.cshara_waku1 p.cshara_example {
margin: 30px 0px 0px 0px;
font-size: 16px;
font-weight: bold;
}


.cshara_waku1 p.cshara_num {
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 1em;
}


.cshara_waku1 p.cshara_note {
width: 100%;
margin: 30px 0px 0px 0px;
padding: 15px;
}


.cshara_waku1 ul.cshara_list {
margin: 5px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}

.cshara_waku1 ul.cshara_list li {
margin: 5px 0px 0px 0px;
font-weight: normal;
}

.cshara_waku1 ul.cshara_list.cshara_list_num {
padding-left: calc(10px + 1em);
}



/* --------------------------------------------- 一段目  */




}
/* -----------------------------------------------------------------------------------------------  スマートフォン ※iPhone6 Plus 以下を準拠   */