@charset "UTF-8";

*,::after,::before { box-sizing:border-box;}

body {	margin:0;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	color:#333333;
	text-align:left;
	background-color:#000;
}

ul,ol{list-style:none;}

img { width: 100%}

#example {
  position: relative;
}
.one, .two {
  position: absolute;
}
.one {
  z-index: 20;

}
.two {
  z-index: 10;

}

/*-----------ここからヘッダー表示用CSS----------*/

p {	margin-top:6px;
	margin-bottom:2px;}

header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  padding-left: 10px;
 10px 10px 10px;
  background:rgba(0,0,0,.6);
  box-sizing: border-box;
  color:#ffffff;
  font-size:0.8em;
}

header p red{
  background:#C83F67;
  color:#ffffff;
  border-radius:4px;
  padding: 0px 4px;
  margin-right:6px;
}

header p.icon1::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  border-radius:50%;
 vertical-align:middle;
  margin-left:4px;
  object-fit: cover;
}

header p.icon2::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  border-radius:50%;
 vertical-align:middle;
  margin-left:4px;
  object-fit: cover;
}

header p.icon3::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  border-radius:50%;
 vertical-align:middle;
  margin-left:4px;
  object-fit: cover;
}

header p.icon4::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  border-radius:50%;
 vertical-align:middle;
  margin-left:4px;
  object-fit: cover;
}

/*-----------ここまでヘッダー表示用CSS----------*/

/*ここからフッター用CSS*/
footer{background:#84D0D5;}

/* list_simple */
ul.list_simple{border-top:1px solid #ebe5e5;}
ul.list_simple li a{font-size:1.0em; display:block;max-width: 900px;margin:0px 0px 0px -40px;padding:0.8em;color:#FFF;border-bottom:1px solid #ebe5e5;position: relative; text-decoration:none;}
/* copyright */
.copyright{color:#FFF;font-size:0.7em;padding:10px 10px 20px 10px;text-align: center;}
/*ここまでフッター用CSS*/

.voice {
    width: 100%;
    margin: 0px auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;}

.fukidashi_icon {
    width: 36%;
    margin: -6px 0px 0px 26px;
    padding-left:0px;
}

.fukidashi_icon img {
    border-radius:50%;
}

.fukidashi_text {
    width: 50%;
    margin: 0 3.52% 0 1%;
    padding-left:10px;
}

.btn {
    width: 86%;
    margin: 3.5% auto 0;}

.btn a { display: block;}

/*-----------鼓動アニメーション----------*/
.dokidoki { animation: dokidoki 1.5s infinite;}

@keyframes dokidoki {
    0% {transform: scale(1.05);}
    5% {transform: scale(1);}
    50%{-webkit-transform: scale(1.05);}
    55%{transform: scale(1);}
    90%{-webkit-transform: scale(1.05);}
    95%{transform: scale(1);}
    100%{-webkit-transform: scale(1.05);}
}

/*-----------動画----------*/
.videobox{
  width: 100%;
  position: relative;
margin:0px 10px 10px 10px;
}
.videobox p{
    font-size: 0.7em;
  color:#ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
}
.videobox p2{
    font-size: 0.7em;
  color:#ffffff;
  position: absolute;
  bottom: 10px;
  left: 10px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
}
.videobox p2 online{
    font-size: 1.2em;
  color:#00ff00;
}

.videobox p3{
}

.videobox p3 img{
  position: absolute;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
  top: 10px;
  left: 10px;
	width:12%;
	border-radius:4px;
}

.videobox p4{
    font-size: 0.8em;
  color:#ffffff;
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
}

video {
  width: 170px;
    height: 170px;
    background: #000000;
	border-radius:10px;
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

.triangle {
  width: 0;
  height: 0;
  margin:0px auto;
  border-style: solid;
  border-right: 80px solid transparent;
  border-left: 80px solid transparent;
  border-bottom: 0;
  opacity: 0.7;
}


/*-----------画面右下表示アイコン用----------*/
div#push {position:fixed;bottom:4%;right:3%;width: 22%;z-index: 150;}
div#push img{border-radius:10px;}

/*-----------画像横並び表示用----------*/
.yokonarabe{
width:84%;
display:flex;
justify-content: center;
margin:0px 10px;
}

.yokonarabe img{
//border-radius:50%;
}

/*-----------ボタン画像横並び表示用----------*/
.yokonarabe_btn{
width:84%;
display:flex;
justify-content: center;
margin:0px 10px;
}

/*-----------動画コンテンツ横並び表示用----------*/
.yokonarabe_video{
width:88%;
display:flex;
justify-content: center;
}

/*-----------非画像見出し文字----------*/
.midashi1{
margin:0px auto;
color:#ffffff;
font-size:1.2em;
text-align:center;
font-weight:bold;
}

/*-----------非画像ボタン下文字----------*/
.midashi_btn{
margin:0px auto;
color:#ffffff;
font-size:0.8em;
text-align:center;
font-weight:bold;
}

/*-----------ここからスライドショー----------*/

.slick-slide{
	height:auto!important;
	background:;
	margin:0px auto;
}
.slick-slide img{
	width: 100%;
}

/*-----------ここまでスライドショー----------*/

/*-----------ここからポップアップ表示用CSS----------*/

#appDlbox{z-index: 1; border:4px solid #ff88bb;background:rgba(249,217,223,.9);padding:1em;width: 80%;
position:fixed;left:10%;top:24%;border-radius:10px;z-index: 10;display:none;}
#appDlbox > p{font-size:0.9em;margin-bottom:0.5em;text-align : center;}
#appDlbox > p span{color:#F00;font-weight:bold;}
#appDlbox > p img{width: 50%; border-radius:10px; text-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);}
#appDlbox > p.fd{background: #FFF;padding:1em;position:relative;border-radius:10px;margin-bottom: 1em; text-align:left;}
#appDlbox > p.fd:before{
  content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #FFF;
}
#appDlbox dl dd {margin-right: 38px;}
#appDlbox dl dd a{display:block;color:#FFF;width: 100%;padding:0px;text-align: center;margin:0px auto;font-weight:bold;font-size:1.3em;}
#appDlbox dl dd a.cancel{background:#ABABAB;font-weight:lighter;font-size:0.7em;padding:5px;border-radius:30px;margin:1em auto;}

.time{font-size:1.2em;color:#F69;font-weight:bold;}
.newapp{font-size:0.8em;}

/*-----------ここまでポップアップ表示用CSS----------*/

