@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c|Noto+Serif+JP&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap');

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Poiret One', 'M PLUS Rounded 1c', sans-serif;
  background: #ffaa00;
	background-image: url("image/bg-red.png");
	background-size: 100% auto;
  background-repeat:no-repeat;
}

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

li{
	margin-left: 2.5em;
	font-size: 2vmin;
  list-style-type: square;
}

audio {
	width: 40vmin;
	display: table;
  margin: 10px;
 }

h2{
	font-family: 'Poiret One', sans-serif;
	letter-spacing: 0.1em;
	font-weight: bold;
	font-size: 3.5vh;
	color:#fff;
	text-align: center;
}
h2 span{
	font-size: 2vh;
}
h3{
	letter-spacing: 0.1em;
}

h4{
	font-size: 2.5vmin;
}

h5{
	font-size: 2vmin;
}

h6{
	font-size: 0.5vmin;
}

img{
	height: 100%;
	width: auto;
}

/*pcsp画像切り替え*/
.pc { display: block !important; }
.sp { display: none !important; }
/*pcsp画像切り替え END*/

/*ボタンの設定*/
.btn-square-pop {
	margin: 0.5vmin 0;
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
	font-size: 2.5vmin;
  color: #FFF;
  background: #ffaa00;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

.btn-square-pop:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
/*ボタンの設定　END*/

/*ヘッダー*/
.header {
	z-index: 9999;
	position: fixed;
	padding-top: 1.3em;
	background: #B40404;
	height: 7vh;
	width: 100%;
}

.header-list li{
	letter-spacing: 0.1em;
	font-size: 3vmin;
	padding: 0 1vmax;
	font-weight: bold;
	margin: 0 1em;
	list-style-type: none;
	float: left;
}

.header-icon img{
	width: 3.5vmin;
	height: auto;
	max-width:100%;
	max-height:100%;
}

.header-icon li {
	padding: 0 2em 5px 1em;
	margin: auto 1%;
	list-style-type: none;
	float: right;
}

.all-box{
	width: 90%;
  margin: 0 auto;
  max-width: 900px;
}
/*ヘッダー　END*/

/*トップ*/
.top-wrapper{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	padding-top: 7vh;
	height: 100vh;
	width: 100%;
	color: #fff;
	font-size: 20px;
	text-align: center;
	background: none;
}
.top-top{
	padding: 10px;
	height: 15vh;
	width: 98%;
	margin: 0 auto;
	background: none;
  float: left;
}

.top-wrapper li{
	list-style-type: none;
	margin-left: 0;
}

.top-text{
	padding: 5px;
	height: 10vh;
	width: 98%;
	margin: 0 auto;
	background: none;
	float: left;
}

.top-text h1 {
	font-size: 3.5vmin;
}

.top-text p {
	font-size: 3vmin;
}

.top-logo{
	padding: 1vh;
	height: 25vh;
	width: 98%;
	margin: 0 auto;
	background: none;
	float: left;
}

.top-logo img{
	max-width: 100%;
	width: auto;
	height: 40vmin;
	position: relative;
}

.top-text2{
	padding: 3vh;
	height: 2vh;
	width: 98%;
	margin: 2.5em auto;
	background: none;
	float: left;
}

.top-text2 p {
	font-family: 'Poiret One',  sans-serif;
	font-weight: bold;
	font-size: 4vmin;
}

.top-text3{
	float: left;
	padding: 1px;
	height: 5vh;
	width: 98%;
	margin: 0 auto;
	background: none;
}

.top-text3 p {
	text-align: center;
	font-weight: bold;
	font-size: 5vmin;
	animation: flash 2s ease infinite alternate;
}

@keyframes flash {
	50%{
		opacity: 0;
		}
}
/*トップ END*/

.all-title{
	padding-top: 0.5em;
	height: 6vh;
	width: 100%;
}
/*トップ　END*/

/*ボイス*/
.voice-wrapper{
	padding-top: 7vh;
	color: #6B371F;
	background: none;
	height: 100vh;
	width: 100%;
	font-size: 2.1vmin;
}

.voice-wrapper p{
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

.voice-wrapper img{
  width: 100%;
	padding: 10px;
}

.voice-wrapper span{
 font-size: 1.8vmin;
}

.voice-flexbox {
		display: block;
}

.voice-mel {
	float:left;
	margin-left: 0.5em;
  background: none;
	height: 80vh;
	width: 40%;
  position: relative;
	overflow: hidden;
}

.voice-mel img{
	width: auto;
	height: 90%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	 -moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
}

.voice-mel-text {
	float:right;
	padding: 30px;
	margin-right: 0.5em; 	margin-bottom: 0.5em;
	background: -webkit-repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
  background: repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
	height: 80vh;
	width: 55%;
	border-radius: 10px;/*角の丸み*/
}

@media screen and (max-width: 700px) {
     .voice-flexbox {
         display: block;
     }

		 img {
			  max-width: 100%;
				height: auto;
				position: absolute;
			 }

 		 .pc {
	 			display: none !important;
  	}

		 .sp {
	  		display: block !important;
		}

     .voice-flexbox .voice-mel {
         width: 100%;
				 height: 18em;
         margin: 0.5vh auto;
     }

		 .voice-flexbox .voice-mel-text {
				 width: 100%;
			   height: 40em;
				 margin: 0.5vh auto;
		 }
	 }
/*ボイス　END*/

/*利用規約*/
.terms-wrapper{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	padding-top: 7vh;
	height: 100vh;
	width: 100%;
	max-width:  900px;
	margin: auto;
	font-size: 2.1vmin;
	color: #6B371F;
}
.terms-wrapper span{
 font-size: 1.8vmin;
}

.terms-flexbox {
		display: block;
}

.terms-1{
	float: left;
	padding: 10px;
	margin-left: 0.5em;
	background: -webkit-repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
  background: repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
	height: 23vh;
	width: 48%;
	border-radius: 10px;/*角の丸み*/
}

.terms-2{
	float: right;
	padding: 10px;
	margin-right: 0.5em;
	background: -webkit-repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
  background: repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
	height: 23vh;
	width: 48%;
	border-radius: 10px;/*角の丸み*/
}

.terms-3{
	float: left;
  padding: 10px;
	height: 30vh;
	width: 98%;
	margin: 0.5em;
	background: -webkit-repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
  background: repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
	border-radius: 10px;/*角の丸み*/
}

.terms-4{
	float: left;
	padding: 10px;
	margin-left: 0.5em;
	background: -webkit-repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
  background: repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
	height: 21.5vh;
	width: 48%;
	border-radius: 10px;/*角の丸み*/
}

.terms-5{
	float: right;
	padding: 10px;
	margin-right: 0.5em;
	background: -webkit-repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
  background: repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
	height: 21.5vh;
	width: 48%;
	border-radius: 10px;/*角の丸み*/
}

.terms-6{
	background: none;
	float:left;
	padding: 10px;
	height: 8vh;
	width: 100%;
	line-height: 0.8em;
}
.terms-6 p{
	text-align: center;
}

@media screen and (max-width: 700px) {
     .terms-flexbox {
         display: block;
     }

     .terms-flexbox .terms-1 {
         width: 100%;
				 height: 9em;
         margin: 0.5vh auto;
     }

		 .terms-flexbox .terms-2 {
				 width: 100%;
			   height: 7em;
				 margin: 0.5vh auto;
		 }

		 .terms-flexbox .terms-3 {
				 width: 100%;
			   height: 17em;
				 margin: 0.5vh auto;
		 }

		 .terms-flexbox .terms-4 {
				 width: 100%;
				 height: 8em;
         margin: 0.5vh auto;
		 }

		 .terms-flexbox .terms-5 {
				 width: 100%;
				 height: 11em;
				 margin: 0.5vh auto;
		 }
 }
 /*利用規約　END*/

/*その他*/
.other-wrapper{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	padding-top: 7vh;
	height: 95vh;
	width: 100%;
	max-width:  900px;
	margin: auto;
	font-size: 2.1vmin;
	color: #6B371F;
}

.other-wrapper li{
	list-style-type: none;
}

.other-wrapper h4{
 margin-left: 1em;
}

.other-wrapper h5{
 margin-left: 1.5em;
}

.other-top {
	float: left;
	padding: 10px;
	color: #6B371F;
	background: none;
	height: 6vh;
	width: 99%;
	font-size: 4vmin;
	margin: 0 auto;
}

.other-contact{
	float: left;
  padding: 10px;
	height: 18vh;
	width: 98%;
	margin: 0.5em;
	background: -webkit-repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
  background: repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
	border-radius: 10px;/*角の丸み*/
}

.other-link{
	text-align: center;
	float: left;
  padding: 10px;
	height: 40vh;
	width: 98%;
	margin: auto;
	background: -webkit-repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
  background: repeating-linear-gradient(-45deg, #FFF4B2, #FFF4B2 3px,#FFEB7F 3px, #FFEB7F 7px);
	border-radius: 10px;/*角の丸み*/
}

.other-link img{
	width: 200px;
	height: 40px;
	margin-left: auto;
	position: relative;
}

p.other-box {
   border-bottom: 1px solid #6B371F;
	 margin: 0.5em;
}

.other-friend-link li{
	margin: auto;
	float: left;
	display: inline;
}

.other-friend-link img{
	width: 200px;
	height: 40px;
	margin-left: auto;
	padding-left: 1em;
	position: relative;
}

/*その他　END*/

/*フッター*/
.footer{
	letter-spacing: 0.1em;
	padding-top: 1em;
	background: #B40404;
	height: 5vh;
	width: 100%;
	font-size: 1em;
	color:#fff;
	text-align: center;
}
/*フッター　END*/