@charset "Shift_JIS";
#contents {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}
#contents .TAMPLATE-A {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
} 


.title-area {
    position: relative;
}
.title-area .title-area_background {
    position: relative;
}
/*.title-area .title-area_background::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: rgba(255, 255, 255, 0.55);*/ /* 白のベール（不透明度調整可能） */
    /*pointer-events: none;*/ /* 操作を透過 */
    /*z-index: 1;
}*/
.title-area .title-area_background img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 0;
    max-height: 960px;
    object-fit: cover;
}
.title-area .title-area_logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* クリックを背景に通す場合は任意 */
    z-index: 999;
}
.title-area .title-area_logo h1 {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 800;
    font-size: clamp(0.75rem, 0.4rem + 1.75vw, 2.5rem);
    margin-bottom: 1em;
    color: #fff;
	line-height: 2em;
}
.title-area .title-area_logo img {
    max-width: 60%;
    margin: 0 auto;
}

.contents-area {
    width: 80%;
    margin:10% 8% 10% 12%;
}
@media (max-width: 960px) {
    .contents-area {
        width: 95%;
        margin:10% 2.5%;
    }
}
.contents-area_flame {
    display: flex;
    max-width: 1500px;
    margin: 0 auto;
    justify-content: space-evenly;
    
}
.contents-area_flame_title h2 {
    font-size: clamp(1.125rem, 0.5rem + 1.25vw, 4rem);
    line-height: 2;
    color: #707070;
    padding-bottom: 0;
}
.contents-area_flame_title h2 em{
    margin-left: -0.5em;
    font-style: normal;
}
.contents-area_flame_text p {
    font-size: clamp(1rem, 0.75rem + 0.5vw, 1.5rem);
    line-height: 2;
    color: #707070;
    margin-bottom: 2em;
}
.contents-area_flame_text p em {
    margin-left: -0.5em;
    font-style: normal;
}
.contents-area_flame_text p:last-child {
    margin-bottom: 0;
}

.sub-img-area {
    position: relative;
}
.sub-img-area .sub-img-area_background {
    position: relative;
}
.sub-img-area .sub-img-area_background img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 0;
    max-height: 640px;
    object-fit: cover;
}

.sub-img-area figcaption,
.title-area figcaption {
	font-size: 1em;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif" !important;
	color: #707070;
	text-align: right;
	padding-right: 30px;
}

.how-to-make {
    background-color: #F3EDE1;
    padding: 6% 5%;
}
.how-to-make h4 {
    font-size: clamp(1rem, 0.5rem + 1.5vw, 2rem);
    width: 90%;
    margin: 0 auto 1em;
    text-align: center;
    line-height: 3;
}
.how-to-make_flame {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: space-around;
}
.how-to-make_flame figure{
    max-width: 540px;
    width: 21%;
    margin: 2%;
}
.how-to-make_flame figure img {
    width: 100%;
}
.how-to-make_flame figcaption {
    font-size: clamp(0.5rem, 0.25em + 0.85vw, 1rem);
    font-weight: bold;
    margin-top: 0.5em;
    text-align: left;
}


.product-profile {
    text-align: center;
    background-color: #F1F1F1;
    width: 92%;
    padding:4em 4%;
    margin-bottom: 0;
}
.product-profile__title {
    text-align: center;
}
.product-profile__title img {
    max-width: clamp(220px, 50vw, 340px);;
}
.product-profile__title p {
    padding: 1em;
    font-size: clamp(3rem, 0.65rem + 0.19vw, 4rem);
    font-weight: bold;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
.product-profile__product-area {
    display: flex;
    max-width: 1000px; 
    margin: 0 auto;
    text-align: center;
}
.product-profile__product-area figure {
        width: 90%;
        min-width: 110px;
        padding: 2.5%;
        background-color: #fff;
        margin: 2.5%;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        box-shadow: 1px 1px 3px #acacac;
}
@media (min-width: 768px) { 
    .product-profile__product-area figure {
        width: 90%;
        min-width: 110px;
        padding: 5%;
        background-color: #fff;
        margin: 2.5%;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        box-shadow: 1px 1px 3px #acacac;
}
}
.product-profile__product-area figure p {
    text-align: justify;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"!important;
    font-size: clamp(0.95rem, 0.55rem + 0.3vw, 1rem);
    line-height: 1.75;
    margin-top: 1.5vh;
}
.product-profile__product-area figure a .image-area {
    position: relative;
}
.product-profile__product-area figure a .image-area .package {
    position: absolute;
    width: 30%;
    left: 10%;
    bottom: -2%;
}
.product-profile__product-area figure a .image-area .package-set {
    position: absolute;
    width: 30%;
    left: 5%;
    bottom: -2%;
}
.product-profile__product-area figure img {
    width: 100%;
    max-height: 16em;
    object-fit: cover;
}
.product-profile__product-area figure figcaption {
    line-height: 1.75;
    margin-top: 1.5vh;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bold;
    font-size: clamp(1rem, 0.55rem + 0.3vw, 1rem);
}
@media (min-width: 768px) { 
    .product-profile__product-area figure figcaption {
        font-size: clamp(1.25rem, 0.2rem + 1vw, 1.5rem);
    }
    .product-profile__product-area figure p {
        font-size: clamp(1rem, 0.55rem + 0.3vw, 1.25rem);
    }
}
.product-profile__product-area figure figcaption span {
    display: inline-block;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
.product-profile__product-area figure button {
    background-color: #333;
    border: none;
    width: 100%;
    color: #fff;
    line-height: 3;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bold;
    padding: 0.1rem;
    margin-top: 1.25em;
    font-size: clamp(1rem, 0.575rem + 0.1vw, 1.125rem);
}
.product-profile__product-area figure button:hover {
    opacity: 0.6;
}

.product-profile {
    text-align: center;
    background-color: #F1F1F1;
    width: 92%;
    padding:4em 4%;
    margin-bottom: 0;
}
.product-profile__title {
    text-align: center;
}
.product-profile__title img {
    max-width: clamp(220px, 50vw, 340px);;
}
.product-profile__product-set {
    display: flex;
    max-width: 1000px; 
    margin: 0 auto;
    text-align: center;
}

.product-profile__product-set figure {
        width: 90%;
        min-width: 110px;
        padding: 10%;
        background-color: #fff;
        margin: 2.5%;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        box-shadow: 1px 1px 3px #acacac;
}
@media (min-width: 768px) { 
    .product-profile__product-set figure {
        width: 90%;
        min-width: 110px;
        padding: 5%;
        background-color: #fff;
        margin: 2.5%;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        box-shadow: 1px 1px 3px #acacac;
}
}
@media (min-width: 767px) {
    .product-profile__product-set figure{
        width: 100%;
    }
}
.product-profile__product-set figure p {
    text-align: justify;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"!important;
    font-size: clamp(0.95rem, 0.55rem + 0.3vw, 1rem);
    line-height: 1.75;
    margin-top: 1.5vh;
}
.product-profile__product-set figure a .image-area {
    position: relative;
}
.product-profile__product-set figure a .image-area .package {
    position: absolute;
    width: 16%;
    left: 4%;
    bottom: -0.5em;
    max-width: 89px;
}
.product-profile__product-set figure a .image-area .package-set {
    position: absolute;
    width: 16%;
    left: 8em;
    bottom: -0.5em;
    max-width: 89px;
}
.product-profile__product-set figure a .image-area .image-area__main img {
    width: 50%;
    object-fit: cover;
    max-height: 20em;
}
.product-profile__product-set figure img {
    width: 100%;
}
.product-profile__product-set figure figcaption {
    line-height: 1.75;
    margin-top: 1.5vh;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bold;
    font-size: clamp(1rem, 0.55rem + 0.3vw, 1rem);
}
@media (min-width: 768px) { 
    .product-profile__product-set figure figcaption {
        font-size: clamp(1.25rem, 0.2rem + 1vw, 1.5rem);
    }
    .product-profile__product-set figure p {
        font-size: clamp(1rem, 0.55rem + 0.3vw, 1.25rem);
    }
}
.product-profile__product-set figure figcaption span {
    display: inline-block;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
.product-profile__product-set figure button {
    background-color: #333;
    border: none;
    width: 100%;
    color: #fff;
    line-height: 3;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bold;
    padding: 0.1em;
    margin-top: 1.25em;
    font-size: clamp(1rem, 0.575rem + 0.1vw, 1.125rem);
}
.product-profile__product-set figure button:hover {
    opacity: 0.6;
}