a{color:#fff;}
a:hover{color:#fff;}
p{color:#ccc;padding:1%;}
i{margin-right: 0.3em;}

h4{color:#000;}

.refrect{
transform: rotate( -180deg );
-moz-transform: rotate( -180deg);
-webkit-transform: rotate( -180deg);
}

/* デフォは両方隠す */
.modal .position > li { display: none; }

/* モーダルにフラグが付いたら該当だけ表示 */
.modal.is-upright  .position > li[data-pos="upright"]  { display: block; }
.modal.is-reversed .position > li[data-pos="reversed"] { display: block; }

.basic{}
.position{display:flex;}
.position p{color:#000;}
.position li{display:flex-box;width:50%;}
.position li img{border:none;}
.position li img:hover{border:none;}

/* IE */
header,main,footer {
    display: block;
}

/* 1～7枚目の文言だけ差し替え */
.sum ul.img li:before{display:block;text-align:center;}
.sum ul.img li:nth-of-type(1)::before { content: "1 - 過去"; }
.sum ul.img li:nth-of-type(2)::before { content: "2 - 現在"; }
.sum ul.img li:nth-of-type(3)::before { content: "3 - 未来"; }
.sum ul.img li:nth-of-type(4)::before { content: "4 - 対策"; }
.sum ul.img li:nth-of-type(5)::before { content: "5 - 潜在意識"; }
.sum ul.img li:nth-of-type(6)::before { content: "6 - 妨害"; }
.sum ul.img li:nth-of-type(7)::before { content: "7 - 結果"; }


@media screen and (min-width: 641px) {
body{background:url("../image/background.jpg") #000;color:#fff;font-family:Century Gothic,Meiryo;line-height:2em;padding:0;margin:0;}
header{margin:0 10% 0 10%;overflow:hidden;background:#000;padding:2% 2% 0% 2%;margin-top:0;}
main{margin:0 10% 0 10%;overflow:hidden;background:#000;padding:1% 2% 1% 2%;}
footer{margin:0 10% 0 10%;text-align:center;background:#000;padding:0 2% 0 2%;}

.sum ul.img{position:relative;width:680px;height:780px;margin:auto;}
.sum ul.img li{position:absolute;}
.sum ul.img li:nth-of-type(1){top:0;}
.sum ul.img li:nth-of-type(2){bottom:15%;right:0%;}
.sum ul.img li:nth-of-type(3){bottom:15%;left:0%;}
.sum ul.img li:nth-of-type(4){bottom:0;}
.sum ul.img li:nth-of-type(5){top:15%;left:0%;}
.sum ul.img li:nth-of-type(6){top:15%;right:0%;}
.sum ul.img li:nth-of-type(7){top: 50%;transform: translate(-0%,-50%);}
	
h1{border-bottom:1px dotted #fff;padding-bottom:10px;font-weight:normal;margin-top:0;}
h2{text-align:center;font-weight:normal;}
ul{margin:0;padding:0;}
div{margin:0 10px 0 10px;}
li {list-style-type:none;}
li img{box-shadow:0 1px 0px rgba(0,0,0,0.4),0 5px 15px rgba(255,255,255,0.4),0 5px 60px rgba(255,255,255,0.1);}
li img:hover{}
input{height:60px;font-size:18px;font-family:Century Gothic,Meiryo;margin:15px;background:#0099FF;color:#fff;border:0;border-radius:2px;text-shadow:1px 1px 0px #000,0px 1px 0px #000,1px 0px 0px #000;}
input:hover{background:#00CCFF;cursor:pointer;}

.sum{overflow: hidden;width:100%;}
.sum div{text-align:center;}
.sum div:hover{color:#00FFFF;}
.sum ul{display:flex;justify-content:center;}
.sum ul li{display:flex-box;float:left;margin:5px;font-family:Century Gothic,Meiryo UI;text-align:center;width:125px;}
.sum ul li img{display:block;margin:0 auto;height:180px;width:115px;}

.sum p{font-size:13px;background: #660002;display:inline-block;width:400px;padding:10px;margin:10px;box-shadow:inset 0 0 30px #000;color:#fff;}
.header_link{position:fixed;bottom:0;right:20px;background:#0099FF;padding:0 10px 0 10px;border-radius:2px 2px 0 0;text-decoration:none;}
.header_link:hover{background:#00CCFF;cursor:pointer;}

.img{margin-bottom:1.3em;margin:0 auto;max-img:100%;}
.img a{text-decoration:none;}
.img a:hover{color:#7BD5FF;text-shadow:0 0 1px #000,0 0 10px #fff;}
.img img{width:100px;}

.cards_sum{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;margin:0 auto;margin-top:3em;}
.cards_sum li{display:flex-box;width:125px;margin:5px;}
.cards{background:#6d0f70;text-align:center;vertical-align:middle;color:#000;height:100%;height:130px;width:83px;line-height: 130px;font-size:30px;text-shadow:0 1px 0px #fff,0 1px 5px #fff;font-weight:bold;margin:0 auto;}

.discriotion{font-size:13px;background: #660002;width:400px;max-width:100%;padding:10px;margin:10px;box-shadow:inset 0 0 30px #000;color:#fff;}
}

@media screen and (max-width: 640px) {
.modal{background: #fff !important;}
.modal-content {border: none !important;-webkit-box-shadow: 0 !important;box-shadow: none;}
.modal-header .close {
    font-size: 32px;
}

body{background:url("../image/background.jpg") #000;color:#fff;font-family:sans-serif;line-height:2em;padding:0;margin:0;}
h1{font-size:131%;font-weight:bold;}
a{color:#fff;}
a:hover{color:#fff;}
p{color:#ccc;padding:1%;}
header{margin:0;overflow:hidden;background:#000;padding:2% 2% 0% 2%;margin-top:0;}
main{margin:0;overflow:hidden;background:#000;padding:1% 2% 1% 2%;}
footer{margin:0;text-align:center;background:#000;padding:0 2% 0 2%;}
	
h1{padding:0.8rem;line-height:2rem;font-weight:normal;margin-top:0;margin-bottom:0;text-align:center;}
h2{text-align:center;font-weight:normal;}
ul{margin:0;padding:0;}

li {list-style-type:none;border:}
li img{box-shadow:0 5px 15px #fff;display:block;}
input{height:60px;font-size:18px;font-family:Century Gothic,Meiryo;margin:15px;background:#0099FF;color:#fff;border:0;border-radius:2px;text-shadow:1px 1px 0px #000,0px 1px 0px #000,1px 0px 0px #000;}

.img{margin-bottom:1.3em;margin:0 auto;max-img:100%;}
.img a{text-decoration:none;}
.img a:hover{color:#7BD5FF;text-shadow:0 0 1px #000,0 0 10px #fff;}
.img img{width:80px;}

.facedown::before{
  width: 80px;
    height: 121px;
}

.sum ul.img{position:relative;width:92%;height:550px;margin:auto;text-align:center;}
.sum ul.img li{position:absolute;}
.sum ul.img li:nth-of-type(1){top:0;left:50%;transform: translate(-50%,-0%);}
.sum ul.img li:nth-of-type(2){bottom:15%;right:0%;}
.sum ul.img li:nth-of-type(3){bottom:15%;left:0%;}
.sum ul.img li:nth-of-type(4){bottom:0;left:50%;transform: translate(-50%,-0%);}
.sum ul.img li:nth-of-type(5){top:15%;left:0%;}
.sum ul.img li:nth-of-type(6){top:15%;right:0%;}
.sum ul.img li:nth-of-type(7){top: 50%;transform: translate(-50%,-50%);left:50%;}

.header_link{position:fixed;display:block;bottom:0;background:#0099FF;padding:5px 0 5px 0;border-radius:2px 2px 0 0;text-decoration:none;width:100%;text-align:center;}
.header_link:hover{background:#00CCFF;cursor:pointer;}

.position{overflow:hidden;display:block;}
.position li{float: left;width:100%;}
.position li img{border:none;width:70%;display:block;margin:auto;}
.position li img:hover{border:none;}

aside{display:block;margin:4%;}
.discriotion{font-size:13px;background: #660002;max-width:100%;padding:10px;margin:10px;box-shadow:inset 0 0 30px #000;color:#fff;}
}
}