@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{
color: #242322;
line-height: 1.8;
-webkit-text-size-adjust: 100%;
background: #ffffff;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}
p.note, ul.note > li{
text-align: left;
text-indent: -1em;
padding-left: 1em;
}
.moveit{
visibility: hidden;
}

/*========================
コンテンツ
========================*/
.isPC{
display: none;
}
#content_wrap{
background: url("/products/brand/yanyan/shiro-kuro/images/base.png"), #ffffff;
background-position: center top, center center;
background-repeat: repeat, repeat;
background-size: 46vw, 100%;
position: relative;
overflow: hidden;
font-size: 3.4vw;
letter-spacing: .01em;
}
#content_wrap > section{
text-align: center;
}
.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
========================*/
.inner{
padding: 0 4.3vw;
}
#content_wrap p,
#content_wrap a,
#content_wrap figcaption,
#content_wrap div{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.information,
.information p
{
font-size: 2.6vw !important;
line-height: 1.9;
}
.txt_left{
text-align: left !important;
}
.txt_right{
text-align: right !important;
}
.txt_center{
text-align: center !important;
}

/*========================
ローディング画面
========================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: url("/products/brand/yanyan/shiro-kuro/images/base.png"), #ffffff;
background-position: center top, center center;
background-repeat: repeat, repeat;
background-size: 46vw, 100%;
}
#loading img{
width: 60vw;
position: absolute;
top: calc(50% - 16vw);
left: calc(50% - 27vw);
-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;}
}

/*========================
オンマウス設定
========================*/
.ac_question:hover,
.thumb:hover,
#brand_footer a:hover,
.brandsite a img:hover{
opacity: 0.7;
}

/*========================
タイトル・概要
========================*/
#introduction{
position: relative;
}
.jagged{
background: #443e3e;
height: 26vw;
position: relative;
padding-top: 3vw;
margin-bottom: 21.1vw;
}
.jagged:before{
content: "";
display: block;
width: 100%;
height: 1vw;
background: url(/products/brand/yanyan/shiro-kuro/images/giza.png) repeat-x center bottom /auto 100%;
position: absolute;
bottom: -0.9vw;
left: 0;
}
h2{
width: calc(100%*658/767);
margin: 0 0 0 8vw;
position: relative;
}
.intro{
width: calc(100%*575/767);
margin: 0 auto;
}

/*========================
プロフィール
========================*/
#profile{
position: relative;
padding: 4.5vw 0 10.3vw;
}
.profile_list li:last-child{
margin-top: 3.6vw;
}
.profile_list li{
position: relative;
}
.profile_list li .upimg{
position: relative;
z-index: 6;
}
.profile_list li.noah:before{
content: "";
position: absolute;
top: 0.3vw;
right: -10.3vw;
width: 39.6vw;
height: 50.5vw;
background: url(/products/brand/yanyan/shiro-kuro/images/bamboo_sp.png) no-repeat top center / 100% auto;
z-index: 5;
}
.profile_list li.karen:before{
content: "";
position: absolute;
top: -2.5vw;
left: -10.3vw;
width: 39.6vw;
height: 50.5vw;
background: url(/products/brand/yanyan/shiro-kuro/images/bamboo_sp.png) no-repeat top center / 100% auto;
transform: scale(-1, 1);
z-index: 5;
}
.grass_l{
width: 13.6vw;
position: absolute;
top: 4.2vw;
left: -11.5vw;
z-index: 6;
}
.panda_run{
width: 10.9vw;
position: absolute;
top: -3.5vw;
left: 0.1vw;
z-index: 6;
}
.grass_r{
width: 10.1vw;
position: absolute;
top: 6.4vw;
right: -7.4vw;
z-index: 6;
}
.panda_choco{
width: 12.9vw;
position: absolute;
bottom: -10.4vw;
right: -3vw;
z-index: 6;
}

/*========================
間違い探し
========================*/
#difference{
background: #443e3e;
position: relative;
padding: 10.2vw 0 10vw;
}
#difference h3{
width: 49.8vw;
margin: 0 auto 7.7vw;
}
.intro_difference{
width: 58.1vw;
margin: 0 auto;
}
.panda_noah_wrap{
transform: rotate(35deg);
}
.panda_noah{
position: absolute;
width: calc(100%*218/767);
left: -5.1vw;
top: -2.8vw;
}
.panda_karen_wrap{
transform: rotate(-34.7deg);
}
.panda_karen{
position: absolute;
width: calc(100%*206/767);
right: -6.2vw;
top: -3.5vw;
}
#difference .inner{
padding: 0 9.4vw;
}
.question{
padding-top: 7.9vw;
}
.level{
width: 50.8vw;
margin-bottom: 2.4vw;
}
.difference_list li figure{
margin-bottom: 7.8vw;
}
.difference{
border: 1.2vw solid #ffffff;
box-shadow: 1.2vw 1.2vw rgba(0,0,0,0.2);
position: relative;
}
.difference_answer{
margin-top: 7.8vw;
}
.btn_mt{
margin-top: 7.8vw;
}
.difference:after{
content: "";
position: absolute;
top: -2.8vw;
left: calc(50% - 2vw);
width: 4vw;
height: 4vw;
background: url("/products/brand/yanyan/shiro-kuro/images/pin_red.png") no-repeat top center / 100% auto;
}
.ac_answer{
display:none;
}
.active{
border-radius: 0;
overflow: hidden;
}
.ac_question{
width: 68.6vw;
margin: 0 auto;
display: block;
position: relative;
cursor: pointer;
z-index: 10;
}
.ac_question::before{
content: '';
position: absolute;
top: calc(50% - 0.6vw);
right: 4.1vw;
width: 3.2vw;
height: 0.7vw;
background-color: #462d11;
transform: rotate(0deg);
transition: all .4s;
}
.ac_question::after{
content: '';
position: absolute;
top: calc(50% - 0.6vw);
right: 4.1vw;
width: 3.2vw;
height: 0.7vw;
background-color: #462d11;
transform: rotate(90deg);
transition: all .4s;
}
.active::before{
transform: rotate(360deg);
transition: all .4s;
}
.active::after{
transform: rotate(360deg);
transition: all .4s;
}

/*========================
パンダの様子
========================*/
#state{
position: relative;
padding: 9.5vw 0 10vw;
}
#state h3{
width: 79.4vw;
margin: 0 auto;
}
.state_list{
margin-top: 10vw;
}
.thumb{
border: 1.2vw solid #e7bf8e;
box-shadow: 1.2vw 1.2vw rgba(0,0,0,0.2);
position: relative;
width: 70.4vw;
}
.thumb:before{
content: "";
background: url("/products/brand/yanyan/shiro-kuro/images/icon_play.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
width: 11.6vw;
height: 11.6vw;
position: absolute;
top: calc(50% - 5.8vw);
left: calc(50% - 5.8vw);
}
.thumb:after{
content: "";
position: absolute;
top: -2.8vw;
left: calc(50% - 2vw);
width: 4vw;
height: 4vw;
background: url("/products/brand/yanyan/shiro-kuro/images/pin_blue.png") no-repeat top center / 100% auto;
}
.smds img{
height: 6.779vw;
}
.shirokuro{
position: relative;
width: 76.4vw;
padding: 19.3vw 0 0 4.2vw;
overflow: visible;
}
.shirokuro .thumb{
transform: rotate(-7.2deg);
}
.shirokuro .smds{
transform: rotate(-14.2deg);
position: absolute;
top: 0;
left: 0;
}
.shirokuro .txt{
transform: rotate(-9.9deg);
position: absolute;
top: 8.5vw;
left: 1.3vw;
}
.shirokuro .txt img{
width: 74vw;
}
.tobe{
position: relative;
width: 74vw;
padding: 14.5vw 0vw 0 13.2vw;
overflow: visible;
margin-top: 12.4vw;
}
.tobe .thumb{
transform: rotate(8.2deg);
}
.tobe .smds{
transform: rotate(12.8deg);
position: absolute;
top: 0;
right: -2.2vw;
}
.tobe .txt{
transform: rotate(10deg);
position: absolute;
top: 4.5vw;
right: -2vw;
}
.tobe .txt img{
width: 82vw;
}
.mogu{
position: relative;
width: 76.4vw;
padding: 18.7vw 0 0 1.7vw;
overflow: visible;
margin-top: 5.3vw;
}
.mogu .thumb{
transform: rotate(-2deg);
}
.mogu .smds{
transform: rotate(-9.2deg);
position: absolute;
top: 0;
left: 0;
}
.mogu .txt{
transform: rotate(-4.2deg);
position: absolute;
top: 8.5vw;
left: 0.8vw;
}
.mogu .txt img{
width: 74vw;
}

/*========================
動画モーダル
========================*/
#modal_movie{
position: relative;
background: #fff;
width: auto;
max-width: 800px;
margin: 0 auto;
}
button.mfp-arrow{
display: none;
}
.mfp-iframe-scaler iframe {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.mfp-figure:after {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.mfp-close{
width: 11.8vw !important;
height: 12vw !important;
font-size: 0 !important;
position: absolute;
top: -13.2vw !important;
right: 0.6vw !important;
background: url("/products/brand/yanyan/shiro-kuro/images/btn_close.png") no-repeat center / contain !important;
}

/*====================
SNS・ページトップ
====================*/
#brand_footer{
position: relative;
}
#brand_footer .inner{
padding: 0;
}
.sns{
display: flex;
justify-content: center;
margin-bottom: 7.7vw;
}
.sns li{
width: 11.6vw;
}
.sns li:not(:first-child){
margin-left: 5.2vw;
}
.pagetop{
position: absolute;
top: -2.6vw;
right: 2.7vw;
width: 15vw;
z-index: 50;
}
.pagetop a{
display: block;
}	
.brandsite{
padding: 7.7vw 8vw;
background: #443e3e;
}

/* ～767px For SP
====================================================*/
@media screen and (max-width: 767px){
.isPC{
display: none;
}
}

/* ▽ PC ▽================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
/*========================
コンテンツ
========================*/
#content_wrap{
background: url("/products/brand/yanyan/shiro-kuro/images/base.png"), #ffffff;
background-position: center top, center center;
background-repeat: repeat, repeat;
background-size: 300px, 100%;
}

/*========================
base
========================*/
.isSP{
display: none;
}
.isPC{
display: block;
}
body{
min-width: 950px;
}
.l-container{
line-height: 2;
}
.inner{
width: 910px;
margin: 0 auto;
padding: 0 !important;
}
.information,
.information p{
font-size: 13px !important;		
}
#content_wrap,
#content_wrap p{
font-size: 18px;
}

/*========================
ローディング画面
========================*/
#loading{
background: url("/products/brand/yanyan/shiro-kuro/images/base.png"), #ffffff;
background-position: center top, center center;
background-repeat: repeat, repeat;
background-size: 300px, 100%;
}
#loading img{
width: 440px;
top: calc(50% - 130px);
left: calc(50% - 200px);
}

/*========================
タイトル・概要
========================*/
.jagged{
height: 113px;
padding-top: 42px;
margin-bottom: 115px;
}
.jagged:before{
height: 7px;
bottom: -7px;
}
h2{
width: 820px;
margin: 0 auto;
}
.intro{
width: 680px;
}

/*========================
プロフィール
========================*/
#profile{
padding: 0px 0 80px;
}
#profile .inner{
width: 810px;
}
.profile_list li.noah{
padding-left: 50px;
}
.profile_list li:last-child{
margin-top: 37px;
}
.profile_list li.noah:before{
top: -13px;
right: -180px;
width: 349px;
height: 356px;
background: url(/products/brand/yanyan/shiro-kuro/images/bamboo_pc.png) no-repeat top center / 100% auto;
}
.profile_list li.karen:before{
top: -41px;
left: -180px;
width: 349px;
height: 356px;
background: url(/products/brand/yanyan/shiro-kuro/images/bamboo_pc.png) no-repeat top center / 100% auto;
}
.grass_l{
width: 106px;
top: 44px;
left: -44px;
}
.panda_run{
width: 86px;
top: -16px;
left: 48px;
}
.grass_r{
width: 79px;
top: 48px;
right: -12px;
}
.panda_choco{
width: 101px;
bottom: -81px;
right: -20px;
}

/*========================
間違い探し
========================*/
#difference{
padding: 80px 0;
}
#difference h3{
width: 391px;
margin: 0 auto 42px;
}
.intro_difference{
width: 368px;
}
.panda_noah_wrap,
.panda_karen_wrap{
transform: rotate(0);
}
.panda_noah{
width: 218px;
left: calc(50% - 427px);
top: -191px;
/*top: 100px;*/
}
.panda_karen{
width: 206px;
right: calc(50% - 430px);
top: -196px;
/*top: 95px;*/
}
#difference .inner{
padding: 0;
}
.question{
padding-top: 45px;
}
.level{
width: 275px;
margin-bottom: 24px;
}
.difference_list{
display: flex;
justify-content: space-between
}
.difference_list li{
width: 425px;
}
.difference_list li figure{
margin-bottom: 60px;
}
.difference{
border: 10px solid #ffffff;
box-shadow: 8px 8px rgb(0 0 0 / 20%);
}
.difference_answer{
margin: 60px auto 0;
width: 425px;
}
.btn_mt{
margin-top: 60px;
}
.difference:after{
top: -22px;
left: calc(50% - 15.5px);
width: 31px;
height: 31px;
}
.ac_answer{
display:none;
}
.active{
border-radius: 0;
overflow: hidden;
}
.ac_question{
width: 480px;
}
.ac_question::before,
.ac_question::after{
top: calc(50% - 5px);
right: 28px;
width: 24px;
height: 4px;
}

/*========================
パンダの様子
========================*/
#state{
padding: 75px 0 70px;
}
#state h3{
width: 621px;
}
.state_list{
margin-top: 78px;
}
.thumb{
border: 10px solid #e7bf8e;
box-shadow: 8px 8px rgb(0 0 0 / 20%);
width: 540px;
}
.thumb:before{
background: url("/products/brand/yanyan/shiro-kuro/images/icon_play.png");
width: 88px;
height: 89px;
top: calc(50% - 44px);
left: calc(50% - 44px);
}
.thumb:after{
top: -22px;
left: calc(50% - 15.5px);
width: 31px;
height: 31px;
}
.smds img{
height: 50px;
}
.shirokuro{
width: 584px;
padding: 130px 0 0 38px;
}
.shirokuro .txt{
top: 61px;
left: 16px;
}
.shirokuro .txt img{
width: 504px;
}
.tobe{
width: 584px;
padding: 102px 6px 0 320px;
margin-top: 52px;
}
.tobe .smds{
right: 0;
}
.tobe .txt{
top: 43px;
right: 5px;
}
.tobe .txt img{
width: 555px;
}
.mogu{
width: 584px;
padding: 140px 0 0 16px;
margin-top: 0;
}
.mogu .txt{
top: 66px;
left: 6px;
}
.mogu .txt img{
width: 555px;
}

/*========================
動画モーダル
========================*/
.mfp-close{
width: 66px !important;
height: 66px !important;
top: -76px !important;
right: 4px !important;
}

/*====================
SNS・ページトップ
====================*/
#brand_footer .inner {
width: 800px;
}
.sns{
margin-bottom: 60px;
}
.sns li{
width: 60px;
}
.sns li:not(:first-child){
margin-left: 40px;
}
.pagetop{
top: -32px;
right: 23px;
width: 126px;
}
.brandsite{
padding: 60px 0;
}
.brandsite img{
margin: 0 auto;
}
}