@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Alegreya+Sans+SC:300');
*{margin:0; padding:0; border:none;}

@font-face
{
font-family: しねきゃぷしょん;
src: url('https://cdn.leafscape.be/cinecaption/cinecaption227.woff2')
     format("woff2");
}

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Alegreya+Sans+SC:300');
*{margin:0; padding:0; border:none;}

@font-face
{
font-family: しねきゃぷしょん;
src: url('https://cdn.leafscape.be/cinecaption/cinecaption227.woff2')
     format("woff2");
}

body,input{
               font-family:'しねきゃぷしょん','Noto Sans JP',Meiryo,メイリオ,Osaka,"MS ゴシック",sans-serif;
               color:#444;
               font-size: 13.5px;
               letter-spacing: 0.08em;
               text-align: justify;
}

body{
         background-color:#fff;;
         margin-bottom: 20px;
}

body:before {
    top: 0;
}

body:before, body:after {
    content: '';
    left: 0;
    width: 100vw;
    height: 10px;
    display: block;
    background: url("banner.jpg") repeat-x;
    position: fixed;
}

body:after {
    bottom: 0;
}

label {
          font-size: 14px;
}

label:hover,.button a:hover,.ttll a:hover{
          color:#c7c48c;
          cursor:pointer;
          font-size: 14px;
}

.box1{
          margin:10px auto;
          line-height:2;
          font-size:11px; }
.box1 a{color:#444;}
.box1 input{display:none;}
.panel{
          transition:0.2s ease;
          height:0;
          overflow:hidden;
          text-align:left;
          color:#888;
          max-width:80%;
          margin:0 auto;
          text-align: justify;
}
.panel a{color:#A0ACBD;}
.box1 input:checked+.panel{
              height:auto;
              padding:15px 0 0;
}
input{color:#888; font-size:13px; background:none; padding:-5px 5px; border:1px dotted #eee; box-sizing:border-box;}
input[type=submit]{width:60px; color:#A5B5CB; border:1px solid #A5B5CB;}
.name br,#foot br{display:none;}
.name{width:240px; margin:40px auto;}
.name:after{content:""; clear:both; height:0; display:block; visibility:hidden;}
.name div{float:left;}
.name input[type=text]{width:80px; margin-right:10px;}
.name input[type=submit]{width:60px;}

strong {
    font-weight: bold;
    color: red;
}

#wrap {
    margin: 0px auto;
    max-width: 580px;
    background: #fff;
}

#wrap2 {
    line-height: 1.8;
    padding:70px 25px 10px 25px;
    box-sizing: border-box;
    max-width: 580px;
    background: #fff;
   margin:auto;
   font-family:'Noto Sans JP',Meiryo,メイリオ,Osaka,"MS ゴシック",sans-serif;
}
#pageHead {
    width: 90%;
    padding:0px;
    margin: 0 auto;
    margin-bottom: 0;
    text-align: center;
    line-height: 2.4;
}

h1,h2,.box,.ttll,#title,#nav,input,.pass{text-align:center;}

h1,h2,.button,#nav,#foot,input{letter-spacing:1.8px;}

h1,h2{font-weight:normal;}

h1, #title {
    font-size: 20px;
    padding-top: 40px;
    color: #000;
    background: url(http://) center 40px no-repeat;
    font-family:'しねきゃぷしょん','Noto Sans JP',Meiryo,メイリオ,Osaka,"MS ゴシック",sans-serif;
}

#title {
    padding: 60px 0 30px 0;
    letter-spacing: 3px;
    font-family: 'Noto Sans JP';
    font-size: 16px;
   color: #444;
}

#pachi{
   display: flex;
    justify-content: center;
}

#chaptertitle {
    letter-spacing: 3px;
    font-family: 'Noto Sans JP';
    font-size: 16px;
}

a{text-decoration:none; color:#A5B5CB;}



.box{    
    margin: 10px auto 50px;
    line-height: 2;
}
.box a{color:#444;}

.box input{display:none;}

form {
    display: block;
}
/* ------ フォーム系 ------ */
input[type=text],textarea,input[type=submit]{
    /* デフォルト設定をリセット */
    -webkit-appearance: none;
    /* 角丸設定など */
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    vertical-align:middle; 
    position:relative; 
    top:-1px; 
}
/* 色味指定（フォーム）*/
input[type=text],textarea{
    /* 背景色（全て指定） */
    background-color: rgba(165,181,203,.15);
    /* 文字色 */
    color: #808080;
    /* 枠 */
    border: 0px;
}
/* 色味指定（ボタン）*/
input[type=submit]{
    /* 背景色 */
    
    background-color: rgba(165,181,203,.15);
    /* 文字色 */
    color: #808080;
    border:0px;
}
/* テキストエリア */
textarea{
    width: 80%; /* 長さ */
    margin: 4px 0px; /* 余白 */
}
/* 入力フォーム */
input[type=text]{
    font-size: 80%;
    width: 60px; /* 長さ */
    height: 25px;  /* 高さ */
    padding: 7px;
    text-align: center;
    margin: 6px;
    vertical-align:middle; 
    position:relative; 
    top:-1px; 
}
/* ボタン */
input[type=submit]{ 
   width: 50px;
    padding: 7px;
    font-size: 80%;
    margin: 5px;
}

.pass{color:#888; margin:20px;}

.pass input{width:200px;}

.pass input[type=submit]{margin:10px 0 0;}

h2{
    font-size: 13px;
    margin: 25px auto 1px;
   font-family: 'Aref Ruqaa', serif;
}

.chapter {
    display: flex;
    flex-wrap: wrap;
    max-width: 310px;
    margin: 0 auto;
}

.ttll {
    ont-size: 13.5px;
    /* padding-bottom: 10px; */
    /* width: 31.4%; */
    height: 24px;
    line-height: 24px;
    /* padding-top: 1px; */
    margin: 4px;
    letter-spacing: 1.5px;
    /* box-sizing: border-box; */
    /* background-color: #faf0f5; */
    /* border-radius: 2px; */
    border-bottom: solid 3px #FFEFF4;
}

#nav{
margin: 40px;
background:url(#backの上のアイコンURL#) center top no-repeat;

}

#nav a{color:#c7c48c;}

#foot{padding:6px 0;}

.image{

   width: 25px;
    height: auto;
    vertical-align: -15%;
    border-radius: 50%;
   margin-bottom: -28px;
}



aside {
 font-family: 'Noto Sans JP', sans-serif;
    position: relative;
    padding: 0.5em 3em;
    color: #606060;
   margin:20px 25px 25px 25px;
}

aside::before,
aside::after,
aside div::before,
aside div::after {
    position: absolute;
    display: block;
    content: '';
    width: 1px;
    height: 52%;
    background-color: #c0c0c0;
}

aside::before,
aside div::before {
    top: 0;
}

aside::before {
    left: 0;
    transform: rotate(25deg);
}

aside div::before {
    right: 0;
    transform: rotate(-25deg);
}

aside::after,
aside div::after {
    bottom: 0;
}

aside::after {
    left: 0;
    transform: rotate(-25deg);
}

aside div::after {
    right: 0;
    transform: rotate(25deg);
}

aside p {
    font-size: 12px;
   letter-spacing: 1.5px;
}

aside span {
    border-bottom: thin dashed #cce6ff;
}



.cp_ipselect {
	overflow: hidden;
	width: 40%;
	text-align: center;
}
.cp_ipselect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl02 {
	position: relative;
	border: 1px solid #bbbbbb;
	border-radius: 2px;
	background: #ffffff;
       height: 27px;
}
.cp_ipselect.cp_sl02::before {
	position: absolute;
	top: 0.8em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.cp_ipselect.cp_sl02:after {
	position: absolute;
	top: 0;
	right: 2.5em;
	bottom: 0;
	width: 1px;
	content: '';
	border-left: 1px solid #bbbbbb;
}
.cp_ipselect.cp_sl02 select {
	padding: 4px 4px;
    color: #666666;
    font-size: 12px;
   font-family: 'Noto Sans JP','Cabin', 'Helvetica-Light', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}

</style>