@charset "utf-8";

body {

 background-color: #EFEFEF; 
}

/*表紙*/

h1 {
  position: relative;
  display: inline-block;

  padding: 0 55px;
  margin: 40px auto;

  color: #000;
  font-size: 28px;
  font-weight: normal;
  text-align: center;
}


h1::before,
h1::after {
  content: '';
  position: absolute;
  top: 50%;

  width: 45px;
  height: 2px;

  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

h1::before {
  left: 0;
}

h1::after {
  right: 0;
}


.h1-link {
  text-decoration: none; /* 下線を消す */
  color: inherit;        /* h1の色を使う */
  display: inline-block;
}

/* hoverしたい場合（任意） */
.h1-link:hover {
  opacity: 0.75;
}



/*ふせん*/

/*一橋綾人*/

.fsn{
 padding: 0.5em 1em;
 margin: 1em 0;
 background: #fff;
 border-left: solid 6px #9FCEC9;
 box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
 } 
.fsn p {
 margin: 0;
 padding: 0;
 }

/*その他*/

.fsn2{
 padding: 0.5em 1em;
 margin: 1em 0;
 background: #fff;
 border-left: solid 6px #f4a460;
 box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
 } 
.fsn2 p {
 margin: 0;
 padding: 0;
 }

/*ルーズリーフ*/

.note{
 background: #fff;
 border-left: 5px dotted rgba(0,0,0,.1); box-shadow: 0 0 0 5 #f8f0d7;
 padding: 1em; margin: 1em 5px;
 } 
.note p{
 margin: 0;
 padding: 0;
 }

/*ホッチキスメモ*/

.box {
 position: relative;
 margin: 2em auto;
 padding: 20px 20px 20px 35px;
 width: 80%;
 /* ボックス幅 */
 background-color: #fff;
 /* ボックス背景色 */
 border: 1px solid #9FCEC9;
 /* 枠線 */
 box-shadow: 2px 2px 2px #ccc;
 /* 影の色 */
 } 

.box::before {
 position: absolute;
 content: '';
 top: 5px;
 left: 20px;
 height: 30px;
 border: 1.5px solid #9FCEC9;
 
/* ホチキス色 */
 border-radius: 12px;
 box-shadow: 1px 1px 1px #333;
 transform: rotate(45deg); 
}


/*マーカー*/

/*一橋綾人*/
aym {
 	background-color: #9FCEC9; 
  color: #ffffff;
 }

/*五木左京*/
skm {
 background-color: #F3A4A9; 
 color: #ffffff; 
 }

/*赤*/
rdm {
 background-color: #DE5065; 
 color: #ffffff; 
 }

/*青*/
blm {
 background-color: #D3EDFB; 	
 color: #ffffff; 
 }

/*オレンジ*/
orm {
 	background-color: #FEECD2; 	
  color: #000000; 
 }


/*折り畳み*/

.accordion {
 max-width: 500px;
 margin-bottom: 7px;
 background-color: #fff;
 border-radius: 25px;
 } 

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

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

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

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

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

/**ようこそ、貴方は98人目のお客様**/
         >>>キリ番は踏み逃げ不可<<<

……なぜ見てるんです？