@charset "utf-8";
/* CSS Document */
/*====================
reset
====================*/
figure{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol{
margin: 0;
padding: 0;
}
div:after, dl:after, ul:after{
content: none;
}
*:focus{
outline: none;
}

/*====================
basic
====================*/
body{
position: relative;
}
.l-container{
-webkit-text-size-adjust: 100%;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}
p.note, ul.note ,li.note{
text-align: left;
text-indent: -1em;
padding-left: 1em;
}
/*.moveit{
visibility: hidden;
}*/

/*====================
コンテンツ
====================*/
.isPC {
display: none;
}
#content_wrap{
position: relative;
overflow: hidden;
background: #fadae7;
color: #e4007f;
}
#content_wrap p,
#content_wrap figcaption{
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 800;
font-size: 3.15vw;
letter-spacing: 0.1em;
overflow-wrap: break-word;
line-height: 1.5;
font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
transform: rotate(0.03deg);
}
#content_wrap > section{
text-align: center;
}
.gnav a:hover,
#brand_footer a:hover,
.btn_recipes a:hover{
opacity: 0.7;
}
.img_txt{
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
font-size: 0 !important;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
transition: opacity,transform;
transition-duration: .48s;
transition-timing-function: ease-out;
transition-delay: .7s;
}

/* ▽ SP ▽================================================================================================================================= */
/*====================
base
====================*/
.txt_small{
font-size: 2.2vw !important;
}
.txt_medium{
font-size: 2.8vw !important;
}
.txt_left{
text-align: left !important;
}
.txt_right{
text-align: right !important;
}
.txt_center{
text-align: center !important;
}
#content_wrap .txt_l{
font-size: 4.75vw;
letter-spacing: 0.04em;
line-height: 1.38;
}
#content_wrap .txt_ll{
font-size: 7.4vw;
line-height: 1;
}

/*====================
ローディング画面
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #fec5e1;
}
#loading img{
width: 48.501vw;
position: absolute;
top: calc(50% - 14vw);
left: calc(50% - 22vw);
-webkit-animation:blink 2s ease-in-out infinite alternate;
-moz-animation:blink 2s ease-in-out infinite alternate;
animation:blink 2s ease-in-out infinite alternate;
}
/* 点滅 */
@-webkit-keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}

/*====================
メインビジュアル
====================*/
.mv_main{
width: 100%;
height: 0;
padding-top: 142.8943937418514%;
background: url(/products/brand/twincle/images/cloud_white.png), url(/products/brand/twincle/images/mv_sp.png), linear-gradient(#9e1fb8, #fd64b4);
background-repeat: repeat-x, no-repeat;
background-position: left 25.3vw bottom -0.4vw, center center;
background-size: 71.5vw auto, cover;
}

/*====================
ページ内ナビ
====================*/
.gnav{
width: 100%;
background-image: linear-gradient(#ffffff 55%, #fadae7);
position: relative;
padding: 2.2vw 0 15vw;
}
.gnav .inner{
padding: 0;
}
.nav_menu{
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 30;
}
.nav_menu li{
width: calc(100% / 2);
}
.nav_menu li h3{
line-height: 1;
position: relative;
padding: 2.8vw 4.4vw;
}
.nav_menu li h3 img{
height: 6.7797vw;
}

/*====================
見出し設定
====================*/
#brand h3,
#product h3,
#characters h3,
#recipes h3{
position: relative;
}
#brand h3 p,
#product h3 p,
#characters h3 p,
#recipes h3 p{
color: #31428c;
font-size: 7.18vw;
letter-spacing: 0.094em;
line-height: 1;
}
#brand h3:before,
#product h3:before,
#characters h3:before,
#recipes h3:before{
content: "";
position: absolute;
top: -11.3vw;
left: calc(50% - 6.3885vw);
width: 12.7777vw;
height: 8.605vw;
background: url(/products/brand/twincle/images/mds_ribbon.png) no-repeat top center / 100% auto;
}
#brand h3 .mds_en,
#product h3 .mds_en,
#characters h3 .mds_en,
#recipes h3 .mds_en{
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 3.1vw;
line-height: 1;
margin-top: 1.1vw;
}
#content_wrap h4{
width: 73.6%;
background: #e4007f;
border: solid 0.5vw #31428c;
border-radius: 50vw;
color: #ffffff;
display: inline-block;
padding: 2.4vw 0;
position: relative;
}
.star{
width: 16.559vw;
position: absolute;
top: -5.5vw;
left: -10.2vw;
}
.all{
width: 21.774vw;
position: absolute;
top: -7.9vw;
right: -13.3vw;
}
#content_wrap h4 p{
font-size: 3.65059vw;
line-height: 1;
}

/*====================
ブランド紹介
====================*/
#brand{
background-color: #fadae7;
position: relative;
padding: 8vw 0 17.8vw;
}
#brand .inner{
padding: 11.4vw 4.6vw 0;
}
#brand .intro {
padding-top: 6.3vw;
width: 68.4vw;
margin: 0 auto;
}
.intro_base {
background-color: #fadae7;
background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fadae7 50%, #fadae7 100%), linear-gradient(180deg, #e4007f 0.3vw, transparent 0.3vw);
background-size: 2.4vw 100%, 100% 6.3vw;
line-height: 6.3vw;
padding-bottom: 0.3vw;
position: relative;
}
.l_ribbon{
width: 6.519vw;
position: absolute;
top: -2.2vw;
left: -0.2vw;
}
.r_ribbon{
width: 6.519vw;
position: absolute;
bottom: -2vw;
right: 0.1vw;
}
#brand .intro p {
/*font-size: 3.4vw;*/
letter-spacing: 0.035em;
line-height: 2;
}
.l01{
position: absolute;
width: 24.7vw;
left: -2vw;
top: -12vw;
}
.l02{
position: absolute;
width: 31.815vw;
left: -5.1vw;
top: 90.8vw;
}
.r01{
position: absolute;
width: 36.506vw;
right: 0.9vw;
top: -8.6vw;
}
.r03{
position: absolute;
width: 24.12vw;
right: -3.4vw;
top: 82.1vw;
}

/*====================
商品紹介
====================*/
#product{
position: relative;
padding: 8vw 0 4.3vw;
}
#product .inner{
padding: 11.4vw 4.6vw 10vw;
}
#product .txt_l{
margin-top: 7.6vw;
margin-bottom: 5.1vw;
}
.list_product{
display: flex;
justify-content: center;
align-items: center;
margin-top: -3.3vw;
}
.list_product li:nth-child(1){
margin: 1.7vw 0 0 4.5vw;
}
.list_product li:nth-child(2){
margin-left: 0.4vw;
}
.details{
position: relative;
}
.details figcaption{
position: absolute;
left: -20vw;
top: 67vw;
}
.l04{
position: absolute;
width: 21.383vw;
left: 7.9vw;
top: -22vw;
}
.l05{
position: absolute;
width: 20.339vw;
left: 9.2vw;
top: 165.4vw;
}
.r04{
position: absolute;
width: 24.903vw;
right: -3.4vw;
top: -15.5vw;
}
.r05{
position: absolute;
width: 20.47vw;
right: 6.7vw;
top: 167.4vw;
}
.r06{
position: absolute;
width: 16.037vw;
right: 18vw;
top: 298.2vw;
}

/*====================
キラキラ台紙
====================*/
#mount{
position: relative;
padding: 23vw 0 0;
}
#mount .inner{
padding: 5vw 4.6vw 10.4vw;
}
/* =====================
Swiper基本
===================== */
.mount_wrap {
position: relative;
overflow: hidden;
}
.mount_wrap .swiper {
padding: 0 12.6vw;
overflow: visible;
}
/* =====================
Swiperナビゲーション
===================== */
.mount_wrap .swiper-button-prev,
.mount_wrap .swiper-button-next{
width: 10.561vw;
height: 10.561vw;
position: absolute;
top: calc(50% - 5vw);
transform: translateY(-50%);
z-index: 10;
cursor: pointer;
}
.mount_wrap .swiper-button-prev{
left: 1vw;
background: url(/products/brand/twincle/images/btn_prev.png) no-repeat center/contain;
}
.mount_wrap .swiper-button-next{
right: 1vw;
background: url(/products/brand/twincle/images/btn_next.png) no-repeat center/contain;
}
/* =====================
Swiper有効時（〜1399px）
===================== */
.mount_wrap .swiper-slide img {
opacity: 0.5;
filter: brightness(0.85);
transform: scale(0.98);
transition:
opacity .8s cubic-bezier(.4,0,.2,1),
filter .8s cubic-bezier(.4,0,.2,1),
transform .8s cubic-bezier(.4,0,.2,1);
}
.mount_wrap .swiper-slide-visible img {
opacity: 1;
filter: brightness(1);
transform: scale(1);
}
/* =====================
Swiper無効時 共通
===================== */
.mount_wrap .swiper-b:not(.swiper-initialized) {
padding: 0;
overflow: visible;
}
.mount_wrap .swiper-b:not(.swiper-initialized) .swiper-button-prev,
.mount_wrap .swiper-b:not(.swiper-initialized) .swiper-button-next,
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-button-prev,
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-button-next{
display: none;
}
/* =====================
Swiper無効時（〜1399px）
Grid表示（改行あり）
===================== */
.mount_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
display: grid;
gap: 5px;
}
@media (max-width: 767px) {
.mount_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.mount_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1025px) and (max-width: 1399px) {
.mount_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
grid-template-columns: repeat(4, 1fr);
}
}
/* =====================
★ 1400px以上
・Swiper解除
・1行に可変幅で全画像表示
===================== */
@media (min-width: 1400px) {
.mount_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
display: flex;
flex-wrap: nowrap;/* 改行させない */
justify-content: space-between;/* 横幅いっぱいに均等配置 */
gap: 5px;
width: 100% !important;/* wrapper 幅100% */
transform: none !important;/* translate3d解除 */
}
.mount_wrap .swiper-b:not(.swiper-initialized) .swiper-slide {
flex: 1 1 auto;/* ★ 横幅可変 */
max-width: calc((100% - 5px*6)/7);/* ギャップ込みで最大幅調整 */
}
.mount_wrap .swiper-b:not(.swiper-initialized) .swiper-slide img {
width: 100%;/* スライド幅に合わせて伸縮 */
height: auto;
opacity: 1;
filter: none;
transform: scale(1);
transition:
opacity .8s cubic-bezier(.4,0,.2,1),
filter .8s cubic-bezier(.4,0,.2,1),
transform .8s cubic-bezier(.4,0,.2,1);
}
}

/*====================
キラキラシール
====================*/
#seal{
position: relative;
padding: 23vw 0 0;
}
#seal .inner{
padding: 5vw 4.6vw 8.5vw;
}
#content_wrap .seal_txt p{
margin-top: 8vw;
font-size: 3.65059vw;
line-height: 1.02;
}
.l06{
position: absolute;
width: 24.12vw;
left: 12vw;
top: 0.3vw;
}
.r07{
position: absolute;
width: 17.733vw;
right: 4.6vw;
top: 43.2vw;
}
.seal_backside_wrap{
position: relative;
}
.seal_backside{
width: 75.099vw;
margin: 3.3vw auto 0;
}
.l07{
position: absolute;
width: 25.5544vw;
left: 3.1vw;
top: 59.6vw;
}
.r08{
position: absolute;
width: 23.86vw;
right: 1.2vw;
top: 60.4vw;
}
/* =====================
Swiper基本
===================== */
.seal_wrap {
position: relative;
overflow: hidden;
}
.seal_wrap figure img{
box-sizing: border-box;
border: solid 1.4vw #ffffff;
}
.seal_wrap .swiper {
padding: 0 12.6vw;
overflow: visible;
}
/* =====================
Swiperナビゲーション
===================== */
.seal_wrap .swiper-button-prev,
.seal_wrap .swiper-button-next {
width: 10.561vw;
height: 10.561vw;
position: absolute;
top: calc(50%);
transform: translateY(-50%);
z-index: 10;
cursor: pointer;
}
.seal_wrap .swiper-button-prev {
left: 1vw;
background: url(/products/brand/twincle/images/btn_prev.png) no-repeat center/contain;
}
.seal_wrap .swiper-button-next {
right: 1vw;
background: url(/products/brand/twincle/images/btn_next.png) no-repeat center/contain;
}
/* =====================
Swiper有効時（〜1399px）
===================== */
.seal_wrap .swiper-slide img {
opacity: 0.5;
filter: brightness(0.85);
transform: scale(0.98);
transition:
opacity .8s cubic-bezier(.4,0,.2,1),
filter .8s cubic-bezier(.4,0,.2,1),
transform .8s cubic-bezier(.4,0,.2,1);
}
.seal_wrap .swiper-slide-visible img {
opacity: 1;
filter: brightness(1);
transform: scale(1);
}
/* =====================
Swiper無効時 共通
===================== */
.seal_wrap .swiper-b:not(.swiper-initialized) {
padding: 0;
overflow: visible;
}
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-button-prev,
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-button-next {
display: none;
}
/* =====================
Swiper無効時（〜1399px）
Grid表示（改行あり）
===================== */
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
display: grid;
gap: 16px;/* seal_wrapは余白広め */
}
@media (max-width: 599px) {
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
grid-template-columns: repeat(1, 1fr);
}
}
@media (min-width: 600px) and (max-width: 1024px) {
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1025px) and (max-width: 1399px) {
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
grid-template-columns: repeat(4, 1fr);
}
}
/* =====================
★ 1400px以上
・Swiper解除
・3列×3行（最後の行は2列）
===================== */
@media (min-width: 1400px) {
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));/* 3列 */
grid-auto-rows: auto;/* 行は自動 */
gap: 24px;
width: 100% !important;
transform: none !important;
}
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-slide {
width: 100%;
max-width: none;
}
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-slide img {
width: 100%;
height: auto;
object-fit: cover;
opacity: 1;
filter: none;
transform: scale(1);
}
.seal_wrap {
padding: 0 40px;
}
}
/* =====================
★ 1800px以上
・4列×2行
===================== */
@media (min-width: 1800px) {
.seal_wrap .swiper-b:not(.swiper-initialized) .swiper-wrapper {
grid-template-columns: repeat(4, minmax(0, 1fr));/* 4列 */
grid-template-rows: repeat(2, auto);/* 2行固定 */
}
}

/*====================
包み紙の名前
====================*/
#name{
position: relative;
padding: 15.3vw 0 38.6vw;
background: url("/products/brand/twincle/images/cloud_yellow.png"), url("/products/brand/twincle/images/l11.png"), url("/products/brand/twincle/images/r12.png");
background-repeat: repeat-x, no-repeat, no-repeat;
background-position: left 25.3vw bottom -0.4vw, left -12.3vw bottom -3vw, right -6.5vw bottom -2.7vw;
background-size: 71.5vw auto, 40.157vw, 36.115vw;
border-bottom: solid 7.4vw #fdf3ca;
}
#name .inner{
padding: 5vw 4vw 0;
}
/* #name 配下の h4 に対して、全体スタイルを打ち消す */
#content_wrap #name h4 {
width: auto;/* 元の幅に戻す */
background: none; /* 背景を削除 */
border: none;/* ボーダーを削除 */
border-radius: 0;/* 丸みを解除 */
color: inherit;/* 親の文字色を継承 */
display: block;/* 必要に応じて変更 */
padding: 0;/* パディング解除 */
position: relative;/* 必要に応じて保持 */
margin-bottom: 7.9vw;
}
.deco_star_l{
width: 7.954vw;
position: absolute;
top: 9.7vw;
left: 11.6vw;
}
.deco_star_r{
width: 8.605vw;
position: absolute;
top: 7.4vw;
right: 11.4vw;
}
.list_name{
display: flex;
flex-wrap: wrap;
}
.list_name li{
width: calc(100% / 2);
}
.list_name li:nth-child(3){
margin: -11.5vw 0 -7.4vw 23.1vw;
}
.list_name li img{
width: 36.247vw;
}
.list_name li:nth-child(3) img{
width: 31.813vw;
}
.l08{
position: absolute;
width: 13.6899vw;
left: 5.1vw;
top: 101.3vw;
}
.l09{
position: absolute;
width: 11.083vw;
left: 3.8vw;
top: 155.5vw;
}
.l10{
position: absolute;
width: 22.5555vw;
left: 17.7vw;
top: 155vw;
}
.r09{
position: absolute;
width: 11.996vw;
right: 6.4vw;
top: 94.8vw;
}
.r10{
position: absolute;
width: 20.34vw;
right: -2.7vw;
top: 150.9vw;
}
.r11{
position: absolute;
width: 20.34vw;
right: 21.5vw;
top: 156.2vw;
}

/*====================
キャラクター
====================*/
#characters{
position: relative;
padding: 8vw 0 10.1vw;
background: #fdf3ca;
}
#characters .inner{
padding: 11.4vw 6vw 0;
}
.list_characters{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 4vw;
}
.list_characters li{
width: calc(96% / 2);
}
#content_wrap .list_characters li figcaption{
letter-spacing: .02em;
margin-top: 1.6vw;
}
.cc01{
position: absolute;
width: 76.402vw;
left: 10.8vw;
top: 0.8vw;
}

/*====================
アレンジレシピ
====================*/
#recipes{
position: relative;
padding: 8vw 0 34vw;
background: url("/products/brand/twincle/images/cloud_footer.png"), #fdf3ca;
background-repeat: repeat-x, repeat;
background-position: left 25.3vw bottom -0.4vw, center center;
background-size: 71.5vw auto, 100%;
}
#recipes .inner{
padding: 11.4vw 7.4vw 0;
}
#content_wrap .recipes_txt p{
margin-top: 7.3vw;
font-size: 3.65059vw;
line-height: 1.32;
}
.list_recipes{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 9.4vw;
}
.list_recipes li{
width: calc(90% / 2);
}
.outline img{
box-sizing: border-box;
border: solid 1.4vw #ffffff;
border-radius: 7.8vw;
}
.outline{
display:block; 
position:relative;
text-decoration:none;
}
.outline figcaption{
color: #fff;
text-align: left;
padding: 9.4vw 2vw 0;
}
.outline .mask{
width: 100%;
height: 100%;
box-sizing: border-box;
border: solid 1.4vw #ffffff;
border-radius: 7.8vw;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0,0,0,0.5);
-webkit-transition:	all 0.6s ease;
transition: all 0.6s ease;
}
.outline .mask:hover{
opacity: 1;
}
.list_recipes .btn_recipes{
margin-top: 1.8vw;
}
.list_recipes .btn_recipes img{
width: 29.205vw;
}
.list_recipes li:nth-child(n+3){
margin-top: 7.1vw;
}
.cl01{
position: absolute;
width: 27.641vw;
left: -6.3vw;
top: -3.2vw;
}
.cc02{
position: absolute;
width: 100.652vw;
left: 1.8vw;
top: 36.1vw;
}
.cl03{
position: absolute;
width: 11.474vw;
left: 5vw;
bottom: 12vw;
}
.cr01{
position: absolute;
width: 26.858vw;
right: -2.9vw;
top: -25.6vw;
}
.cr03{
position: absolute;
width: 19.818vw;
right: 31.7vw;
bottom: 6vw;
}

/*====================
ブランドフッター
====================*/
#brand_footer{
position: relative;
padding: 6.5vw 0 9.5vw;
background: #fdcc6e;
}
.sns{
display: flex;
justify-content: center;
}
.sns li{
width: 7.823vw;
}
.sns li:not(:first-child){
margin-left: 4.4vw;
}
.pagetop{
position: absolute;
top: -21.6vw;
right: 2.5vw;
width: 27.119vw;
z-index: 50;
}

/* ▽ PC ▽================================================================================================================================= */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
.isSP {
display: none;
}
.isPC {
display: block;
}

/*====================
コンテンツ
====================*/
#content_wrap,
#content_wrap p,
#content_wrap figcaption{
font-size: 18px;
letter-spacing: 0.02em;
line-height: 1.46;
}
#content_wrap .inner{
width: 100%;
max-width: 1200px;
padding: 0;
margin: 0 auto;
}

/*====================
base
====================*/
.txt_small{
font-size: 15px !important;
}
.txt_medium{
font-size: 15px !important;
}
.txt_large{
font-size: 20px !important;
}
#content_wrap .txt_l{
font-size: 34px;
letter-spacing: 0.05em;
line-height: 1.36;
}
#content_wrap .txt_ll{
font-size:48px;
}

/*====================
ローディング画面
====================*/
#loading img{
width: 372px;
top: calc(50% - 100px);
left: calc(50% - 186px);
}

/*====================
メインビジュアル
====================*/
.mv_main{
padding-top: 40.90909090909091%;
background: url(/products/brand/twincle/images/cloud_white.png), url(/products/brand/twincle/images/mv_pc.png), linear-gradient(#9e1fb8, #fd64b4);
background-repeat: repeat-x, no-repeat, repeat;
background-position: bottom -2px center, center center, center center;
background-size: auto 50px, cover, 100%;
}

/*====================
ページ内ナビ
====================*/
.gnav{
padding: 0 0 78px;
background-image: linear-gradient(#ffffff 60%, #fbedf3)
}
.gnav .inner{
width: 100%;
max-width: 1350px;
}
.nav_menu{
flex-wrap: nowrap;
justify-content: space-around;
}
.nav_menu li{
width: auto;
margin: 0 10px;
}
.nav_menu li h3{
padding: 30px 0 25px;
}
.nav_menu li h3 img {
max-height: 46px;
width: auto;
height: auto;
}

/*====================
見出し設定
====================*/
#brand h3 p,
#product h3 p,
#characters h3 p,
#recipes h3 p{
font-size: 42px;
letter-spacing: 0.11em;
}
#brand h3:before,
#product h3:before,
#characters h3:before,
#recipes h3:before{
top: -66px;
left: calc(50% - 38px);
width: 76px;
height: 52px;
}
#brand h3 .mds_en,
#product h3 .mds_en,
#characters h3 .mds_en,
#recipes h3 .mds_en{
font-size: 18px;
margin-top: 7px;
}
#content_wrap h4{
width: 430px;
border: solid 3px #31428c;
border-radius: 100px;
padding: 17px 0;
}
.star{
width: 109px;
top: -35px;
left: -65px;
}
.all{
width: 143px;
top: -47px;
right: -104px;
}
#content_wrap h4 p{
font-size: 24px;
}

/*====================
ブランド紹介
====================*/
#brand{
padding: 60px 0 105px;
position: relative;
background-image: linear-gradient(#fbedf3, #fadae7 5%);
}
#brand .inner{
padding: 67px 0 0;
}
#brand .intro {
padding-top: 55px;
width: 500px;
}
.intro_base {
background-color: #fadae7;
background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fadae7 50%, #fadae7 100%), linear-gradient(180deg, #e4007f 2px, transparent 2px);
background-size: 20px 100%, 100% 51px;
line-height: 51px;
padding-bottom: 8px;
position: relative;
}
.l_ribbon {
width: 51px;
top: -15px;
left: -17px;
}
.r_ribbon {
width: 51px;
bottom: -10px;
right: -8px;
}
#brand .intro p {
font-size: 22px;
letter-spacing: 0.045em;
line-height: 2.32;
}
.l01{
width: 254px;
left: calc(50% - 597px);
top: 48px;
}
.l02{
width: 327px;
left: calc(50% - 555px);
top: 694px;
}
.l03{
position: absolute;
width: 224px;
left: calc(50% - 587px);
top: 1444px;
}
.r01{
width: 374px;
right: calc(50% - 551px);
top: -13px;
}
.r02{
position: absolute;
width: 113px;
right: calc(50% - 667px);
top: 24px;
}
.r03{
width: 247px;
right: calc(50% - 583px);
top: 637px;
}

/*====================
商品紹介
====================*/
#product{
padding: 60px 0 0;
}
#product .inner{
max-width: 950px;
padding: 67px 0 0;
}
#product .txt_l{
margin-top: 42px;
margin-bottom: 35px;
}
.list_product{
justify-content: space-between;
margin: -43px auto 0;
width: 766px;
}
.list_product h2 img{
width: 163px;
}
.list_product li:nth-child(1){
margin: 24px 0 0 0;
}
.list_product li:nth-child(2){
margin-left: 0;
margin-right: 30px;
}
.details{
position: relative;
}
.details figcaption{
position: absolute;
left: -42px;
top: 407px;
width: 570px;
}
.l04{
width: 219px;
left: calc(50% - 615px);
top: 175px;
}
.l05{
width: 212px;
left: calc(50% - 608px);
top: 964px;
}
.r04{
width: 255px;
right: calc(50% - 611px);
top: -159px;
}
.r05{
width: 213px;
right: calc(50% - 640px);
top: 704px;
}
.r06{
width: 165px;
right: calc(50% - 576px);
top: 932px;
}

/*====================
キラキラ台紙
====================*/
#mount{
padding: 118px 0 0;
}
#mount .inner{
padding: 0 0 65px 0;
}
.mount_wrap {
padding: 0 20px;
}
/* =====================
Swiperナビゲーション
===================== */
.mount_wrap .swiper-button-prev,
.mount_wrap .swiper-button-next {
width: 80px;
height: 80px;
}
.mount_wrap .swiper-button-prev {
left: 10px;
}
.mount_wrap .swiper-button-next {
right: 10px;
}

/*====================
キラキラシール
====================*/
#seal{
padding: 170px 0 0;
}
#seal .inner{
padding: 0 0 65px 0;
}
#content_wrap .seal_txt p{
margin-top: 40px;
font-size: 24px;
line-height: 1.02;
}
.seal_wrap figure img {
border: solid 8px #ffffff;
}
.seal_wrap .swiper {
padding: 0 40px;
overflow: visible;
}
/* =====================
Swiperナビゲーション
===================== */
.seal_wrap .swiper-button-prev,
.seal_wrap .swiper-button-next {
width: 80px;
height: 80px;
}
.seal_wrap .swiper-button-prev {
left: 10px;
}
.seal_wrap .swiper-button-next {
right: 10px;
}
#content_wrap h4 p{
font-size: 24px;
}
.seal_backside {
width: 512px;
margin: 24px auto 0;
}
.l06{
width: 248px;
left: calc(50% - 613px);
top: 65px;
}
.l07{
width: 261px;
left: calc(50% - 618px);
top: 100px;
}
.r07{
width: 183px;
right: calc(50% - 570px);
top: 86px;
}
.r08{
width: 247px;
right: calc(50% - 547px);
top: 127px;
}

/*====================
名前
====================*/
#name{
padding: 124px 0 112px;
background-position: bottom -2px center, left -142px bottom -33px, right -64px bottom -28px;
background-size: auto 50px, 412px, 370px;
border-bottom: solid 5px #fdf3ca;
}
#name .inner{
padding: 0;
}
#content_wrap #name h4 {
margin-bottom: 44px;
}
.deco_star_l{
width: 54px;
top: 23px;
left: calc(50% - 313px);
}
.deco_star_r{
width: 58px;
top: 7px;
right: calc(50% - 314px);
}
.list_name{
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 970px;
width: 100%;
margin: 0 auto;
}
.list_name li{
width: calc(100% / 3);
}
.list_name li:nth-child(1){
order: 1;
}
.list_name li:nth-child(2){
order: 3;
}
.list_name li:nth-child(3){
margin: 0;
order: 2;
}
.list_name li:nth-child(4){
order: 4;
margin-top: 8px;
}
.list_name li:nth-child(5){
order: 5;
margin-top: 8px;
}
.list_name li img{
width: 240px;
}
.list_name li:nth-child(3) img{
width: 210px;
}
.l08{
width: 140px;
left: calc(50% - 590px);
top: 245px;
}
.l09{
width: 115px;
left: calc(50% - 634px);
top: 413px;
}
.l10{
width: 232px;
left: calc(50% - 579px);
top: 559px;
}
.r09{
width: 123px;
right: calc(50% - 600px);
top: 98px;
}
.r10{
width: 208px;
right: calc(50% - 637px);
top: -29px;
}
.r11{
width: 209px;
right: calc(50% - 615px);
top: 508px;
}

/*====================
キャラクター
====================*/
#characters{
padding: 60px 0 98px;
}
#characters .inner{
padding: 67px 0 0;
}
.list_characters{
justify-content: center;
margin-top: 14px;
}
.list_characters li{
width: calc(100% / 4);
}
.list_characters li img{
max-width: 246px;
width: 100%
}
#content_wrap .list_characters li figcaption{
margin-top: 10px;
}
.cc01{
position: absolute;
width: 586px;
left: calc(50% - 308px);
top: 56px;
}

/*====================
アレンジレシピ
====================*/
#recipes{
padding: 60px 0 212px;
background: url("/products/brand/twincle/images/cloud_footer.png"), #fdf3ca;
background-repeat: repeat-x;
background-position: bottom -2px center;
background-size: auto 50px;
}
#recipes .inner{
padding: 67px 0 0;
}
#content_wrap .recipes_txt p{
margin-top: 48px;
font-size: 24px;
line-height: 1.02;
}
.list_recipes{
display: flex;
flex-wrap: wrap;
margin: 50px auto 0;
width: 100%;
max-width: 920px;
}
.list_recipes li{
width: calc(93% / 3);
}
.list_recipes li img{
max-width: 270px;
width: 100%;
}
.outline img{
border: solid 8px #ffffff;
border-radius: 60px;
}
.outline{
display:block; 
position:relative;
text-decoration:none;
max-width: 270px;
width: 100%;
margin: 0 auto;
}
.outline .mask{
box-sizing: border-box;
border: solid 8px #ffffff;
border-radius: 60px;
}
.outline figcaption{
padding: 94px 14px 0;
}
.list_recipes .btn_recipes{
margin-top: 12px;
}
.list_recipes .btn_recipes img{
width: 175px;
}
.list_recipes li:nth-child(n+3){
margin-top: 0;
}
.list_recipes li:nth-child(n+4){
margin-top: 38px;
}
.cl01{
position: absolute;
width: 212px;
left: calc(50% - 648px);
top: -272px;
}
.cc02{
position: absolute;
width: 773px;
left: calc(50% - 369px);
top: 54px;
}
.cl02{
position: absolute;
width: 252px;
left: calc(50% - 642px);
top: 163px;
}
.cl03{
position: absolute;
width: 88px;
left: calc(50% - 575px);
bottom: 467px;
}
.cr01{
position: absolute;
width: 206px;
right: calc(50% - 653px);
top: -346px;
}
.cr02{
position: absolute;
width: 176px;
right: calc(50% - 607px);
top: 204px;
}
.cr03{
position: absolute;
width: 152px;
right: calc(50% - 590px);
bottom: 399px;
}

/*====================
ブランドフッター
====================*/
#brand_footer{
padding: 50px 0 65px;
}
.sns li{
width: 60px;
}
.sns li:not(:first-child){
margin-left: 34px;
}
.pagetop{
top: -137px;
right: 46px;
width: 169px;
}
}

/* ウィンドウ幅が788px～1024px：MV、キャラクターエリア調整*/
@media screen and (min-width:768px) and ( max-width:1024px) {
/*====================
メインビジュアル
====================*/
.mv_main{
padding-top: 55.5%;
}

.list_characters{
justify-content: space-between;
}
.list_characters li{
width: calc(100% / 3);
}
.list_characters li:last-child{
margin-top: -30px;
}
}