body {
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック','YuGothic','Yu Gothic','メイリオ', 'Meiryo','ＭＳ Ｐゴシック','MS PGothic';
color: #0c0c0c;
text-align: center;
margin: 0px;
position: relative;
}

body:before{
  content:"";
  display:block;
  top:0;
  left:0;
  z-index:-1;
  background: url("../img/haikeiil02.png") center no-repeat;
  position:fixed;
  width:100%;
 height:100%;
  background-size: cover;
}

body.haikei1:before{
  content:"";
  display:block;
  top:0;
  left:0;
  z-index:-1;
  background: url("../img/haikeiil01.png") center no-repeat;
  position:fixed;
  width:100%;
 height:100%;
  background-size: cover;
}

body.haikei2:before{
  content:"";
  display:block;
  top:0;
  left:0;
  z-index:-1;
  background: url("../img/haikeiil02.png") center no-repeat;
  position:fixed;
  width:100%;
 height:100%;
  background-size: cover;
}

body.haikei3:before{
  content:"";
  display:block;
  top:0;
  left:0;
  z-index:-1;
  background: url("../img/haikeiil02.png") center no-repeat;
  position:fixed;
  width:100%;
 height:100%;
  background-size: cover;
}

body.haikei4:before{
  content:"";
  display:block;
  top:0;
  left:0;
  z-index:-1;
  background: url("../img/haikeiil02.png") center no-repeat;
  position:fixed;
  width:100%;
 height:100%;
  background-size: cover;
}

header{
  margin: 0;
  padding-bottom: 100px;
  width: 100%;
  background: linear-gradient(#222222 80%, transparent);
  color: #ccc;
}

header:after{
  background-color: #fff;
  background-image:
    radial-gradient(#7bded9 30%, transparent 30%);
  background-size: 20px 20px;
}

#title{
  font-size: 50px;
  padding-top: 60px;
  margin: 0px;
}

header p{
  margin :0;
}

.kuu{
  height: 600px;
}

article.siro{
  margin: 0px auto 100px;
  background-color: rgba(255,255,255,0.9);
  max-width: 750px;
  padding: 20px;
  border-radius: 10px;
}

a:hover{
/* background-color: #FFFFFF; */
opacity: 0.7;
}

.plo{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 60px;
  padding-bottom: 60px;
}

.plo img{
  max-width: 200px;
  border-radius: 50% 50% 50% 50%;
}

.retu1{
  display:flex;
}

/* .retu1 ul{
  list-style:  none;
  display:flex;
  margin-top: 36px;
} */

.plo2{
max-width: 60%;
padding-left: 20px;
}

.plo2 img{
  max-width: 60px;
  border-radius: 0;
}

.asukapanname{
  font-size: 36px;
  text-align: justify;
  margin-bottom: 0px;
}

.plosyokai{
text-align: left;
  }

  .waku2{
    margin-top: 80px;
    font-size: 24px;
  }

.komagoma{
  margin: 0px auto 0px;
  padding: 0px;
    max-width: 80%;
    list-style:  none;
    display:flex;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
  }

.komagoma li{
width: 120px;
  }

.komagoma li:not(:last-child), .komagoma2 li:not(:last-child){
  padding-right: 50px;
}

.syoukaibun{
  font-size: 200%;
  font-family: cursive;
}

.link img{
  max-width: 80%;
  margin-bottom: 10px;
}

#line img{
  max-width: 80%;
}

.toiawase{
  margin-bottom: 60px;
}

.toiawase img{
  max-width: 80%;
  border-radius: 10px;
}

.otoiawasememo{
  margin: auto;
  max-width: 80%;
  background-color: #fff;
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: 10px;
}

/*
CSSボタン　https://excellent.ne.jp/homepage/6562/
*/
a.btn_04 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	max-width: 600px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #393f4c;
	background: #393f4c;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}
a.btn_04:hover {
	color: #393f4c;
	background: #fff;
}

footer{
  background-color: #000000;
  color: #ccc;
  margin: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  display:flex;
  justify-content: center;
}

footer p{
  margin: 0px;
  padding-right: 60px;
}

/*********
アフィリエイトCSSはじまり
テンプレート拝借元
https://www.iscle.com/web-it/kaereba-css.html
*********/
.af-box{
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border: 1px solid #d1d1d1;
    padding: 10px;
    margin: 0 8px;
}
.af-imgbox{
    width: 160px;
    margin-right: 10px;
    float: left;
    text-align: center;
}
.af-textbox{
    width: 100%;
}
.af-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.af-desc{
    font-size:14px;
    margin-bottom: 10px;
}
.af-kobox{
    width: 120px;
    margin: 0 5px 0 0;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    float: left;
    text-align: center;
}
.af-kobox a.aflink{
    display: block;
    padding: 5px 0 5px 0;
    text-decoration: none;
}
.af-amazon{
    border: 1px solid #F3A847;
}
.af-amazon a{
    color: #F3A847;
}

.af-Vket{
    border: 1px solid rgb(12 152 218);
}
.af-Vket a{
    color: rgb(12 152 218);
}

.af-DLsite{
    border: 1px solid rgb(5 42 131);
}
.af-DLsite a{
    color: rgb(5 42 131);
}

.af-rakuten{
    border: 1px solid #BF0000;
    color: #BF0000;
}
.af-rakuten a{
    color: #BF0000;
}
.af-blue{
    border: 1px solid #1995DF;
    color: #1995DF;
}
.af-blue a{
    color: #1995DF;
}
.clear{clear:both;}

/* ボタン 参考元https://excellent.ne.jp/homepage/6562/ */

a.btn_01 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 60%;
  height: 200px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	color: #27acd9;
	transition: 0.5s;
  background-image: url("../img/blogOPG.png");
  background-size:  cover;
}
a.btn_01:hover {
	color: #fff;
	background: opacity(0.7);
}
@media screen and (max-width: 399px) {

    .af-imgbox{
        margin: 0 auto;
        text-align: center;
        float: none;
    }

}

/* アフィリエイトCSSおわり */

@media screen and (max-width:700px) {

  article.siro{
    width: 100%;
    padding: 0px;
  }

  /* inframe{
    width: 100%;
  } */

  .retu1{
    display: block;
  }

  .retu1 ul{
    padding: 0px;
    margin: 36px auto 0px;
  }

  #foriio{
    width: 345px;
    height: 300px;
  }

/* ビューポートサイズが499pxまでこのcssのスタイルが適用 */}


@media screen and (min-width: 768px) {
.topics dt {
clear: left;
float: left;
width: 10%;
}
.topics dd {
margin-left: 11%;
}
}