@charset "UTF-8";
/* CSS Document */

/*
font-family: 'Fjalla One', sans-serif;
*/

/* ######################################## */

.main_title_wrap {
    width: 100%;
    height: 32.53vw;
    background: url("../sp_img/common/second_title_bg.png") no-repeat;
    background-size: cover;
}
.main_title {
    width: 100%;
    height: 32.53vw;
    position: relative;
}
.main_title div {
    width: 22.93vw;
    position: absolute;
    top: 50%;
	left: 50%;
    -webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

/* ######################################## */

.story_wrap {
    width: 100%;
    background: url("../sp_img/story/contents_bg.png") no-repeat top center;
    background-size: 100% auto;
    padding-top: 10.66vw;
    box-sizing: border-box;
}
.introduction {
    width: 100%;
    margin: 0 auto 9.33vw auto;
    position: relative;
}
.introduction div {
    width: 36.8vw;
    position: absolute;
    top: 8vw;
    left: -5.33vw;
    z-index: 1;
}
.introduction h3 {
    width: 36.26vw;
    margin: 0 auto 9.333vw auto;
}
.introduction h3 img {
    width: 100%;
    height: auto;
}
.introduction p {
    font-size: 3.467vw;
    line-height: 6.133vw;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 8vw;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.about {
    width: 100%;
    margin-bottom: 10.66vw;
    text-align: center;
    position: relative;
}
.about_img_01 {
    width: 40.17vw;
    position: absolute;
    top: -6.66vw;
    right: 0;
}
.about_img_02 {
    width: 29.33vw;
    position: absolute;
    top: 93.33vw;
    left: 1.06vw;
}
.about h4 {
    font-size: 5.067vw;
    font-weight: 700;
    color: #ad8e60;
    background: url("../sp_img/story/contents_title_bg.png") no-repeat bottom center;
    background-size: 23.28vw auto;
    padding-bottom: 8.33vw;
    margin-bottom: 8vw;
}
.about p {
    font-size: 3.467vw;
    line-height: 6.133vw;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 8vw;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.vocabulary {
    width: 100%;
    margin: 0 auto 21.33vw auto;
    text-align: center;
    position: relative;
}
.vocabulary h4 {
    font-size: 5.067vw;
    font-weight: 700;
    color: #ad8e60;
    background: url("../sp_img/story/contents_title_bg.png") no-repeat bottom center;
    background-size: 23.28vw auto;
    padding-bottom: 8.33vw;
    margin-bottom: 8vw;
}
.vocabulary dl:nth-child(2) {
    padding: 8vw 1.33vw 6.66vw 1.33vw;
    background-image: url("../sp_img/story/contents_border.png"),url("../sp_img/story/contents_border.png");
    background-position: top center, bottom center;
    background-repeat: no-repeat;
}
.vocabulary dl {
    width: 77.33vw;
    margin: 0 auto;
    padding: 6.66vw 1.33vw 6.66vw 1.33vw;
    box-sizing: border-box;
    background: url("../sp_img/story/contents_border.png") no-repeat bottom center;
    background-size: contain;
}
.vocabulary dt {
    font-size: 4vw;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5.33vw;
}
.vocabulary dd {
    font-size: 3.467vw;
    line-height: 6.133vw;
    text-align: left;
}

/* ######################################## */

.story_nova {
    width: 100%;
    margin: 0 auto 10.66vw auto;
    position: relative;
}
.story_nova h3 {
    width: 100%;
	font-size: 4.26vw;
	line-height: 1;
	font-weight: bold;
	text-align: center;
    margin: 0 auto 5.33vw auto;
	padding-bottom: 4vw;
	background: url("../img/story/story_title_btm.png") no-repeat bottom center;
	background-size: 34.66vw auto;
	 text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.story_nova p {
    font-size: 3.467vw;
    line-height: 6.133vw;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 8vw;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.story_nova p:last-child {
	margin-bottom: 0;
}
.story_nova div {
    width: 33.33vw;
    position: absolute;
    top: -25.33vw;
    left: 65.46vw;
}
.story_nova div img {
    width: 100%;
    height: auto;
}

/* ######################################## */

.story_piena {
    width: 100%;
    margin: 0 auto 10.66vw auto;
    position: relative;
}
.story_piena h3 {
    width: 100%;
	font-size: 4.26vw;
	line-height: 1;
	font-weight: bold;
	text-align: center;
    margin: 0 auto 5.33vw auto;
	padding-bottom: 4vw;
	background: url("../img/story/story_title_btm.png") no-repeat bottom center;
	background-size: 34.66vw auto;
	 text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.story_piena p {
    font-size: 3.467vw;
    line-height: 6.133vw;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 8vw;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.story_piena p:last-child {
	margin-bottom: 0;
}
.story_piena div:nth-of-type(1) {
    width: 34.66vw;
    position: absolute;
    top: -1.6vw;
    right: 71.46vw;
}
.story_piena div:nth-of-type(2) {
    width: 37.33vw;
    position: absolute;
    top: 57.33vw;
    left: 69.06vw;
}
.story_piena div img {
    width: 100%;
    height: auto;
}

/* ######################################## */

.story_falce {
    width: 100%;
    margin: 0 auto 10.66vw auto;
    position: relative;
}
.story_falce h3 {
    width: 100%;
	font-size: 4.26vw;
	line-height: 1;
	font-weight: bold;
	text-align: center;
    margin: 0 auto 5.33vw auto;
	padding-bottom: 4vw;
	background: url("../img/story/story_title_btm.png") no-repeat bottom center;
	background-size: 34.66vw auto;
	 text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.story_falce p {
   font-size: 3.467vw;
    line-height: 6.133vw;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 8vw;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.story_falce p:last-child {
	margin-bottom: 0;
}
.story_falce div:nth-of-type(1) {
    width: 37.33vw;
    position: absolute;
    top:-21.06vw;
    left: -5.66vw;
}
.story_falce div:nth-of-type(2) {
    width: 43.73vw;
    position: absolute;
    top: 58.4vw;
    right: -9.33vw;
}
.story_falce div img {
    width: 100%;
    height: auto;
}

/* ######################################## */

.story_mezza {
    width: 100%;
    margin: 0 auto 10.66vw auto;
    position: relative;
}
.story_mezza h3 {
    width: 100%;
	font-size: 4.26vw;
	line-height: 1;
	font-weight: bold;
	text-align: center;
    margin: 0 auto 5.33vw auto;
	padding-bottom: 4vw;
	background: url("../img/story/story_title_btm.png") no-repeat bottom center;
	background-size: 34.66vw auto;
	 text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.story_mezza p {
   font-size: 3.467vw;
    line-height: 6.133vw;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 8vw;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.story_mezza p:last-child {
	margin-bottom: 0;
}