@charset "UTF-8";
/*既設擁壁の診断*/

#maincontents article{ padding: 0 0 1.5em;}
p.text-center{ text-align: center; margin: -1em 0 0;}
#maincontents ul.list1  li {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0 0 0 1em;             /* デフォルト指定上書き */
    padding: 0 0 0 10px;             /* デフォルト指定上書き */
    position: relative;
}

#maincontents  ul.list1  li:before {
    content:  "";     /* 空の要素作成 */
    width:  5px;               /* 幅指定 */
    height:  5px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #000;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position: absolute; left:0; 
    top:8px;
    
}
#maincontents article  ul{ margin: 1em auto;}
#maincontents  ul.photo { display: flex;  margin: 2em auto 0; width:100%; font-size: var(--fz10); }
#maincontents  ul.photo li img { width:100%; height: auto; display: block; margin: 0 0 0.5em;}
#maincontents  ul.chui li:before {
    content: "\203B"; /* ※ */
    position: absolute; left:0; 
    top:0;
}
#maincontents  ul.photo li{ text-align: left;}
#maincontents  ul.photo li span{ display: block; text-align: left;font-size: var(--fz6); }
#maincontents  ul.chui  li {
    margin:  0 0 0 1em;             /* デフォルト指定上書き */
    padding: 0 0 0 1em;              /* デフォルト指定上書き */
    position: relative;
    
}
#maincontents dl{   margin: 1em auto; width:95%;}
#maincontents dl.step dt{  font-weight: 500; font-size: var(--fz12); display:  inline-block;  border-bottom: 1px solid ;}
#maincontents dl.step dd{  display: block; margin: 1em 0 2em;word-break: break-all; /* 単語の途中で改行を許可 */}

#maincontents ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0.5em 0;
}
 
#maincontents ol li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}
#maincontents ol li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #476898;
  color: #fff;
  display: block;
   position: absolute; 
  line-height: 22px;
 left: 0px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}



#maincontents div{ padding: 2em}
#maincontents div.orange {
  background-color: #fffaf0; /* 薄いベージュ・オレンジ系 */
  border: 1px solid #feebc8;
  border-radius: 8px;
  padding: 30px;
  margin-top: 20px;
}
#maincontents div h3{ margin:0 0 1em; font-size: var(--fz14);}
#maincontents div h3.gaiyo{ margin:3em 0 1em; }

#maincontents div.orange ul.photo {font-size: var(--fz8);}
#maincontents div h4 {
    /* フレックスボックスに変更し、縦位置を中央に揃える */
    display: flex;
    align-items: center;
    font-size: var(--fz10); 
    margin: 2em 0 1em !important;  
}


#maincontents div h5{ margin: 1em 0; font-size: var(--fz12);
  margin-top: 30px;
  margin-bottom: 15px;
  border: 1px solid #2d3748; border-radius: 20px;
  padding: 5px 20px ;  background: #fff;
}
#maincontents div h6{ font-weight: 600;
}
#maincontents div dl{  display: flex; flex-wrap: wrap; margin: 0 ; }
#maincontents div dl dt{ font-weight: 600;  width:14em; padding-left: 0.5em;position: relative;}
#maincontents div dl dt:before {
    content:  "";     /* 空の要素作成 */
    width:  5px;               /* 幅指定 */
    height:  5px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #000;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position: absolute; left:0; 
    top:8px;
    
}
#maincontents div dl dt span{ font-size: var(--fz8);}
#maincontents div dl dd{   width: calc( 100% - 16em ); margin-bottom: 1em;}
#maincontents  ul.list2  li {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0 0 0 1em;             /* デフォルト指定上書き */
    padding: 0 0 0 10px;             /* デフォルト指定上書き */
    position: relative;
}

#maincontents dl.maru{ margin-left: 1em; display: block;}
#maincontents dl.maru dt{ width:100%; font-weight: 500; font-size: var(--fz10); margin: 0; padding: 0;}
#maincontents dl.maru dd{  width:100%; display: block; margin: 0 0 2em; padding: 0;}

#maincontents dl.maru dt:before {
    content:  "◆";     /* 空の要素作成 */
    width:  auto;               /* 幅指定 */
    height: auto;           /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    position: static; background: none; margin-right: 0.5em;
    color: #476898;
}
#maincontents dl.maru dd ul.list1{ margin: 0;}

#maincontents  ul.list2  li:before {
    content:  "";     /* 空の要素作成 */
    width:  5px;               /* 幅指定 */
    height:  5px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #000;  /* 背景色指定 */
    position: absolute; left:0; 
    top:8px;
    
}
#maincontents  ul.line  li {
    list-style:  none;      /* デフォルトのアイコンを消す */
    margin:  0.2em 0 0.2em 1em;             /* デフォルト指定上書き */
    padding: 0 0 0 20px;             /* デフォルト指定上書き */
    position: relative;
}

#maincontents  ul.line li:before {
     content: '';
    position: absolute;
    top: 0.7em;
    display: inline-block;
    width: 15px;
    height: 1px; left: 0;
    background-color: #666;
    
}
#maincontents  ul.list2 ul.line  li {margin:  0.2em 0 0.2em 0; }


/* ブルーセクション：勉強会 */
.blue.study {
  background-color: #ebf8ff; /* 薄いブルー */
  border: 1px solid #dee3ed;
  border-radius: 8px;
  padding: 30px;
  margin-top: 20px;
}

/* 小見出し */
.blue h4 {
  margin-top: 30px;
  margin-bottom: 15px;
  border-top: 1px solid #1a365d;  border-bottom: 1px solid #1a365d;
  padding: 5px 0;font-size: var(--fz12);
}



/* 診断ステップ (dl/dt/dd) */
.step dt {
  font-weight: bold;
  background-color: #1a365d;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 4px;
  margin-top: 25px;
  display: inline-block;
}
.step dd {
  margin-left: 0;
  padding: 15px 10px 5px 10px;
}



/*講座 */

#maincontents dl.koza dt {
  font-weight: bold;
  background-color: #1a365d;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 4px;
  display: inline-block;width:100%;  max-width: 100%
}
#maincontents dl.koza dd {
  margin-left: 0;
  padding:0 10px 5px 10px;width:100%;  max-width: 100%
}
#maincontents dl.koza dd p{ margin: 1em;}


.chui{
  list-style: none;
  margin: 2em 0;
  border-left: 6px solid var(--accent-color);
  border-radius: 12px;
}

.chui li{
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.8em;
  color: #9c4221;
  font-weight: 600;
}

.chui li:last-child{
  margin-bottom: 0;
}

.chui li::before{
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-color);
  font-size: 1.1em;
}


table{
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  background: #fff;
  overflow: hidden;
  border-radius: 10px;
}

/* テーブル見出し */
table th{
  background: #edf2f7;
  text-align: left;
  padding: 14px 16px;

  font-weight: 700;  white-space: nowrap;
  border-bottom: 2px solid #d6dee8;
}

/* テーブル内容 */
table td{
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}
table td span{ position: relative;  font-size: var(--fz8); display: block; padding:0 0 0 1em;}
table td span:before{ content:"※"; position: absolute; left:0; }


/* 最後の線を消す */
table tr:last-child td{
  border-bottom: none;
}

/* 行ホバー */
table tr:hover{
  background: #fafcff;
}
div.setumei{ margin: 1em; padding: 1em !important; background: #fff;}


/* styles.css */
.chat-bubble {
    display: grid;
    gap: 1em 0;
    padding: 25px 15px;
}

.chat-bubble li {
    display: inline-block;
    position: relative;
    max-width: 80%;
    margin: 0;
    padding: .4em .8em;
    border-radius: 20px;
    color: #333;
  font-size: var(--fz10);

    background-color: #fff;
}

.chat-bubble li:nth-child(2n) {
    background-color: #1a365d;color: #fff;
}

.chat-bubble li::before {
    position: absolute;
    top: -15px;
    width: 20px;
    height: 30px;
    content: '';
}

.chat-bubble li:nth-child(2n-1)::before {
    left: -10px;
    border-radius: 0 0 0 15px;
    box-shadow: -3px -15px 0 -7px white inset;
}

.chat-bubble li:nth-child(2n)::before {
    right: -10px;
    border-radius: 0 0 15px 0;
    box-shadow: 3px -15px 0 -7px #1a365d inset;
}



@media (max-width: 780px) {
#maincontents div.blue p.check{ position: absolute; top:-80px; right: -40px;}}

@media (max-width: 600px) {
#maincontents div dl{  display:block; }
#maincontents div dl dt{ width:auto;}
#maincontents div dl dd{ width: calc( 100% - 2em ); }
#maincontents div.blue dl dd{   width: calc( 100% - 2em ); margin-bottom: 1em;}
#maincontents div h4 {
    padding: 0 0 0 2.5em;  margin: 1em auto;  width:calc( 100% - 2.5em ); 
}
#maincontents div h4:before{
    content: '';
    position: absolute;
    top: 0.7em;
    display: inline-block;
    width: 20px;
}
#maincontents div h4:before {
    left: 1em;
}
#maincontents div h4:after { display: none;}
#maincontents div.blue p.check span img{ display: block;  width:150px; height: auto;}
#maincontents div.blue p.check span b{ font-size: 12px;}
#maincontents div h3 span{ display: block;}
    #maincontents .width.shosai table{ font-size: 80%;}
}
@media (max-width: 500px) {
#maincontents  ul.photo { flex-wrap: wrap;justify-content: center;gap: 10px;}
    #maincontents  ul.photo li{ width:45%;}
    
}