@charset "UTF-8";
@import url("style.css");
/* CSS Document */

@font-face {
  font-family: 'maru'; /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url('../213089/irohamaru-Medium.ttf') format('truetype')

}


body {
	font-family:'maru' ;
    text-align: center;
    color: #694224;
    background-color: #FEF1E3;
	/*↓この2行はブラウザの内側の隙間をなくす魔法の呪文*/
	margin: 0;
	padding: 0;
	
}

#topnavi{
	width: 100%;
	height: 50px;
	margin: 0px;
	padding: 5px;
	background-color: #694224;
	color: #ffffff;
	text-align: center;
	position: fixed;/* 位置を固定する */
	top: 0; /* 位置を画面の一番上にする */
	z-index: 10;/* 重なり順の設定 */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

#topnavi img{
    width: 20%;
    margin-top: 5px;
}

.main {
    background-image: url("images/main2.jpg");/*←背景画像を指定*/
    background-repeat: no-repeat;/*←背景画像は繰り返さずに1枚だけ表示*/
    background-size: cover;/*←背景画像をトリミングしつついいかんじに表示*/
    background-position: 50%  50%;/*←背景画像の真ん中から表示*/
    width: 100%;/*←これ見ているデバイスの横の画面サイズいっぱい*/
    height: 470px;
    margin-top: 50px;
}

.long{
	margin-top: -20px
}

.illust1 img{
    width: 48%;
    text-align: center;
    margin-right: 10px;
    margin-top: -20px;
    margin-bottom: 10px;
}
.qa {
    font-size: large;
}

.qa::first-letter{
	font-size: 2em
}

.illust2 img{
    width: 40%;
    text-align: center;
    margin-top: -15px;
}

.info{
    margin-top: -5px;
    margin-bottom: 50px;
}

.point {
    display: flex; /*横並び*/
    align-items: center;
    font-size: small;
}
.point .tubu img{
    width: 50px; /*画像サイズ指定*/
    position: relative;
    left: 40px;
}

.point .point {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
}


.lineup{
    background-image: url("../213089/images/flavor3.jpg");/*←背景画像を指定*/
    background-repeat: no-repeat;/*←背景画像は繰り返さずに1枚だけ表示*/
    background-size: cover;/*←背景画像をトリミングしつついいかんじに表示*/
    background-position: 50%  50%;/*←背景画像の真ん中から表示*/
    width: 100%;/*←これ見ているデバイスの横の画面サイズいっぱい*/
    height: 786px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.ex img{
	width: 100%
}

h1 {
    font-size: 25px;
    margin-top: 100px;
}

.sns img{
    width: 70%;
}

.company img{
    width: 100%;
    margin-top: 100px;
	vertical-align: bottom;
}