@charset "UTF-8";


/* ################################################################################################ */
/* ################################################################################################ */
/* ########## 画面の幅 768pxまで ################################################################## */

/* 画面の幅 768px までの指定 */
.body{
display: block;
width:768px;	/* 幅サイズ 768px */
}

/* 背景画像を指定 */
.back_ground_image{
width: 100vw;	/* 幅サイズいっぱいに表示 */

}


/*  Startボタンの設定　*/
.start_btn{
    height: 80px;
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 17vw;
    left: 55vw;
}

/*  facebookの設定　*/
.fb{
    height: 45px;
    width: auto;
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 9vw;
    left: 47vw;
}


/*  instagramの設定　*/
.it{
    height: 45px;
    width: auto;
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 9vw;
    left: 51vw;
}

/*  questionの設定　*/
.question_image{
width: 100vw;	/* 幅サイズいっぱいに表示 */
background-size: contain;		/*画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。 */
text-decoration: none;			/*テキストの装飾的な線*/
background-position: center center;	/*背景画像の初期位置*/
background-repeat: no-repeat;		/*背景画像をどのように繰り返すかを設定*/
zoom: 0%; 				/*拡大率を制御*/
}

/*  質問1の内容を表示するボックス設定　*/
div.question_box1{
    width:700px; height:5px;			/*  ボックスのサイズ　*/
    background:rgba(255,0 0,0.5);		/*  ボックスの背景を透明　*/
    text-align:center;				/*  文字を中央配置　*/
    position: relative;
    bottom: 42vw;
    left: 15vw;
    font-style: italic;
    font-variant: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 10%;
    font-family: "メイリオ",sans-serif;

}

/*  yesボタンの設定　*/
.yes_btn{
    height: 80px;
    width: auto;
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 33vw;
    left: 20vw;
}



/*  noボタンの設定　*/
.no_btn{
    height: 80px;
    width: auto;
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 33vw;
    left: 40vw;
}

/*  facebookの設定　*/
.fb_q{
    height: 45px;
    width: auto;
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 9vw;
    left: 40vw;
}


/*  instagramの設定　*/
.it_q{
    height: 45px;
    width: auto;
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 9vw;
    left: 43vw;
}

/*  質問2の内容を表示するボックス設定　*/
div.question_box2{
    width:700px; height:5px;			/*  ボックスのサイズ　*/
    background:rgba(255,0 0,0.5);		/*  ボックスの背景を透明　*/
    text-align:center;				/*  文字を中央配置　*/
    position: relative;
    bottom: 42vw;
    left: 10vw;
    font-style: italic;
    font-variant: normal;
    font-weight: bold;
    font-size: 35px;
    line-height: 10%;
    font-family: "メイリオ",sans-serif;

}

/* 結果画面の背景画像を指定 */
.ans_image{
width: 100vw;	/* 幅サイズいっぱいに表示 */
background-size: contain;		/*画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。 */
text-decoration: none;			/*テキストの装飾的な線*/
background-position: center center;	/*背景画像の初期位置*/
background-repeat: no-repeat;		/*背景画像をどのように繰り返すかを設定*/
zoom: 0%; 				/*拡大率を制御*/
}



/*  aboutボタンの設定　*/
.about{
    height: 40px;
    width: auto;
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 18vw;
    left: 15vw;
}


/*  GoTopボタンの設定　*/
.GoTop{
    height: 40px;
    width: auto
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 18vw;
    left: 22vw;
}


/*  結果画面のfacebookの設定　*/
.fb_ans{
    height: 42px;
    width: auto;
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 6vw;
    left: 15vw;
}


/*  結果画面のinstagram設定　*/
.it_ans{
    height: 42px;
    width: auto;
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    cursor: pointer;   
    position: relative;
    bottom: 6vw;
    left: 18vw;
}
}