@charset "UTF-8";

/* 基本設定（リセット・ベース） */
/* すべての要素のサイズ計算を正常にする（一番上に書く） */
* {
  box-sizing: border-box;
}

html, body {
  font-family: sans-serif;
  line-height: 1.5;
  margin: 0; /* ブラウザ特有の初期余白を消す */
  padding: 0;
  background-color: #F5EFEB;
  /* 【ここが超重要！】 */
  /* height: 100%; をやめて、最低でも画面ぴったり（コンテンツが増えれば下に伸びる）にする */
  min-height: 100vh;
}

[hidden], menu[type=context], rp, source, tracke {display: none;}
article, aside, figure, figcaption, footer, header,
hgroup, nav, section, summary { display: block; }
colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
tfoot[hidden], tr[hidden], td[hidden], th[hidden], {visibility: collapse;}
ruby { display: ruby; }
rt { display: ruby-text; }

ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a{/*リンクされた文字*/
    color:#FFFFFF;
    text-decoration:none;
}
a:link {/*未訪問のリンク*/
    color:#FFFFFF;
    text-decoration:none;
}

a:visited {/*訪問後のリンク*/
    color:#FFFFFF;
    text-decoration:none;
}

a:hover {/*マウスをのせたとき*/
    color:#FFFFFFF;
    text-decoration:underline;
}
a:active {/*クリック中*/
    text-decoration:underline;
}

.clear { clear:both; }  
.clear hr { display:none; } 


/* 全体の大枠 */
#containar{
  display: flex;
  background-color: #f5deb3;
  width:1070px;
  height:100%;
  margin-right:auto; /* 左右中央 */
  margin-left:auto; /* 左右中央 */
  margin-top:100px; /* 上は100px開ける */
}

/* サイドメニューの中枠 */
#side{
  background-color: #f5deb3;
  width:230px;
  height:570px;
}

#menu{
  width:230px;
  height:320px;
}

.title-logo{
  background-color: #ff8c00;
  color:#ffffff;
  width:230px;
  height:70px;
  padding:10px;
}

/* CSSでボタンをつくる */
.menu-button{
  display: block;
  font-size:12px;
  background-color: #d2b48c; /* ホバー時の背景色 */
  transition: background-color 0.4s ease, color 0.4s ease;
  width:230px;
  height:50px;
  padding:15px 10px 10px 10px;
}

.menu-button:hover {
  background-color: #e74c3c; /* ホバー時の背景色 */
  color: #ffffff;            /* ホバー時の文字色 */
  cursor: pointer;           /* マウスカーソルを指の形にする */
}

/* CSSでボタンOFF状態をつくる */
.menu-button-off{
  display: block;
  font-size:12px;
  background-color: #e74c3c; /* ホバーしていない時の背景色 */
  transition: background-color 0.4s ease, color 0.4s ease;
  width:230px;
  height:50px;
  padding:15px 10px 10px 10px;
}

.menu-button-off:hover {
  background-color: #e74c3c; /* ホバー時の背景色 */
  color: #ffffff;            /* ホバー時の文字色 */
  cursor: pointer;           /* マウスカーソルを指の形にする */
}

/* サイドメニューの中枠真下にSNSスペース */
#sns{
  background-color: #ffffff;
  width:230px;
  height:250px;
  display:block;
}

.sns-icon{
  width:230px;
  height:250px;
  padding:10px;
  display:block;
}

a img {
  transition: opacity 0.3s; /* ふわっと変化させる */
}
a:hover img {
  opacity: 0.7; /* 薄くする（0～1の間で指定） */
}

/* コンテンツの中枠 */
#contents {
  background-color: #f5deb3;
  width: 100%;/* 親の内側いっぱいに広がる*/
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上詰めに配置 */
  box-sizing: border-box;
}

/* 1つ目のボックス（復刻～） */
.subhead_home {
  display: block;
  box-sizing: border-box;
  background-color: #ffffff;
  width: 100%; /* 親の内側いっぱいに広がる（幅：800px） */
  height: 50px;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 22px;
}

/* 2つ目のボックス（自殺予防の基礎知識～） */
.text_home {
  display: block;
  box-sizing: border-box;
  background-color: #ffffff;
  width: 100%; /* 親の内側いっぱいに広がる（幅：800px） */
  height: 100%;
  padding: 10px;
  margin-top: 20px;
  text-align: justify;
}

#text_box{
  background-color: #ffffff;
  width: 100%;
  height:100%;
  padding:10px;
  margin-top:20px;
  margin-right:20px;
  text-align:justify;
}

#text_box a{
  color: revert;
}

#text_box2{
  background-color: #ffffff;
  width: 100%;
  height:100%;
  padding:10px;
  margin-top:20px;
  margin-right:20px;
  text-align:justify;
}

/* 子要素が縦に伸びるのを防ぐ */
.child {
  align-self: flex-start; /* 自分のコンテンツの高さに合わせる */
}

/* 全体の大枠の下にフッター枠を設置 */
#footer{
  background-color: #ff8c00;
  color:#ffffff;
  text-align:center;
  width:1070px;
  height:50px;
  padding:10px;
  margin-right:auto; /* 左右中央 */
  margin-left:auto; /* 左右中央 */
}

/* アコーディオンメニューを設置 */
.accordion-004 {
    max-width: 100%;
    margin-bottom: 7px;
    border: 2px solid #d0d0d0;
    border-radius: 5px;
}

.accordion-004 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.accordion-004 summary::-webkit-details-marker {
    display: none;
}

.accordion-004 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .3s;
}

.accordion-004[open] summary::after {
    transform: rotate(225deg);
}

.accordion-004 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-004[open] p {
    transform: none;
    opacity: 1;
}