/* CSS Document */

/*reset------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	
	vertical-align: baseline;
}
html{
	font-size: 62.5%;

	
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
a{
    text-decoration: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



#main .pc-only{
	display: block;
}
#main .sp-only{
	display: none;
}

a:hover {
    opacity: 0.7;
    transition: 0.3s;
}

@media screen and (max-width:820px) { 
#main .pc-only{
	display: none;
}

#main .sp-only{
	display: block;
}

}

/*-----------------------------------------------*/

body{
font-family:  "hiragino-kaku-gothic-pron", "Hiragino Sans", "source-han-sans-japanese", Arial, Meiryo, sans-serif;


font-style: normal;
	color: #000;
}

div#container {
    overflow: hidden;
}


#sub-hd { 
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 50px;
    border-bottom-left-radius: 30px;
    width: 270px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

#sub-hd .tw { width: 55px;}
#sub-hd .tw a { display: block;}
#sub-hd .tw a sbg { width: 100%; fill: #fff;}
#sub-hd .spacer { width: 21px;}

.menu-btn { 
    position: absolute;
    top: 51px;
    right: 90px;
    width: 24px;
    height: 18px;
    cursor: pointer;
    z-index: 101;
    background: #fff;
    padding: 16px 17px 21px 16px;
    border-radius: 50px;
	    filter: drop-shadow(1px 1px 2px #b7b7b71c);
}
.menu-btn div { position: relative; width: 100%; height: 100%;}
.menu-btn div span { display: block; width: 100%; height: 1px; background: #f7f6e7; position: absolute; left: 0; opacity: 1; transition: 0.2s linear;}
.menu-btn div span:nth-of-type(1) { top: 3px;}
.menu-btn div span:nth-of-type(2) { top: 14px;}
.menu-btn div span:nth-of-type(3) { top: 23px;}
.menu-btn.active div span:nth-of-type(1) { transform: translateY(8px) rotate(225deg);}
.menu-btn.active div span:nth-of-type(2) { opacity: 0;}
.menu-btn.active div span:nth-of-type(3) { transform: translateY(-8px) rotate(-225deg);top: 19px;}



.menu { position: fixed; right: -780px; top: 0; width: 100%; max-width: 640px; height: 100vh; padding:110px 0; background:#ffffff9e; box-shadow:0 0 8px #404040; z-index: 100; transition: 0.4s linear;
}
.menu.open {right: 0;}
.menu .inner { width: 100%; height: 100%; padding-left: 50px; overflow-y: scroll;}
.menu ul li {     padding: 21px 0; font-size: 16px;}
.menu ul li a { color: #4c5255; text-decoration: none;font-weight: bold;}
.menu ul li span { font-weight: 700;}
.menu ul li dl dt { margin-bottom: 3px; font-weight: 700;}
.menu ul li dl dd { padding: 2px 12px; font-size: 13px;}
.menu ul li ul { padding-top: 10px;}
.menu ul li ul li { padding: 4px 0; font-size: 13px;}
.menu ul li ul li a { padding-right: 25px; background: url('../img/icn-win.png') no-repeat 100% 50% / auto 80%;}
.menu ul li a:hover {
    opacity: 0.7;
    transition: 0.3s;
}
.tw.ins {
    margin-right: 82px;
}
ul.menu_flex img {
    opacity: 0.8;
}
header#hd h1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 60px 60px 60px 100px;
}



.menu ul li span {
    margin-right: 8px;
    margin-top: 0px;
    /* display: inline; */
    vertical-align: middle;
}

.menu ul li span a {
    /* width: 100%; */
}

.menu ul li span img {width: 22px;display: inline-block;/* padding-top: 0px; */}

.menu ul li:nth-child(5) {
    margin-top: 10px;
}

ul.menu_flex {
    display: flex;
	    margin-top: 1em;
}

ul.menu_flex li {
    /* width: 60px; */
}

ul.menu_flex li:first-child img {
    width: 42px;
}

ul.menu_flex li:nth-child(2) img {
    width: 44px;
}

ul.menu_flex li:nth-child(3) img {
    width: 94px;
}

ul.menu_flex li {
    margin-right: 20px;
}

ul.menu_flex li:first-child {
    margin-right: 37px;
}

#tw-kv h2 { text-align: center;}
#tw-kv h2 img { width: 100%;}
#tw-kv h2 img.sp { display: none;}

.tw svg {
    fill: #fff;
	filter: drop-shadow(1px 1px 2px #b7b7b71c);
}

#tw-lead .inner { width: 88%; margin: 0 auto; padding: 90px 0;}
#tw-lead h3 { margin-bottom: 25px; color: #0859af; font-size: 31px; text-align: center;}
#tw-lead p { text-align: center;}
#tw-lead p.or { margin-bottom: 25px; font-size: 21px; font-weight: 700;}
#tw-lead p.or span { font-size: 15px;}
#tw-lead .box { width: 100%; max-width: 700px; margin: 0 auto 30px; padding: 15px; background: #1da1f2; border-radius: 6px;}
#tw-lead .box p { color:#fff577; font-size: 15px;}
#tw-lead .read { margin-bottom: 40px;}
#tw-lead .read p { font-size: 17px; line-height: 2;}
#tw-lead .read p span { display: block;}
#tw-lead .read p em { color: #1d9bf0; font-size: 20px; font-weight: 700;}
#tw-lead .btn { width: 85%; max-width: 380px; margin: 0 auto;}
#tw-lead .btn a { position: relative; display: block; padding: 25px 0; background: #0859AF; border-radius: 50px;
 color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.05rem; text-align: center; text-decoration: none;
}
#tw-lead .btn a:after { content: ''; display: block; width: 18px; height: 18px;
 border-right: solid 4px #fff; border-bottom: solid 4px #fff;
 position: absolute; right: 12%; top: 42%; transform: translate(0,-50%) rotate(45deg);
}
#tw-lead .btn a:hover { opacity: 0.8;}
#tw-howto .inner-sct { width: 92%; margin: 0 auto; padding: 80px 0;}
#tw-howto h3 { margin-bottom: 30px; text-align: center;}
#tw-howto h3 img { width: 100%; max-width: 580px;}
#tw-howto h3 img.sp { display: none;}
#tw-howto p.mb { margin-bottom: 40px;}
#tw-howto p.present { font-size: 26px; font-weight: 700; text-align: center;}
#tw-howto p.present br.sp { display: none;}
#tw-howto p.present span.marker { background: linear-gradient(transparent 60%, #fff577 60%); font-size: 33px;}
#tw-howto .image { position: relative; width: 100%; max-width: 720px; margin: 0 auto; padding-top: 10px;}
#tw-howto .image .badge { position: absolute; left: -30px; top: 0; width: 130px;}
#tw-howto .image .badge img { width: 100%;}
#tw-howto .image figure { margin: 0 auto 30px; text-align: center;}
#tw-howto .image figure img { width: 90%; max-width: 500px;}
#tw-howto .image .set { padding: 20px 30px; border: solid 1px #707070; border-radius: 15px;}
#tw-howto .image .set p { font-size: 13px;}

#tw-oubo { background: #f7f6f2;}
#tw-oubo .inner-sct { width: 92%; margin: 0 auto; padding: 80px 0;}
#tw-oubo h2 { margin-bottom: 20px; font-size: 28px; text-align: center;}
#tw-oubo p { font-size: 20px; text-align: center;}
#tw-oubo p.date { margin-bottom: 20px; font-size: 26px; font-weight: 700;}
#tw-oubo p.date em { font-size: 33px;}
#tw-oubo p.note { margin-top: 12px; font-size: 13px;}

#tw-entry{ background: #f7f6f2;}
#tw-entry .inner-sct { width: 88%; margin: 0 auto; padding: 80px 0;}
#tw-entry .step-1{ width: 100%; max-width: 720px; margin: 0 auto;}
#tw-entry .step-1 .inner{ position: relative; width: 94%; margin: 0 auto; padding: 30px 0; background: #fff; border-radius: 40px;}
#tw-entry .step-1 .icn,
#tw-entry .step .icn { position: absolute;width: 66px; }
#tw-entry .step-1 .icn{ left: -10px; top: -10px;}
#tw-entry .step .icn { left: -10px; top: 18%;}
#tw-entry .step-1 .icn img ,
#tw-entry .step .icn img { width: 100%;}
#tw-entry .step-1 p { margin-bottom: 15px; font-size: 16px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#tw-entry .step-1 p img { display: block; width: 50%; max-width: 140px; margin: 0 auto 20px;}
#tw-entry .step-1 .follow { width: 80%; max-width: 270px; margin: 0 auto;}
#tw-entry .step-1 .follow a { display: block; padding: 10px 0; background: #1da1f2; border-radius: 50px;
 color: #fff; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none;
}
#tw-entry .step-1 .follow a svg { display: inline-block; width: 20px; margin-right: 18px; fill: #fff; vertical-align: middle;}
#tw-entry .step-1 .follow a span{ display: inline-block; letter-spacing: 0.06rem; vertical-align: middle;}
#tw-entry .ctn-flex { display: flex; justify-content: space-around; width: 100%; max-width: 720px; margin: 0 auto 100px;}
#tw-entry .step { width: 50%;}
#tw-entry .step .inner { position: relative; width: 94%;}
#tw-entry .step .inner img { width: 100%;}
#tw-entry .step .inner img.sp { display: none;}

#tw-entry .btn { position: relative; width: 80%; max-width: 400px; margin: 0 auto;}
#tw-entry .btn:before { content: ''; display: block; width: 190px; height: 132px; position: absolute; left: -100px; bottom: 10px;
 background: url('../img/tw-illust.png') no-repeat 50% 50% / 100% 100%; z-index: 2;
}
#tw-entry .btn a { position: relative; display: block; padding: 25px 0 25px 20px; background: #1da1f2; border-radius: 50px;
 color: #fff; font-size: 20px; font-weight: 700; text-align: center; text-decoration: none; z-index: 1;
}
#tw-entry .btn a:after { content: ''; display: inline-block; width: 15px; height: 15px;
 border-top: solid 3px #fff; border-right: solid 3px #fff; transform: rotate(45deg); vertical-align: middle;
}
#tw-entry .btn a span{ display: inline-block; margin-right: 20px; letter-spacing: 0.06rem; vertical-align: middle;}
#tw-entry .btn a:hover { opacity: 0.8;}

header#hd {
    box-sizing: border-box;
}
	#sub-hd .tw img{
	width: 83%;
}
.contents {

    box-sizing: border-box;
}

header#hd h1 a img {
    width: 100%;
    max-width: 230px;
}



.lineup_inner {
    text-align: center;
}

.link_ec {
    margin-top: 60px;
}

.link_ec p {
    text-align: center;
    margin-bottom: 20px;
}



.flex {
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
}



a.hov:hover {
    /* opacity: 0.7; */
    transition: 0.3s;
    background: #ffffff29;
	border-radius: 60px;
}



footer {
    padding: 60px;
    font-size: 1.5rem;
	    background: #fff;
    color: #000;
}

footer a {
    color: #000;

}

.copy_right p{
	color: #000;
	margin-right: 40px;
}


.flex.copy_right a img {
    height: 38px;
    width: auto;
}
.sns li:first-child img {
    width: 80px;
}

.sns li:nth-child(3) img {
    width: 80px;
}
footer .flex {
    align-items: baseline;
}

/*sd hover===========================*/



	footer a.privacy {
	    color: #fff;
		    font-size: 14px;
		margin-top: 30px;
	}

div#main {
    margin-top: -2px;
}



.sns li:nth-child(2) img {
    width: 40px;
}


/*============================================================Spain LP=============================================================*/
/*==================================================================================================================================*/
p{
	font-size: 1.6rem;
	color: #5B5B5B;
}

video {
  width: 800px;
}

.bg__bage {
    background: #F7F6E7;
}

.img___wrap {
    width: 1100px;
    /* CONTAIN-INTRINSIC-BLOCK-SIZE: auto 100px; */
    margin: 0 auto;
}

.img___wrap01 .flex img {
    width: 30%;
}

img {
    display: block;
    /* margin: 0 auto; */
}

.img___wrap.img___wrap02 {
    /* margin: 0 auto; */
}

.maneri {
}

.img___wrap.img___wrap02 img {
    margin: 0 auto;
}

.product img , .mv_img{
    width: 100%;
}

.img___wrap.img___wrap01 > img:first-child {
    margin: 120px auto 60px;
}

.maneri > img:first-child {
    margin: 70px auto 40px;
}

.maneri > img:nth-child(3) {
    margin: 120px auto;
}

.maneri > img:nth-child(4) {
    margin: 120px auto;
}

.cv {
    margin: 120px auto;
}

.cv img {
    margin: 30px auto;
}

.recipe {
    width: 1100px;
    margin: 60px auto;
}

.recipe img {
    margin: 0 auto;
}

.recipe > img:first-child {
    margin: 20px auto;
}
.flex.flex_recipe div {
    margin: 14px 0;
}

.movie video {
    margin: 0 auto;
    display: block;
}
.movie{
margin-top:120px;

}


.amazon img{
	width: 130px;
    border: 2px solid #000;
}


.movie img:first-child {
    margin: 40px auto;
}


@media (max-width: 1100px) {
.img___wrap {
    width: 90%;
}
.cv img {
    margin: 60px auto;
}
.maneri img {
    width: 90%;
}

.maneri > img:first-child {
    /* margin: 90px auto 40px; */
    width: 60%;
}

.maneri > img:nth-child(2) {
    width: 70%;
    margin: 0 auto;
}

.maneri > img:nth-child(3) {
    margin: 80px auto;
}

.maneri > img:nth-child(4) {
    margin: 80px auto 120px;
}

.recipe {
    width: 90%;
}

.flex.flex_recipe div {
    width: 31%;
}

.flex.flex_recipe div img {
    width: 100%;
}


a.amazon {
    /* margin: 30px; */
    display: block;
}
}


@media (max-width: 600px) {
.mv_wrap {
    width: 100%;
}	
	header#hd h1 {
    padding: 24px;
}
div#mv:after {
    height: 60px;
    bottom: -28px;
}
header#hd h1 a img {
    width: 100%;
    max-width: 110px;
}
#sub-hd {
    width: 140px;
    padding: 20px;
}

.menu-btn {
    padding: 11px 13px 17px 13px;
    width: 18px;
    height: 15px;
    top: 20px;
	    right: 24px;
}

.tw.ins {
    margin-right: 32px;
}
	footer {
    padding: 20px;
		font-size: 1.4rem;}
	a.f_logo_youki {
    margin-top: 10px;
}
	.recipe a img {
    width: 100%;
}

.flex.flex_recipe div {
    width: 47%;
}

video {
    width: 90%;
}

.movie img:first-child {
    width: 40%;
    margin-top: 0;
}

.recipe img:first-child {
    width: 60%;
}

.movie {
    margin-top: 60px;
}

.product {
    margin-top: 60px;
}

.maneri > img:nth-child(2) {
    width: 90%;
}

.maneri > img:first-child {
    width: 80%;
    margin: 40px auto 40px;
}

.img___wrap01 .flex img {
    width: 90%;
    margin: 0 auto;
}

.img___wrap.img___wrap01 > img:first-child {
    width: 70%;
    margin: 40px auto 30px;
}


.cv > img:first-child {
    width: 54%;
}

.cv img {
    margin: 50px auto;
}
	.maneri img {
    width: 100%;
}
	.maneri > img:nth-child(4) {
    margin: 50px auto 60px;
}
	.cv {
    margin: 60px auto 120px;
}

}