/*　　1000px以上用　　*/
@media screen and (min-width:1000px) {

/*基本設定*/

html {
 font-size: 62.5%;}
body {
 font-size: 1.3rem;
 font-family: 'Cormorant SC', serif;
 color: #ffffff;
 background: url('画像URL') top / 100% no-repeat fixed #4d7961;
 line-height: 1.8em;
 letter-spacing: 0.2em;}
a {
 text-decoration: none;
 color: #a8d2bf;}
a:hover {
 text-decoration: none;
 color: #70beb4;}
h1 {
 display: block;
 font-size: 3.0rem;
 font-family: 'Cormorant SC', serif;
 text-align: center;
 margin-bottom: 1.0em;}
h2 {
 font-size: 1.5em;
 font-family: 'Cormorant SC', serif;
 margin-bottom: 0.5em;}
h3 {
 font-size: 1.3em;
 font-family: 'Cormorant SC', serif;
 margin: 0em 0em 0.5em 0.5em;}
em {
 font-style: normal;
 color: #70beb4;}
input,textarea,button,select {
 color: #eeeeee;
 background-color: rgba(0,0,0,0.5);
 border: solid 1px #ffffff;
 font-family: inherit;
 font-size: 100%;
 padding: 1%;}

/*段落設定*/

section {
 padding: 0rem 3rem;
 margin-bottom: 2.0rem;}
section a {
 text-decoration: none;
 color: #ffffff;}
a:hover {
 text-decoration: none;
 color: #a8d2bf;}
p {
 margin: 0em 1em 0.3em 1em;
     font-size: 1.2em;
    }

/*ヘッダー（サイドバー）設定*/

header {
 font-family: 'Cormorant SC', cursive;
 width: 20%;}
header ul {
 list-style: none;
 padding: 1em 0em;}
header li {
 text-align: center;}
header li a {
 display: inline-block;
 transition: 0.5s;
 margin: 0.5em 0em;
 font-size: 3.0rem;
 color: #ffffff;
 background-color: transparent;}
header li a:hover {
 color: #a8d2bf;}

/*フレックスボックス、半透明背景設定*/

.wrap {
 padding: 5% 10%;
 display: flex;}
.bg {
 margin: 0% 3%;
 padding: 5rem 2rem;
 box-sizing: border-box;
 background-color: rgba(0,0,0,0.7);
 font-family: 'Cormorant SC', serif;}
.contents-box {
 width: 68%;}

}

@media screen and (max-width:999px) {
/*　　999px以下用　　*/

/*基本設定*/

html {
 font-size: 16px;}
body {
 font-size: 2.0em;
 font-family: 'Cormorant SC', serif;
 color: #ffffff;
 background: url('画像URL') top / cover no-repeat fixed #4d7961;
 line-height: 1.8em;
 letter-spacing: 0.2em;}
a {
 text-decoration: none;
 color: #a8d2bf;}
a:hover {
 text-decoration: none;
 color: #70beb4;}
h1 {
 display: block;
 font-size: 3.0rem;
 font-family: 'Cormorant SC', serif;
 text-align: center;
 margin-bottom: 1.0em;}
h2 {
 font-size: 1.2em;
 font-family: 'Cormorant SC', serif;
 margin-bottom: 0.5em;}
h3 {
 font-size: 1.1em;
 font-family: 'Cormorant SC', serif;
 margin: 0em 0em 0.5em 0.5em;}
em {
 font-style: normal;
 color: #70beb4;}
input,textarea,button,select {
 color: #eeeeee;
 background-color: rgba(0,0,0,0.5);
 border: solid 1px #ffffff;
 font-family: inherit;
 font-size: 100%;
 padding: 1%;}
.honbun {
 font-size: 2.5em;
 font-family: 'Cormorant SC', serif;
 margin: 0em 0em 0.8em 0.8em;}
    
/*段落設定*/

section {
 padding: 0rem 1rem;
 margin-bottom: 1.0rem;}
section a {
 text-decoration: none;
 color: #ffffff;}
a:active {
 text-decoration: none;
 color: #a8d2bf;}
p {
 margin: 0em 0em 0.3em 0em;
     font-size: 1.0em;}
.honbun > p {
     font-size: 1.5em;
}

/*ヘッダー設定*/

header {
 font-family: 'Cormorant SC', cursive;}
header ul {
 display: flex;
 justify-content: center;
 list-style: none;
 padding: 0em 0em;}
header li {
 text-align: center;}
header li a {
 display: inline-block;
 transition: 0.5s;
 margin: 0em 0.5em;
 font-size: 2.0em;
 color: #ffffff;
 background-color: transparent;}
header li a:hover {
 color: #a8d2bf;}

/*全体の余白、半透明背景設定*/

.wrap {
 padding: 1%;}
.bg {
 margin: 0% 3% 1% 3%;
 padding: 1rem 1rem;
 box-sizing: border-box;
 background-color: rgba(0,0,0,0.7);
     font-family: 'Cormorant SC', serif;}
}