@charset "utf-8";

* {
  margin: 0;
  padding: 0
}

body {
  text-size-adjust: 100%;
  
  background-image: url(../../assets/img/sd/dot.jpg);
  background-repeat: repeat-y center 10px;
  background-size: auto 124px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 400;
  padding-top: 20px;
  font-size: 14px;
  line-height: 1.4em;
  color: #5a1603;
}

h1 {
  font-size: 28px;
  line-height: 1.2em;
  text-align: center;
}
@media screen and (min-width:769px) {/* ウィンドウ幅が0〜769pxの場合に適用するCSS */
  h1 {
    font-size: 28px;
    line-height: 1.4em;
    padding-top: 3px
  }
}
h1 span {
  display: inline-block
}

section {
  max-width: 500px;
  margin: 0 auto;
  padding-top: 20px;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

section h3 {
  font-size: 18px;
  line-height: 1.4em;
  text-align: center;
}


section p {
  font-size: 14px;
  line-height: 1.4em;
  padding-top: 3px;
  margin-bottom: 4px;
  text-align:center;
}

section p2 {
  font-size: 14px;
  line-height: 1.4em;
  padding-top: 3px;
  margin-bottom: 4px;
  text-align:left;
}


section p3 {
  font-size: 15px;
  line-height: 1.4em;
  padding-top: 3px;
  margin-bottom: 4px;
  text-align:center;
  font-weight: bold
}

section p4 {
  font-size: 10px;
  line-height: 1.4em;
  padding-top: 3px;
  margin-bottom: 4px;
  text-align:center;
}

section p5 {
  font-size: 12px;
  line-height: 1.4em;
  padding-top: 3px;
  margin-bottom: 4px;
  text-align:center;
}


section .red {
  color: red;
  font-weight: bold;
}

.red02 {
  color: red;
  font-weight: bold;
  font-size: 16px;
}

.brown {
  color: #5a1603;
  font-weight: bold;
  font-size: 16px;
}


.deeppink {
  color: #d20e49;
  font-weight: bold;
  font-size: 20px;
}

.deeppink02 {
  color: #d20e49;
  font-weight: bold;
  font-size: 28px;
}

.trade {
  color: #5a1603;
  text-align:center;
  font-size: 11px;
}

.bol {
  font-weight: bold;
  font-size: 15px;
  line-height: 1.7em;
}


a {
  color: #ff0000
}

header img {
    width: 100%;
    max-width: 500px;
    min-width: 240px;
    height: auto;
    margin: 0 auto;
    display: block;
}

section img {
  width: 100%;
  max-width: 500px;
  min-width: 240px;
  height: auto;
  margin: 0 auto;
  display: block;
}




/*//////////////////////////////
// 白背景ボックス
//////////////////////////////*/


.answerbox{
	position: relative;
	width:94%;
	margin: auto;
	border-radius: 16px 16px 16px 16px;
    background: linear-gradient(#ffffff, #ffffff);
}
.answerbox02{
	text-size-adjust: 90%; 
	position: relative;
	width:94%;
	margin: auto;
	text-align:left;
	color:#000030;
	text-shadow: 0px 0px 4px rgba(255,255,255,0);
	border-radius: 16px 16px 16px 16px;
    background: linear-gradient(#ffffff, #ffffff);
}



.answerbold{
	font-size:1.3rem;
}


.answerbold{
	font-size:1.3rem;
}


.wallpaperline{
	border: solid #4f3759 2px;
	width:100%;
	height:auto;
}

.dlbox{
	position:relative;
	padding: 2%;
}


/*//////////////////////////////
// ヘッダー
//////////////////////////////*/
header .head {
    width: 100%;
    max-width: 500px;
    min-width: 240px;
    height: auto;
    position: relative;
    padding-top: -20px;
    overflow: hidden;
}

header .head img {
    width: 100%;
    max-width: 500px;
    min-width: 240px;
    height: auto;
    margin: 0 auto;
    display: block;
    padding-top: 0%;
}

header .head iframe {
    position: absolute;
    top: 40%;
    left: 12%;
    width: 76% !important;
    height: 35% !important;
    border-radius:2%; 
}




/*//////////////////////////////
// ダウンロードボタン2種
//////////////////////////////*/
section #iositem {
    width: 97%;
  text-align:center;
    max-width: 500px;
    min-width: 240px;
    margin: 0 auto;
    display: none;

}
section #androiditem {
    width: 97%;
    max-width: 500px;
    min-width: 240px;
    margin: 0 auto;
    display: none;

}

/*//////////////////////////////
// ダウンロードボタン iosの場合
//////////////////////////////*/
body.ios #iositem{
    display: block;
}
body.ios #androiditem{
    display: none;
}
/*///////////////////////////////
// ダウンロードボタン アンドロイドの場合
//////////////////////////////*/
body.android #iositem{
    display: none;
}
body.android #androiditem{
    display: block;
}
/*///////////////////////////////
// ダウンロードボタン パソコンの場合
//////////////////////////////*/
body.pc #iositem{
    display: block;
}
body.pc #androiditem{
    display: block;
}


/*////////////////////////////////////////////////////////////////
// share
////////////////////////////////////////////////////////////////*/
section .item{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  max-width: 500px;
  min-width: 240px;
}

section .item{
  box-sizing: border-box;
  margin: 0;
  width:calc(33.3333333% - 100px / 3);
  margin:0 50px 3px 130px;
  margin-top: 15px;
  margin-bottom: 16px;
}

section .item a{
  display: block;
  width: 32vw;
  margin: 0.2rem;
}

section .item a img {
  display: block;
  width: 80%;
  height: auto;
  max-width: 263px;
  min-width: 70px;
  }

@media only screen and (max-width: 480px){
    section .item{
        box-sizing: border-box;
        margin: 0;
        width:calc(33.3333333% - 100px / 3);
        margin:0 50px 10px 50px;
    }
    
  section .item a img {
      display: block;
      width: 80%;
      height: auto;
      max-width: 263px;
      min-width: 70px;
    }
}






/*////////////////////////////////////////////////////////////////
// footer
////////////////////////////////////////////////////////////////*/

footer {
  position: relative;
  padding: 16px;
    background: #a78832;
  color: #000000;
  font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  margin-top: 55px;
  bottom: 50px;
}

footer span {
  display: inline-block;
}

@media screen and (min-width:769px) {/* ウィンドウ幅が0〜769pxの場合に適用するCSS */
  footer {
    font-size: 14px;	
  }
}



/*////////////////////////////////////////////////////////////////
// フローティングバナー
////////////////////////////////////////////////////////////////*/
.bottom-fixed-button {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  padding-top: 8px;
  text-align: center;
  background: #aafe2d;
}

.bottom-fixed-button button {
  font-size: 21px;
  cursor: pointer;
  vertical-align: middle;
  color: #fff;
  font-weight: bold;
  background-color: #ff5287;
  border-radius: 0.5rem;
  border: solid 1px #d31313;  
  text-decoration: none;
  text-align: center;
  padding: 0.3rem 4rem 0.2rem;  
}

.bottom-fixed-button button a {
  color: #ffffff;
  text-decoration: none;  
}

/*-----------------------------------------------------
                   スペーサー
------------------------------------------------------*/

.hspaceS{
	position:relative;
	width:100%;
	height:2px;
	overflow:hidden;
}

.hspaceM{
	position:relative;
	width:100%;
	height:4px;
	overflow:hidden;
}

.hspaceL{
	position:relative;
	width:100%;
	height:18px;
	overflow:hidden;
}