@charset "utf-8";
/*##################################################
INFO.CSS
##################################################*/
.mega-menu #category_menu-creation{
display: none !important; /*メガメニューのメニュー作成を非表示*/
}
html{
width: 100%;
overflow-x: hidden;
}
nav {
-ms-overflow-style: none;
scrollbar-width: none;
}
nav ::-webkit-scrollbar {
display:none;
}
.g-clr{
color: #ce4166;
font-weight: bold;
}
a.g-clr:hover{
color: #a52748;
}
/*svg - color*/
.social-icons a{
-webkit-transition: .2s;
transition: .2s;
}
.social-icons a img{
opacity: 0;
}
/*nav*/
nav{
background: #fff;
}
nav li{
list-style: none;
}
.social-icons a{
margin-right: 8.9%;
}
.social-icons a.si-ln{
background: url(../svg/i-sns-ln.svg) no-repeat center bottom;
background-size: contain;
}
.social-icons a.si-tw{
background: url(../svg/i-sns-tw.svg) no-repeat center bottom;
background-size: contain;
}
.social-icons a.si-fb{
background: url(../svg/i-sns-fb.svg) no-repeat center bottom;
background-size: contain;
}
.social-icons a.si-ln:hover{
background-image: url(../svg/i-sns-ln-h.svg);
}
.social-icons a.si-tw:hover{
background-image: url(../svg/i-sns-tw-h.svg);
}
.social-icons a.si-fb:hover{
background-image: url(../svg/i-sns-fb-h.svg);
}
.social-icons a[target="_blank"]:after{
display: none;
}
.social-icons img{
width: 9.41%;
height: 100%;
}
.mega-menu li > div{
-webkit-transition: 0s;
transition: 0s;
}
.mega-menu [class*="level-"]:hover > ul{
display: block;
}
.mega-menu li{
padding-bottom: 1.25em;
margin-bottom: -0.1em;
}
.mega-menu .box-third a{
color: #fff;
font-weight: bold;
}
.mega-menu li:hover > .label{
color: #ce4166;
}
.mega-menu .label,
.mega-menu .level-third{
position: relative;
line-height: 1.4;
}
.mega-menu .label:after{
content: "";
display: block;
position: absolute;
width: 0.8em;
height: 1em;
top: 0.32em;
cursor: pointer;
background: url(../svg/i-arr-next.svg) no-repeat center center;
background-size: 0.5em;
}
.mega-menu li:hover > .label:after{
background: url(../svg/i-arr-next-h.svg) no-repeat center center;
background-size: 0.5em;
}
.mega-menu .label > a{
position: absolute;
display: block;
}
.mega-menu .label > span{
font-weight: bold;
display: block;
}
.mega-menu .second-entry{
line-height: 1.4;
}
.mega-menu .second-entry a{
font-weight: bold;
}
.mega-menu .second-entry a,
.mega-menu .box-third a{
overflow: hidden;
position: relative;
text-align: justify;
text-overflow: ellipsis;
max-width: 100%;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
margin-right: 2em;
}
nav .nav{
}
nav .nav a{
font-size: 90%;
display: block;
position: relative;
}
nav .nav a:after{
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media print, screen and (min-width:960px){
.mega-menu{
position: relative;
z-index: 3;
}
.mega-menu li > div{
position: fixed;
top: 0;
bottom: 0;
height: 100vh;
overflow: hidden;
}
.mega-menu li:hover > div{
overflow: visible;
}
.mega-menu .label{
padding-right: 3em;
}
.mega-menu li.is-sp{
display: none;
}
.nav-background{
position: fixed;
left: 50%;
top: 0;
bottom: 0;
background: #F7D1DB;
-webkit-transition: 0.2s;
transition: 0.2s;
z-index: -1;
}
.nav-background.acrive{
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.nav-background div{
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
z-index: -1;
}
.nav-background.active div{
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-box-shadow: 293px 0 0 #DC426A;
box-shadow: 293px 0 0 #DC426A;
}
.mega-menu .level-first > div{
z-index: 2;
}
.mega-menu .level-first > div{
}
.mega-menu .level-second > div{
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.mega-menu .label > a{
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.mega-menu .js-close,
.mega-menu .js-back{
display: none;
}
nav .pict{
position: relative;
overflow: hidden;
}
nav .pict img{
position: relative;
width: 100%;
}
nav .pict img.is-pc{
display: none !important;
}
.search.is-sp,
.pict .is-pc{
display: none;
}
}
@media print, screen and (min-width:960px) and (max-width:1365px){
nav .logo{
margin-bottom: 3.4407vw;
}
.mega-menu{
margin-bottom: 2.0497vw;
}
.nav-background{
width: 0px;
left: 21.449vw;
}
.mega-menu:hover + .nav-background{
width: 21.449vw;
}
.nav-background.active div{
-webkit-box-shadow: 21.449vw 0 0 #DC426A;
box-shadow: 21.449vw 0 0 #DC426A;
}
.mega-menu > li{
margin-right: -2.3426vw;
}
.mega-menu li > div{
width: 0;
}
.mega-menu .level-first:hover > .box-second{
width: 21.449vw;
overflow: visible;
}
.mega-menu .level-second:hover > .box-third{
width: 21.449vw;
overflow: visible;
}
.mega-menu ul{
width: 21.449vw;
padding-left: 2.6354vw;
padding-right: 1.8301vw;
padding-top: 12.5183vw;
padding-bottom: 12.5183vw;
}
.mega-menu ul li{
margin-right: -1.8301vw;
}
.mega-menu .level-first > div{
left: 21.449vw;
}
.mega-menu .level-second > div{
left: 100%;
}
.mega-menu .label:after{
right: 1.8301vw;
}
nav .login{
margin-bottom: 2.489vw;
}
nav .pict{
margin-bottom: 2.489vw;
}
nav .pict img.is-pc{
display: inline !important;
}
nav .pict img.is-sp{
display: none !important;
}
nav .nav{
margin-bottom: 2.489vw;
}
}
@media print, screen and (min-width:1366px){
nav .logo{
margin-bottom: 47px;
}
.mega-menu{
margin-bottom: 28px;
}
.nav-background{
margin-left: -390px;
width: 0px;
}
.mega-menu:hover + .nav-background{
width: 293px;
}
.mega-menu > li{
margin-right: -32px;
}
.mega-menu li > div{
width: 0;
}
.mega-menu .level-first:hover > .box-second{
width: 293px;
overflow: visible;
}
.mega-menu .level-second:hover > .box-third{
width: 293px;
overflow: auto;
}
.mega-menu ul{
width: 293px;
padding-left: 36px;
padding-right: 26px;
padding-top: 171px;
padding-bottom: 171px;
}
.mega-menu ul li{
margin-right: -26px;
}
.mega-menu .level-first > div{
left: 50%;
margin-left: -390px;
}
.mega-menu .level-second > div{
left: 100%;
}
.mega-menu .label:after{
right: 26px;
}
nav .login{
margin-bottom: 34px;
}
nav .pict{
margin-bottom: 34px;
}
nav .pict img.is-pc{
display: inline !important;
}
nav .pict img.is-sp{
display: none !important;
}
nav .nav{
margin-bottom: 34px;
}
}
@media print, screen and (max-width:959px){
.mega-menu .level-first > div{
background-color: #F7D1DB;
}
.mega-menu .level-second > div{
background-color: #DC426A;
}
nav .logo{
width: 44%;
}
nav .logo img{
width: 100%;
}
.mega-menu{
margin-bottom: 2.047vw;
}
nav .login{
margin-bottom: 7.047vw;
}
nav .pict{
margin-bottom: 7.447vw;
}
nav .nav{
margin-bottom: 6.447vw;
}
.social-icons svg{
width: 7%;
}
.sp-nav{
position: fixed;
top: 0;
bottom: 0;
right: -100%;
width: 68.115vw;
background-color: #fff;
z-index: 100;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.sp-nav .scroll-area{
padding: 4.347vw 4.347vw;
}
.sp-nav,.mega-menu .js-nav{
overflow: auto;
height: 100%;
}
.sp-nav.active{
right: 0;
}
.sp-nav.active + .bg{
position: fixed;
display: block;
z-index: 98;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0);
-webkit-animation: .2s forwards bg;
animation: .2s forwards bg;
}
@-webkit-keyframes bg {
0% {
background: rgba(0,0,0,0);
}
100% {
background: rgba(0,0,0,0.3);
}
}
@keyframes bg {
0% {
background: rgba(0,0,0,0);
}
100% {
background: rgba(0,0,0,0.3);
}
}
.sp-nav .js-close{
position: absolute;
display: block;
width: 8.7vw;
height: 8.7vw;
top: 4.637vw;
right: 2.447vw;
z-index: 100;
}
.sp-nav.active .js-close:before{
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 31.885vw;
height: 100%;
}
.js-tgl-nav{
background: red;
display: block;
position: absolute;
right: 0;
top: 0;
width: 14.5vw;
height: 100%;
background: url(../svg/js-tgl-nav.svg) no-repeat center center;
background-size: 5.217vw;
}
.loggedIn .js-tgl-nav{
top: auto;
bottom: 0;
height: 14vw;
}
.mega-menu .label:after{
right: 0;
}
.sp-nav:before,
.mega-menu .box-second:before,
.mega-menu .box-third:before{
content: "";
background: url(../svg/js-close.svg) no-repeat center center;
background-size: 4.637vw;
width: 8.7vw;
height: 8.7vw;
position: absolute;
top: 4.637vw;
right: 2.447vw;
}
.sp-nav:before{
z-index: 2;
}
.mega-menu .box-third:before{
background: url(../svg/js-close-w.svg) no-repeat center center;
background-size: 4.637vw;
}
.mega-menu .box-second,
.mega-menu .box-third{
position: fixed;
top: 0;
bottom: 0;
right: -100%;
width: 68.115vw;
z-index: 2;
-webkit-transition: .2s;
transition: .2s;
}
.mega-menu .box-second ul,
.mega-menu .box-third ul{
padding: 20.347vw 4.347vw 4.347vw;
min-height: calc(100% - 15vw);
}
.mega-menu .box-second.active,
.mega-menu .box-third.active{
right: 0;
}
.mega-menu .js-back{
display: block;
padding: 3.147vw;
font-weight: bold;
}
.mega-menu .box-second .js-back{
background-color: #F7D1DB;
}
.mega-menu .box-third .js-back{
background-color: #DC426A;
}
.mega-menu .js-back:before{
content: "";
display: inline-block;
width: 1em;
height: 1em;
line-height: 1.4;
cursor: pointer;
background: url('data:image/svg+xml;utf8,') no-repeat center center;
background-size: 0.4em;
vertical-align: -0.15em;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.mega-menu .box-third .js-back{
color: #fff;
}
.mega-menu .box-third .js-back:before{
background-image: url('data:image/svg+xml;utf8,');
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
.sp-nav.active .js-close:before{
width: 72vw;
}
}
/*header*/
header{
background: #fff;
}
header > div > div{
display: inline-block;
height: 100%;
}
header .bnr{
position: relative;
}
header .bnr-container a:hover{
opacity: .7;
}
header .bnr-container{
overflow: hidden;
max-height: 100%;
}
header .bnr-container img{
height: 100%;
}
header form{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.search{
width: 40%;
}
.search-container{
width: 62.8%;
position: relative;
margin: auto;
padding-top: 9.525%;
}
.search-wrap{
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.ipt-search{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: #F5F3F3 1px solid;
background-color: #F5F3F3;
border-radius: 100px;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 1.2em;
padding-right: 2.2em;
}
.smt-search{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
display: block;
border: none;
background: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 50%;
right: 0%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
line-height: 1;
}
#icon_search{
width: 60%;
vertical-align: middle;
}
header .nav{
width: 12%;
}
header .nav > .tgl{
cursor: pointer;
position: relative;
}
header .nav > .tgl .logo{
width: 80%;
}
header .nav > .tgl .arr{
width: 14%;
}
header .nav ul{
position: absolute;
background: #F7D1DB;
padding: 0.4em 2em;
overflow: hidden;
display: none;
right: 0;
z-index: 3;
}
header .usr_name{
display: inline-block;
margin-right: 2em;
vertical-align: 0.1em;
}
header .usr_name span{
font-size: 85.714%;
}
header .usr_name strong{
margin: 0 0.2em;
}
header .btns{
display: inline-block;
padding-top: 0.2em;
}
header .btns .pale-btn{
font-size: 85.714%;
padding: 0.4em 0.8em 0.4em;
margin-right: 0.6em;
}
.sp-loggedin-header{
display: none;
}
.sp-loggedin-header > .usr_name{
font-size: 71.4%;
vertical-align: -0.2em;
}
.sp-loggedin-header > .usr_name strong{
padding-left: 0.3em;
padding-right: 0.3em;
font-size: 120%;
}
.sp-loggedin-header > .btns{
margin-top: -0.1em;
text-align: right;
}
.sp-loggedin-header > .btns a{
font-size: 71.4%;
padding: 0.4em 0.4em 0.4em;
margin-right: 0.6em;
}
.sp-loggedin-header > .btns a:last-child{
margin-right: 0;
}
@media print, screen and (min-width:960px){
header .nav .tgl:hover ul{
display: block;
}
}
@media print, screen and (max-width:959px){
header .nav .tgl.active ul{
display: block;
}
.loggedIn header .bnr{
display: none;
}
.loggedIn .sp-loggedin-header{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 2;
}
}
@media print, screen and (max-width:519px){
header{
padding-bottom: 0;
}
}
header .nav ul li{
padding: 0.8em 0;
list-style: none;
border-bottom: #fff8fa 1px solid;
}
header .nav ul li:last-child{
border-bottom: none;
}
header .nav ul a{
display: block;
font-weight: bold;
text-decoration: none;
position: relative;
}
header .nav ul a span,
header .nav ul a small{
display: block;
white-space: nowrap;
max-width: 100%;
}
header .nav ul a small{
font-weight: normal;
font-size: 71.428%;
padding-bottom: 0.3em;
white-space: normal;
}
header .nav ul a:after{
content: "";
background: url(../svg/i-blank.svg) no-repeat center center;
background-size: contain;
position: absolute;
right: 0;
width: 0.8em;
height: 0.8em;
top: auto;
bottom: 0.4em;
}
header .nav ul a:hover:after{
background: url(../svg/i-blank-i.svg) no-repeat center center;
background-size: contain;
}
@media print, screen and (min-width:960px){
header > div{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
max-width: 100%;
}
header > div > div{
height: 100%;
}
header .smt-search{
width: 15.7%;
height: 100%;
text-align: center;
}
header .nav .tgl > div{
top: 0;
right: 0;
padding-top: 0.8em;
}
}
@media print, screen and (min-width:960px) and (max-width:1365px){
header{
padding-top: 1.0248vw;
padding-bottom: 1.0248vw;
}
header .bnr{
width: 37.1156vw;
}
header .nav{
width: 7.467vw;
}
header .nav > .tgl{
padding-top: 0.8052vw;
}
header .nav ul{
width: 21.449vw;
}
}
@media print, screen and (min-width:1366px){
header{
padding-top: 14px;
padding-bottom: 14px;
}
header .bnr{
width: 507px;
}
header .nav{
width: 102px;
}
header .search{
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header .nav > .tgl{
padding-top: 11px;
}
header .nav ul{
width: 293px;
}
header .nav .tgl > div{
padding-top: 0.9em;
}
}
@media print, screen and (max-width:959px){
.loggedIn header{
margin-top: 23vw;
}
header > div > div{
height: auto;
}
header .smt-search{
width: 15.7%;
height: 100%;
text-align: center;
}
.smt-search{
width: 15.7%;
margin: 0;
padding: 0;
height: 100%;
text-align: center;
}
nav .smt-search{
width: 22.6%;
padding: 0 1vw;
}
#icon_search {
width: 57.4%;
}
nav .search{
width: 69.615vw;
margin: 0;
background-color: #fff;
padding: 4.347vw 28.193% 1.647vw 4.347vw;
}
nav .search-container{
width: 100%;
padding-top: 21.212%;
}
.search-wrap{
}
input[type="search"].ipt-search{
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 1em;
}
header .bnr{
width: 100%;
margin-bottom: 3.3vw;
}
header .search{
width: 59.348vw;
}
header .nav{
width: 27.536vw;
padding-top: 1vw;
float: right;
position: relative;
}
header .nav img{
width: 100%;
}
header .search-container{
width: 100%;
padding-top: 17%;
}
header .smt-search{
width: 20%;
padding: 0 2.1vw;
}
header .nav ul{
right: -4.347vw;
top: 13.446vw;
width: 68.115vw;
z-index: 10;
padding: 2vw 4.347vw;
}
header .nav > ul a{
padding-right: 1.4em;
font-size: 95%;
}
}
/*footer*/
footer .pagetop{
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
padding-top: 11px;
-webkit-transition: 0s;
transition: 0s;
}
footer .pagetop a{
display: block;
width: 14.29%;
margin: auto;
-webkit-transition: 0s;
transition: 0s;
}
footer .pagetop img{
height: 100%;
}
.copyright{
position: relative;
color: #CDC6C6;
}
.copyright aside span{
display: inline-block;
white-space: nowrap;
font-family: 'DINPro';
}
@media print, screen and (min-width:520px){
.copyright{
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.copyright aside{
font-size: 50%;
margin-top: -20em;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
footer .pagetop{
padding-top: 0.8052vw;
bottom: -0.3125vw;
}
}
@media print, screen and (min-width:1366px){
footer .pagetop{
bottom: -4px;
}
}
@media print, screen and (max-width:519px){
footer .pagetop{
position: fixed;
left: auto;
right: 4.347vw;
bottom: 4.347vw;
width: 5.797vw;
padding-top: 1%;
border-radius: 0.4em;
-webkit-transition: 0s;
transition: 0s;
overflow: hidden;
background: #fff;
}
footer .pagetop a{
width: 40%;
margin-bottom: -130%;
-webkit-transition: 0s;
transition: 0s;
}
.svg-pagetop-bar{
display: none;
}
.copyright aside{
text-align: center;
font-size: 60%;
padding: 4.347vw 0;
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
nav{
z-index: 81;
}
nav .logo {
width: 16.419%;
}
.js-tgl-nav{
width: 13.376vw;
background-size: 2.717vw;
}
.info header{
margin-top: 10.5vw;
padding-top: 0;
padding-bottom: 0;
}
header .inner{
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.info header .is-sp{
display: none !important;
}
.info header .is-pc{
display: block !important;
}
header .bnr{
width: 58%;
margin-bottom: 0;
}
header .search{
width: 26%;
height: 3.824vw;
padding-left: 3.2vw;
}
header .search-container{
padding-top: 19.1%;
}
header .smt-search{
padding: 0 0.7vw;
}
header .nav{
width: 16%;
padding-left: 2.3vw;
padding-top: 0.558vw;
}
header .nav ul{
top: 6.6vw;
right: 0;
width: 28vw;
z-index: 10;
padding: 1.4vw 2.347vw;
}
body.index main section {
padding-right: 1vw !important;
}
.sp-nav{
width: 28vw;
}
nav .search{
width: 100%;
padding: 1.347vw 28.193% 1.347vw 1.347vw;
}
nav .smt-search{
padding: 0 0.5vw;
}
.sp-nav .js-close{
top: 0;
right: 0;
width: 5.7vw;
height: 5.7vw;
}
.sp-nav:before, .mega-menu .box-second:before, .mega-menu .box-third:before{
top: 0;
right: 0;
width: 5.7vw;
height: 5.7vw;
background-size: 1.737vw;
}
.sp-nav .scroll-area{
padding: 1.347vw 1.347vw;
}
nav .login,
nav .pict,
nav .nav{
margin-bottom: 1.747vw;
}
.mega-menu .box-second, .mega-menu .box-third{
width: 28vw;
}
.mega-menu .box-second ul, .mega-menu .box-third ul{
padding: 7.347vw 1.347vw 1.347vw;
min-height: calc(100% - 5vw);
}
.mega-menu .js-back{
padding: 1.347vw 1.347vw;
}
}
/*##################################################
ACTION MODULE
##################################################*/
/*ani*/
.ani-square.play:before{
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
left: 0;
top: 0;
background-color: #F5F3F3;
-webkit-animation: .6s 1s ani-square forwards;
animation: .6s 1s ani-square forwards;
z-index: -1;
}
.recipe-area .ani-square.play:before{
-webkit-animation: .6s 1s ani-square-small forwards;
animation: .6s 1s ani-square-small forwards;
}
.ani-square.played:before{
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
left: 0;
top: 0;
background-color: #F5F3F3;
z-index: -1;
}
body.index .ani-square.played:before{
top: 0;
right: -91px;
}
.ani-square.ani-right.played:before{
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
left: auto;
right: -91px;
top: 0;
background-color: #F5F3F3;
z-index: -1;
}
.ani-square.ani-right.play:before{
left: auto;
right: 0;
}
.ani-square > div{
position: relative;
z-index: 2;
}
@media print, screen and (max-width:519px){
.ani-square.play:before{
left: -4.347vw;
}
.ani-square.play.play-pc:before{
display: none;
}
@-webkit-keyframes ani-square {
0% {
width: 0;
height: 0;
}
100% {
width: 85vw;
height: 85vh;
}
}
@keyframes ani-square {
0% {
width: 0;
height: 0;
}
100% {
width: 85vw;
height: 85vh;
}
}
.ani-square.played:before{
display: none;
}
section.ani-square.played:before{
display: none;
}
.ani-square.ani-right.played:before{
right: -4.347vw;
width: 79.7vw;
height: 88vh;
}
.recipe-area .ani-square.ani-right.played:before{
display: none;
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
.ani-square.play:before{
left: -4.347vw;
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
@-webkit-keyframes ani-square {
0% {
width: 0;
height: 0;
}
100% {
width: 50vw;
height: 50vw;
max-height: 100%;
}
}
@keyframes ani-square {
0% {
width: 0;
height: 0;
}
100% {
width: 50vw;
height: 50vw;
max-height: 100%;
}
}
@-webkit-keyframes ani-square-small {
0% {
width: 0;
height: 0;
}
100% {
width: 28.9165vw;
height: 28.9165vw;
max-height: 100%;
}
}
@keyframes ani-square-small {
0% {
width: 0;
height: 0;
}
100% {
width: 28.9165vw;
height: 28.9165vw;
max-height: 100%;
}
}
.ani-square.played:before{
width: 65.3vw;
height: 65.3vw;
left: -4.4vw;
max-height: 100%;
}
.ani-square.ani-right.played:before{
width: 28.9165vw;
height: 28.9165vw;
right: -0.6617vw;
max-height: 100%;
}
.ani-square.ani-right.play:before{
right: -0.6617vw;
}
.product-Layout.ani-square.played:before{
left: auto;
right: -7.6vw;
}
}
@media print, screen and (min-width:960px) and (max-width:1365px){
@-webkit-keyframes ani-square {
0% {
width: 0;
height: 0;
}
100% {
width: 50vw;
height: 50vw;
max-height: 100%;
}
}
@keyframes ani-square {
0% {
width: 0;
height: 0;
}
100% {
width: 50vw;
height: 50vw;
max-height: 100%;
}
}
@-webkit-keyframes ani-square-small {
0% {
width: 0;
height: 0;
}
100% {
width: 28.9165vw;
height: 28.9165vw;
max-height: 100%;
}
}
@keyframes ani-square-small {
0% {
width: 0;
height: 0;
}
100% {
width: 28.9165vw;
height: 28.9165vw;
max-height: 100%;
}
}
.ani-square.played:before{
width: 50vw;
height: 50vw;
max-height: 100%;
}
.ani-square.ani-right.played:before{
width: 28.9165vw;
height: 28.9165vw;
right: -0.6617vw;
max-height: 100%;
}
.product-Layout.ani-square.played:before{
left: auto;
right: -3.2vw;
}
}
@media print, screen and (min-width:1366px){
@-webkit-keyframes ani-square {
0% {
width: 0;
height: 0;
}
100% {
width: 683px;
height: 683px;
max-height: 100%;
}
}
@keyframes ani-square {
0% {
width: 0;
height: 0;
}
100% {
width: 683px;
height: 683px;
max-height: 100%;
}
}
@-webkit-keyframes ani-square-small {
0% {
width: 0;
height: 0;
}
100% {
width: 395px;
height: 395px;
max-height: 100%;
}
}
@keyframes ani-square-small {
0% {
width: 0;
height: 0;
}
100% {
width: 395px;
height: 395px;
max-height: 100%;
}
}
.ani-square.played:before{
width: 683px;
height: 683px;
max-height: 100%;
}
.ani-square.ani-right.played:before{
width: 395px;
height: 395px;
max-height: 100%;
}
.product-Layout.ani-square.played:before{
left: auto;
right: -43px;
}
}
/*a*/
a{
color: #2A2C32;
}
a:hover{
color: #ce4166;
}
nav a:hover[target="_blank"]:after{
background-image: url(../svg/i-blank-i.svg);
}
/*btn*/
[class*="-btn"]{
border-radius: 0.3em;
}
.red-btn{
background-color: #DC426A;
color: #fff;
-webkit-box-shadow: 0 0.2em 0 #C6254F;
box-shadow: 0 0.2em 0 #C6254F;
-webkit-transform: translateY(-0.2em);
transform: translateY(-0.2em);
}
.gry-btn{
background-color: #615555;
color: #fff;
-webkit-box-shadow: 0 0.2em 0 #463D3D;
box-shadow: 0 0.2em 0 #463D3D;
-webkit-transform: translateY(-0.2em);
transform: translateY(-0.2em);
}
.pale-btn{
background-color: #F5F3F3;
color: #000;
-webkit-box-shadow: 0 0.2em 0 #E5E1E1;
box-shadow: 0 0.2em 0 #E5E1E1;
-webkit-transform: translateY(-0.2em);
transform: translateY(-0.2em);
}
.red-btn:after,
.gry-btn:after{
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2LjM2NCIgaGVpZ2h0PSIxMC4zNjQiIHZpZXdCb3g9IjAgMCA2LjM2NCAxMC4zNjQiPg0KICA8ZyBpZD0iaWNvbl9hcnJvdyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMzE4IDEuNDE0KSI+DQogICAgPGxpbmUgaWQ9Iue3ml8xNDYiIGRhdGEtbmFtZT0i57eaIDE0NiIgeDI9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuNzMyKSByb3RhdGUoNDUpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+DQogICAgPGxpbmUgaWQ9Iue3ml8xNDciIGRhdGEtbmFtZT0i57eaIDE0NyIgeDI9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuNzMyIDcuNTM1KSByb3RhdGUoLTQ1KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPg0KICA8L2c+DQo8L3N2Zz4NCg==');
}
.pale-btn:after{
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2LjM2NCIgaGVpZ2h0PSIxMC4zNjQiIHZpZXdCb3g9IjAgMCA2LjM2NCAxMC4zNjQiPg0KICA8ZyBpZD0iaWNvbl9hcnJvdyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMzE4IDEuNDE0KSI+DQogICAgPGxpbmUgaWQ9Iue3ml8xNDYiIGRhdGEtbmFtZT0i57eaIDE0NiIgeDI9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuNzMyKSByb3RhdGUoNDUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+DQogICAgPGxpbmUgaWQ9Iue3ml8xNDciIGRhdGEtbmFtZT0i57eaIDE0NyIgeDI9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuNzMyIDcuNTM1KSByb3RhdGUoLTQ1KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPg0KICA8L2c+DQo8L3N2Zz4NCg==');
}
.red-btn:hover{
color: #fff;
-webkit-box-shadow: 0 0 0 #C6254F;
box-shadow: 0 0 0 #C6254F;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.gry-btn:hover{
color: #fff;
-webkit-box-shadow: 0 0 0 #463D3D;
box-shadow: 0 0 0 #463D3D;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.pale-btn:hover{
color: #000;
-webkit-box-shadow: 0 0 0 #E5E1E1;
box-shadow: 0 0 0 #E5E1E1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.wht-btn{
border: #ddd 1px solid;
background-color: #fff;
-webkit-box-shadow: 0 0.2em 0 rgba(0,0,0,.2);
box-shadow: 0 0.2em 0 rgba(0,0,0,.2);
-webkit-transform: translateY(-0.2em);
transform: translateY(-0.2em);
}
.wht-btn:hover{
-webkit-box-shadow: 0 0 0 rgba(0,0,0,.2);
box-shadow: 0 0 0 rgba(0,0,0,.2);
-webkit-transform: translateY(0);
transform: translateY(0);
}
/*##################################################
BLOCK MODULE
##################################################*/
/*breadcrumb*/
.breadcrumb a{
color: #00ABBB;
}
.breadcrumb li:after{
content: "";
display: inline-block;
width: 1em;
height: 1em;
padding: 0 .7em;
background-position: center center;
background-repeat: no-repeat;
background-size: 0.3em;
vertical-align: -0.1em;
background-image: url('data:image/svg+xml;utf8,');
}
/*cautions-information*/
.info main > .cautions-information{
padding-top: 0;
}
.cautions-information h3{
font-size: 171.4%;
}
.cautions-information .block{
margin: 0;
}
.cautions-information .-row{
position: relative;
padding: 2.4em;
}
.cautions-information .-row:before{
content: "";
display: block;
position: absolute;
background-color: #F5F3F3;
height: 100%;
width: 78.237%;
top: 0;
left: 0;
}
.cautions-information .col{
position: relative;
z-index: 2;
letter-spacing: 0;
}
.cautions-information .caution{
padding-right: 1.4em;
}
.cautions-information .info{
background-color: #fff;
border-radius: 1em;
padding: 1.8em 0.9em;
}
@media print, screen and (max-width:519px){
section.cautions-information{
width: auto;
}
.cautions-information .-row{
padding: 4.347vw;
}
.cautions-information .-row:before{
width: 100%;
height: 80%;
}
.cautions-information h3{
font-size: 186.91%;
}
.cautions-information .caution{
padding-right: 0;
padding-bottom: 4.347vw;
}
.cautions-information .info{
padding: 4.347vw;
}
.cautions-information .rich-area{
font-size: 85.714%;
}
}
/*layout*/
[class*="-Layout"] a{
color: #00ABBB;
}
[class*="-Layout"] a[class*="-btn"]{
color: #fff;
}
[class*="-Layout"] .price-area a[class*="-btn"]:after{
vertical-align: -1px;
}
[class*="-Layout"] a.pale-btn,
[class*="-Layout"] a.wht-btn{
color: inherit;
}
[class*="-Layout"] mark{
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #F7D1DB));
background: -webkit-linear-gradient(transparent 60%, #F7D1DB 60%);
background: linear-gradient(transparent 60%, #F7D1DB 60%);
font-weight: bold;
}
/*tip*/
.tip-new:before{
border-radius: 0.3em;
background-color: #DC426A;
}
/*
photo-layouts
*/
main .img > a{
border-radius: 1em;
-webkit-box-shadow: 0.714em 0.714em 0 rgba(0,0,0,0.05);
box-shadow: 0.6em 0.6em 0 rgba(0,0,0,0.05);
}
main .img > img{
border-radius: 1em;
overflow: hidden;
}
main .img.movie{
border-radius: 1em !important;
overflow: hidden;
-webkit-box-shadow: 0.714em 0.714em 0 rgba(0,0,0,0.05);
box-shadow: 0.6em 0.6em 0 rgba(0,0,0,0.05);
-webkit-transition: 0.1s;
transition: 0.1s;
}
.rich-area ul.li-type-chk li:before{
background-image: url(../svg/i-chk.svg);
}
.rich-area ul.li-type-cross li:before{
background-image: url(../svg/i-cross.svg);
}
.halfPhoto-Layout.relations > div{
border-radius: 1em;
border: #E5E1E1 1px solid;
overflow: hidden;
}
.halfPhoto-Layout.relations .img a,
.halfPhoto-Layout.relations .img img{
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.halfPhoto-Layout.relations .img a:hover{
-webkit-transform: none;
transform: none;
opacity: 0.8;
}
@media print, screen and (min-width:520px){
main .img > a:hover,
main .img.movie:hover{
-webkit-transform: translate(0.714em,0.714em);
transform: translate(0.714em,0.714em);
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.05);
box-shadow: 0 0 0 rgba(0,0,0,0.05);
}
}
@media print, screen and (max-width:519px){
main .img > a,
main .img.movie{
-webkit-box-shadow: 0.3em 0.3em 0 rgba(0,0,0,0.05);
box-shadow: 0.3em 0.3em 0 rgba(0,0,0,0.05);
border-radius: 0.5em;
}
main .img {
margin-bottom: 0.3em;
}
}
/*
h-Layout
*/
.h-Layout small{
font-size: 83.33%;
font-weight: bold;
}
[class*="-Layout"] h2{
display: block;
position: relative;
color: #DC426A;
padding: 0.3em 0;
margin-bottom: 0;
}
[class*="-Layout"] h2:before,
[class*="-Layout"] h2:after{
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 0.16em;
}
[class*="-Layout"] h2:before{
width: 100%;
background-color: #E5E1E1;
border-radius: 0 2px 2px 0;
}
[class*="-Layout"] h2:after{
width: 1.3em;
background-color: #DC426A;
border-radius: 3px 0 0 3px;
}
[class*="-Layout"] h3{
display: block;
position: relative;
padding-left: 0.8em;
margin-bottom: 0.5em;
margin-top: 1em;
}
[class*="-Layout"] h3:before{
content: "";
position: absolute;
top: 50%;
left: 0;
min-height: 1em;
width: 3px;
border-radius: 4px;
background-color: #DC426A;
height: calc(100% - 0.6em);
margin: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[class*="-Layout"].h4-Layout{
padding-bottom: 0.5em;
}
[class*="-Layout"].h2-Layout + [class*="-Layout"].h3-Layout{
padding-top: 0;
}
@media print, screen and (max-width:519px){
[class*="-Layout"] h2{
padding: 0;
line-height: 1.5;
padding-bottom: 0.6em;
}
[class*="-Layout"] h3{
margin-bottom: 1em;
}
}
/*
box-Layout
*/
.editor-layouts [class*="-box-Layout"] > div{
border-radius: 1em;
}
.editor-layouts .wht-box-Layout > div{
border: #E5E1E1 1px solid;
background-color: #fff;
}
.editor-layouts .gry-box-Layout > div{
border: #F5F3F3 1px solid;
background-color: #F5F3F3;
}
.editor-layouts .red-box-Layout > div{
border: #FBF2F6 1px solid;
background-color: #FBF2F6;
}
.red-box-Layout{
color: #DC426A;
font-weight: bold;
}
body.info section .editor-layouts .border.gry-box-Layout > div{
border-color: #dbd7d7;
}
body.info section .editor-layouts .border.red-box-Layout > div{
border-color: #eacbd9;
border-width: 1px;
}
/*
spacer-Layout
*/
hr.bar:before{
content: "";
position: absolute;
left: 0%;
top: 50%;
width: 100%;
height: 1px;
margin-top: -1px;
border-radius: 100px;
background: #E5E1E1;
}
hr.bar:after{
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6.5em;
height: 3px;
margin-left: -3.25em;
margin-top: -2px;
border-radius: 100px;
background: #CDC6C6;
}
/*
product-Layout
*/
/*graph*/
.graph > div{
background: url(../img/graph-bg.gif) no-repeat center center;
background-size: contain;
}
/*price-area*/
[class*="product-Layout"].is_border .Layout-inner{
border: #E5E1E1 1px solid;
border-radius: 1em;
padding: 1.875em;
}
[class*="product-Layout"] .price-area{
border-top: #E5E1E1 1px dashed;
}
[class*="product-Layout"] .price-area p strong{
color: #DC426A;
}
/*banner*/
.banner-product-Layout .Layout-inner > .-row{
border: #E5E1E1 1px solid;
border-radius: 1em;
overflow: hidden;
}
@media print, screen and (max-width:519px){
[class*="product-Layout"] .price-area {
border-top: none;
}
}
/*
talk-Layout
*/
.editor-layouts [class*="-talk-Layout"] .bubble{
border-radius: 1em;
}
.editor-layouts .gry-talk-Layout .bubble{
border: #F5F3F3 1px solid;
background-color: #F5F3F3;
}
.editor-layouts .em-talk-Layout .bubble{
border: #FBF2F6 1px solid;
background-color: #FBF2F6;
}
.editor-layouts .gry-talk-Layout.face-left .bubble:after{
border-top: 0.8em solid transparent;
border-bottom: 0.8em solid transparent;
border-right: 1.6em solid #F5F3F3;
right: 100%;
}
.editor-layouts .gry-talk-Layout.face-right .bubble:after{
border-top: 0.8em solid transparent;
border-bottom: 0.8em solid transparent;
border-left: 1.6em solid #F5F3F3;
left: 100%;
}
.editor-layouts .em-talk-Layout.face-left .bubble:after{
border-top: 0.8em solid transparent;
border-bottom: 0.8em solid transparent;
border-right: 1.6em solid #FBF2F6;
right: 100%;
}
.editor-layouts .em-talk-Layout.face-right .bubble:after{
border-top: 0.8em solid transparent;
border-bottom: 0.8em solid transparent;
border-left: 1.6em solid #FBF2F6;
left: 100%;
}
@media print, screen and (max-width:519px){
.editor-layouts .gry-talk-Layout.face-left .bubble:after{
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-right: 1em solid #F5F3F3;
}
.editor-layouts .gry-talk-Layout.face-right .bubble:after{
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 1em solid #F5F3F3;
}
.editor-layouts .em-talk-Layout.face-left .bubble:after{
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-right: 1em solid #FBF2F6;
}
.editor-layouts .em-talk-Layout.face-right .bubble:after{
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 1em solid #FBF2F6;
}
}
/*
table-Layout
*/
.editor-layouts th,
.editor-layouts td{
border: #E5E1E1 1px solid;
}
.editor-layouts th{
color: #fff;
background-color: #615555;
}
.editor-layouts td.label{
border-right: #DC426A 2px solid;
background-color: #F5F3F3;
}
@media print, screen and (max-width:519px){
.sp-flex-Layout .tbl-fix td.label{
border-right: #E5E1E1 1px solid;
border-bottom: #DC426A 0.1px solid;
}
}
/*
button-Layout
*/
/*
step-Layout
*/
.step-Layout .col.step{
background-color: #DC426A;
color: #fff;
border-radius: 0.5em 0 0 0.5em;
}
.step-Layout .col.label{
background-color: #F5F3F3;
border-bottom: #DC426A 2px solid;
border-radius: 0 0.5em 0 0;
}
.step-Layout .col.img > div{
background-color: #615555;
}
/*
stronger-Layout
*/
.stronger-Layout > div{
background-color: #DC426A;
border-radius: 1em;
}
/*
writer-Layout
*/
.writer-Layout .Layout-inner > div{
border-radius: 1em;
background-color: #F5F3F3;
}
.writer-Layout h4{
padding-left: 2.8em;
}
.writer-Layout h4:before{
content: "";
display: block;
position: absolute;
left: 0;
top: 50%;
width: 1.4em;
height: 0.2em;
border-radius: 4px;
background-color: #DC426A;
overflow: hidden;
margin-top: -0.15em;
}
@media print, screen and (max-width:519px){
.writer-Layout h4{
padding-left: 2em;
}
.writer-Layout h4:before{
height: 0.3em;
border-radius: 6px;
}
}
/*recipe custom*/
.text-Layout.genka strong{
font-size: 200%;
}
/*ranking*/
.resultArea{
margin-bottom: 2em;
}
.resultArea .data-01 ul{
padding-left: 0;
}
.resultArea .data-01 ul li{
list-style: none;
}
.resultArea .h-Layout{
padding-bottom: 0;
}
.resultArea .h-Layout h3{
margin-bottom: 0;
}
.resultArea [class*="product-Layout"] .img > a{
width: 100%;
}
#simple-Layout.magazine .block{
margin-left: auto;
margin-right: auto;
}
.resultArea .product-Layout .title{
margin-bottom: 0.5em;
}
.filterArea .button-Layout.rankingBtn,
.resultArea .text-Layout.empty{
xpadding-top: 3em;
padding-bottom: 3em;
}
/*magazine*/
#simple-Layout.magazine section{
width: 800px;
margin: auto;
max-width: 100%;
}
#simple-Layout.magazine #header,
#simple-Layout.magazine #container,
#simple-Layout.magazine #footer{
width: 600px;
padding-left: 0;
padding-right: 0;
}
#simple-Layout.magazine a[target="_blank"]:after{
display: none !important;
}
/*pagenation*/
.pagenation .Layout-inner div,
.pagenation .inner div{
text-align: center;
font-size: 120%;
}
.pagenation a,
.pagenation span{
display: inline-block;
line-height: 1;
width: 1em;
height: 1em;
text-align: center;
margin: 0.4em;
vertical-align: top;
}
.pagenation .page-before,
.pagenation .page-next,
.pagenation .link_before,
.pagenation .link_next{
background-color: #DC426A;
border-radius: 50%;
text-indent: -999%;
overflow: hidden;
position: relative;
}
.pagenation .page-before:after,
.pagenation .page-next:after,
.pagenation .link_before:after,
.pagenation .link_next:after{
content: "";
display: inline-block;
width: 1em;
height: 1em;
background-position: center center;
background-repeat: no-repeat;
background-image: url(../svg/i-arr-next-w.svg);
background-size: 0.3em;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.pagenation .page-before:after,
.pagenation .link_before:after{
-webkit-transform: rotate(180deg) translate(50%,50%);
transform: rotate(180deg) translate(50%,50%);
}
.pagenation .page-current,
.pagenation .current_page{
color: #DC426A;
}
.pagenation .page-link,
.pagenation .link_page{
color: #F7D1DB;
}
.pagenation .page-link:hover,
.pagenation .link_page:hover{
color: #DC426A;
}
/*######################################
TOP PAGE
######################################*/
body.index main section{
padding-right: 0;
}
body.index main hr.bar{
height: 0;
overflow: visible;
}
/*important*/
body.index #important{
border-radius: 0.8em;
border: 3px #F7D1DB solid;
}
body.index.info #important .head{
width: 228px;
font-size: 142.857%;
padding-left: 1em;
line-height: 1.6;
}
body.index.info #important .article{
font-size: 100%;
width: 672px;
flex: 1;
padding-right: 2em;
}
#important a{
color: inherit;
text-decoration: underline;
}
#important a:hover{
text-decoration: none;
}
@media print, screen and (min-width:520px) and (max-width:1365px){
body.index.info #important .head{
width: 16.691vw;
}
body.index.info #important .article{
width: 49.2339vw;
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
body.index.info #important .article{
width: 71.8339vw;
}
}
@media print, screen and (max-width:519px){
body.index main section{
margin-bottom: 0;
}
body.index.info #important .head,
body.index.info #important .article{
padding-left: 0;
padding-right: 0;
}
body.index.info #important{
padding: 1.2em 1.1em;
margin-bottom: 4.347vw;
}
body.index.info #important .head{
width: 100%;
}
body.index.info #important .article{
width: 100%;
}
}
/*bnr*/
.bnr-area .img a{
background-color: #fff;
}
@media print, screen and (min-width:520px){
.bnr-area .block > div.col-4{
width: 33.333%;
margin-right: 0;
}
.bnr-area .block > .col:nth-child(3n-1) .Layout-inner{
-webkit-transform: translateY(35px);
transform: translateY(35px);
}
.bnr-area .block > .col:nth-child(3n) .Layout-inner{
-webkit-transform: translateY(70px);
transform: translateY(70px);
}
section.bnr-area{
margin-bottom: 2.857em;
}
}
@media print, screen and (min-width:520px) and (max-width:1365px){
}
@media print, screen and (min-width:520px) and (max-width:959px){
.bnr-area{
padding-bottom: 1em;
}
}
@media print, screen and (max-width:519px){
main section.bnr-area .editor-layouts [class*="Photo-Layout"] .label{
max-height: 100em;
-webkit-line-clamp: 10;
}
.bnr-area{
padding-top: 4.347vw;
}
.bnr-area .block > .col{
padding-top: 0;
}
}
/*feature*/
.feature-area .h-Layout{
width: 133px;
padding-right: 0;
padding-top: 0;
margin-top: -4em;
}
.feature-area .h-Layout h2{
display: inline-block;
}
.feature-area .feature-list{
width: calc(100% - 101px);
padding: 0;
}
body.index .ani-square.ani-right.play:before{
right: -91px;
}
.feature-area .block > .text-Layout,
.feature-area .block > .button-Layout{
padding-left: 21em;
}
.feature-area .block > .text-Layout{
padding-top: 2em;
}
.feature-area .block > .button-Layout{
margin-bottom: -7em;
position: relative;
z-index: 2;
}
.feature-area .block > .button-Layout a{
}
.feature-area .block > article{
margin-bottom: 2.5em;
}
.feature-area .block > article:nth-child(3),
.feature-area .block > article:nth-child(4){
z-index: 2;
}
@media print, screen and (min-width:520px){
.feature-area .block > article:nth-child(2n) > div{
-webkit-transform: translateY(85px);
transform: translateY(85px);
}
.feature-area .block > .button-Layout{
width: 52%;
margin-left: auto;
z-index: 3;
padding-left: 0;
}
}
.feature-area [class*="Photo-Layout"] .label{
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 10;
max-height: 20em;
}
@media print, screen and (min-width:520px) and (max-width:1365px){
.feature-area .h-Layout{
width: 9.7364vw;
}
.feature-area .feature-list{
width: calc(100% - 7.3938vw);
}
body.index .ani-square.ani-right.play:before{
right: -6.6617vw;
}
.feature-area article:nth-child(2n) > div{
-webkit-transform: translateY(6.222vw);
transform: translateY(6.222vw);
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
.feature-area .editor-layouts{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.feature-area .editor-layouts > .col{
width: auto;
}
.feature-area .h-Layout{
margin-top: 0;
}
.feature-area .feature-list{
padding: 1.5373vw 2.3426vw 1.5373vw;
}
}
@media print, screen and (max-width:519px){
.feature-area .h-Layout{
margin-top: 0;
}
.feature-area .feature-list{
width: auto;
padding: 0 4.057vw 4.057vw;
}
.feature-area .block > .text-Layout, .feature-area .block > .button-Layout{
width: auto;
padding: 0 4.057vw 4.057vw;
}
.feature-area .block > .button-Layout{
text-align: center;
margin-bottom: 0;
width: 100%;
}
.feature-area .block > article{
margin-bottom: 0;
}
}
/*common-Layout*/
@media print, screen and (min-width:520px){
main > section.index-left-Layout,
main > section.index-right-Layout{
padding-top: 0;
}
.index-left-Layout .block > .head,
.index-right-Layout .block > .head{
width: 270px;
}
.index-left-Layout .block > .data,
.index-right-Layout .block > .data{
width: 700px;
}
.index-right-Layout.recipe-area .block > .data{
padding-right: 0;
}
.index-left-Layout .h-Layout,
.index-right-Layout .h-Layout{
padding-top: 0;
}
.index-left-Layout .h-Layout h2,
.index-right-Layout .h-Layout h2{
display: inline-block;
}
.index-left-Layout .head .Layout-inner{
}
.index-right-Layout .head .Layout-inner{
padding-left: 1em;
}
.index-right-Layout .block > .head{
}
.index-right-Layout .head [class*="-btn"]{
white-space: nowrap;
}
.index-right-Layout .ani-right .text-Layout{
margin-top: -2.6em;
padding-right: 0.6em;
}
.index-left-Layout .block > div.col-4{
width: 36.51%;
}
}
@media print, screen and (min-width:520px) and (max-width:1365px){
.index-left-Layout .block > .head,
.index-right-Layout .block > .head{
width: 30.1398%;
}
.index-left-Layout .block > .data,
.index-right-Layout .block > .data{
width: 69.8602%;
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
.index-left-Layout .block > .data > .block{
margin-right: 0;
}
}
@media print, screen and (max-width:519px){
.index-left-Layout .block > .head, .index-right-Layout .block > .head{
width: auto;
}
.index-left-Layout .head .Layout-inner,
.index-right-Layout .head .Layout-inner{
padding: 0;
}
}
/*product*/
@media print, screen and (max-width:519px){
main section.product-area .editor-layouts [class*="Photo-Layout"] .label{
max-height: 100em;
-webkit-line-clamp: 10;
}
.product-area{
padding-top: 4.347vw;
}
.product-area .block > .col{
padding-top: 0;
}
.product-area .block > .button-Layout{
padding-bottom: 0;
}
}
/*recipe*/
body.index .recipe-area .onePhoto-Layout{
padding-top: 0;
}
@media print, screen and (max-width:519px) {
body.index .recipe-area .h-Layout{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
body.index .recipe-area .head{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
background-color: #F5F3F3;
margin-left: 4.347vw;
padding-top: 4.347vw;
padding-bottom: 0;
margin-bottom: 4.347vw;
}
body.index .recipe-area .data{
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
body.index .recipe-area .data .block > .col{
padding-bottom: 0;
}
body.index .block > .button-Layout{
padding-top: 0;
}
}
/*ranking*/
.index-left-Layout.ranking-area .Layout-inner{
position: relative;
}
.index-left-Layout.ranking-area .thirdPhoto-Layout{
padding-top: 0;
}
.index-left-Layout.ranking-area .icon,
.index-left-Layout.ranking-area .icon img{
width: 69px;
height: 69px;
}
.index-left-Layout.ranking-area .icon{
position: absolute;
top: 0;
left: 100%;
-webkit-transform: translate(-54%,-50%);
transform: translate(-54%,-50%);
}
.index-left-Layout.ranking-area a.red-btn{
white-space: nowrap;
}
.ranking-area .select-parameter{
}
.ranking-area .select-parameter .-row > .col{
padding-bottom: 1em;
width: 35.648%;
}
.ranking-area .select-parameter p{
text-align: center;
margin: 0;
font-size: 71.428%;
}
.ranking-area .select-parameter p.label{
font-weight: bold;
}
.ranking-area .select-parameter p.parameter{
position: relative;
background-color: #efefef;
padding: 0.4em 1em;
border-radius: 100px;
}
.ranking-area .select-parameter p.parameter span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: block;
text-align: center;
}
@media print, screen and (min-width:520px){
.ranking-area .select-parameter p.parameter:after{
content: "";
width: 1em;
height: 1em;
display: block;
position: absolute;
right: -9.5%;
top: 50%;
transform: translate(-50%,-50%);
background: url(../svg/i-select-parameter.svg) no-repeat center center;
background-size: 1em;
}
.ranking-area .select-parameter .col:last-child p.parameter:after{
display: none;
}
}
@media print, screen and (min-width:520px) and (max-width:1365px){
.index-left-Layout.ranking-area .icon,
.index-left-Layout.ranking-area .icon img{
width: 5.0512vw;
height: 5.0512vw;
}
}
@media print, screen and (min-width:520px) and (max-width:919px){
.ranking-area .select-parameter{
padding-right: 1.4em;
}
}
@media print, screen and (max-width:519px){
.index-left-Layout.ranking-area .icon{
-webkit-transform: translate(-75%,-25%);
transform: translate(-75%,-25%);
}
.index-left-Layout.ranking-area .icon,
.index-left-Layout.ranking-area .icon img{
width: 11.5942vw;
height: 11.5942vw;
}
.index-left-Layout.ranking-area .block > .head{
padding-top: 0;
}
.ranking-area .select-parameter .-row > .col{
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.ranking-area .select-parameter p.parameter{
margin-bottom: 1.4em;
}
.ranking-area .select-parameter .col{
position: relative;
}
.ranking-area .select-parameter .col:after{
content: "";
width: 0.8em;
height: 0.8em;
display: block;
position: absolute;
left: 50%;
bottom: 0%;
transform: translate(-50%,-50%);
background: url(../svg/i-select-parameter.svg) no-repeat center center;
background-size: 0.8em;
}
.ranking-area .select-parameter .col:last-child:after{
display: none;
}
.ranking-area .select-parameter p{
text-align: left;
}
.ranking-area .select-parameter .label{
width: 20%;
padding: 0.4em 0;
}
.ranking-area .select-parameter .parameter{
width: 80%;
}
.ranking-area .select-parameter p.parameter span{
text-align: left;
}
.ranking-area .h-Layout{
order: 1;
}
.ranking-area .head{
order: 2;
padding-bottom: 0;
}
.ranking-area .parameter-Layout{
order: 3;
padding-bottom: 0;
padding-top: 0;
}
.ranking-area .data{
order: 4;
}
.glass-area .block .button-Layout,
.ranking-area .block .button-Layout{
text-align: center;
}
.glass-area .block .button-Layout > .Layout-inner,
.ranking-area .block .button-Layout > .Layout-inner{
display: inline-block;
text-align: left;
}
.glass-area .block .button-Layout > .Layout-inner p,
.ranking-area .block .button-Layout > .Layout-inner p{
text-align: left;
}
.ranking-area .select-parameter .-row > .col{
padding-bottom: 0.6em;
}
}
/*glass*/
.index-right-Layout.glass-area .h-Layout{
margin-bottom: 1em;
}
.index-right-Layout.glass-area .editor-layouts .col{
padding-top: 0;
}
.glass-area .wa{
margin: 0 1em;
}
.index-right-Layout.glass-area article .img a{
border: #F4F4F4 1px solid;
}
@media print, screen and (min-width:520px){
.index-right-Layout.glass-area article{
margin-right: -34px;
width: 54.762%;
}
.index-right-Layout.glass-area article .img{
position: relative;
}
.glass-area .glass_logo_area{
display: none;
}
.index-right-Layout.glass-area .editor-layouts .text-Layout{
padding-right: 0.6em;
}
}
@media print, screen and (min-width:960px) and (max-width:1365px){
.index-right-Layout.glass-area article{
margin-right: -2.489vw;
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
.index-right-Layout.glass-area article{
width: 53.662%;
margin-right: -2.489vw;
}
}
@media print, screen and (max-width:519px){
.glass-area .head{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.glass-area .data{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.index-right-Layout.glass-area .h-Layout{
margin-bottom: 0;
}
.glass-area .glass_logo_area{
padding-top: 0.6em;
}
.glass-area .glass_logo_area .-row{
-ms-flex-line-pack: center;
align-content: center;
}
.glass-area .glass_logo_area img{
vertical-align: middle;
}
.glass-area .glass_logo img{
width: auto;
height: auto;
max-width: 90%;
max-height: 1.2em;
}
.campaign-area .head{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
background-color: #F5F3F3;
margin-left: 4.347vw;
padding-top: 4.347vw;
padding-bottom: 0;
margin-bottom: 4.347vw;
}
.campaign-area .data{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.index .col.head p{
margin-bottom: 0;
}
.index .product-area .data{
padding-top: 1em;
}
.index .feature-list > div p{
margin-bottom: 0;
}
}
/*cautions-information*/
@media print, screen and (min-width:520px){
body.index .cautions-information .block{
margin-left: 0;
}
}
/*slider*/
body.index main section.main-visual{
padding-bottom: 16px;
padding-top: 5em;
}
.slider{
margin-right: -21px;
}
.slider .slick-list{
padding-right: 21px;
padding-bottom: 21px;
}
.slider .title{
width: 100%;
margin-bottom: -1.833em;
}
.mv-slider .data{
width: 229px;
padding: 4.5em 2em 0 0;
}
.slider .data .caption{
margin-bottom: 3.2em;
}
.mv-slider .img{
width: 678px;
}
.mv-slider .img img.mask{
background-size: cover;
}
.slider .title span{
font-size: 214.2857%;
position: relative;
display: inline-block;
line-height: 1.3;
color: #fff;
background-color: #615555;
padding: 0.3em 1.2em 0.3em 0.3em;
z-index: 2;
font-weight: bold;
}
.slider .title span:after{
content: "";
display: block;
width: 0.666em;
height: 0.666em;
background-color: #DC426A;
position: absolute;
right: 0;
bottom: 0;
}
main .mv-slider .img > a {
border-radius: 1em;
-webkit-box-shadow: 20px 20px 0 rgba(0,0,0,0.05);
box-shadow: 20px 20px 0 rgba(0,0,0,0.05);
}
main .mv-slider .img > a:hover {
-webkit-transform: translate(20px,20px);
transform: translate(20px,20px);
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.05);
box-shadow: 0 0 0 rgba(0,0,0,0.05);
}
.slider .slick-dots{
position: absolute;
right: 0;
bottom: 15%;
padding-right: 3.185em;
height: 0.358em;
}
.slider .slick-dots li{
list-style: none;
display: inline-block;
position: relative;
width: 1.785em;
height: 0.358em;
background: #FFF;
margin: 0 0.6em;
}
.slider .slick-dots li:before,
.slider .slick-dots li:after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 0.358em;
height: 0.358em;
border-radius: 50%;
background: #FFF;
}
.slider .slick-dots li:before{
left: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.slider .slick-dots li:after{
right: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.slider .slick-dots li button{
display: block;
text-indent: -999%;
overflow: hidden;
width: 2.143em;
height: 0.358em;
background: transparent;
opacity: 0;
}
.slider .slick-dots li.slick-active,
.slider .slick-dots li.slick-active:before,
.slider .slick-dots li.slick-active:after{
background: #DC426A;
}
.ex-slider .slick-dots li,
.ex-slider .slick-dots li:before,
.ex-slider .slick-dots li:after{
background-color: #F5F3F3;
}
.ex-slider [class*="Photo-Layout"] .label{
-webkit-line-clamp: 10;
max-height: 10em;
}
.ex-slider .slick-list{
}
@media print, screen and (min-width:520px){
.carousel-area .slider-area{
margin-left: -32px;
margin-right: -32px;
margin-top: -21px;
overflow: hidden;
}
.ex-slider .halfPhoto-Layout{
padding: 0 30px;
}
.ex-slider .slick-dots{
bottom: 0;
}
}
@media print, screen and (min-width:520px) and (max-width:1365px){
body.index main section.main-visual{
padding-bottom: 1.1713vw;
}
.slider{
margin-right: -1.5373vw;
}
.slider .slick-list{
padding-right: 1.5373vw;
padding-bottom: 1.5373vw;
}
.slider .data{
width: 25.4%;
}
.mv-slider .img{
width: 74.7519%;
margin-right: -1em;
}
main .mv-slider .img > a {
-webkit-box-shadow: 1.5373vw 1.5373vw 0 rgba(0,0,0,0.05);
box-shadow: 1.5373vw 1.5373vw 0 rgba(0,0,0,0.05);
}
main .mv-slider .img > a:hover {
-webkit-transform: translate(1.5373vw,1.5373vw);
transform: translate(1.5373vw,1.5373vw);
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.05);
box-shadow: 0 0 0 rgba(0,0,0,0.05);
}
.carousel-area .slider-area{
margin-left: -2.3426vw;
margin-right: -2.3426vw;
margin-top: -1.5373vw;
}
.ex-slider .halfPhoto-Layout{
padding: 0 2.3426vw;
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
.slider .slick-dots{
bottom: auto;
top: 38vw;
}
}
@media print, screen and (max-width:519px){
.mv-slider{
margin-right: -2.44vw;
}
body.index main section.main-visual{
padding-top: 4.347vw;
margin-bottom: 4.347vw;
}
main .mv-slider .img > a {
-webkit-box-shadow: 0.3em 0.3em 0 rgba(0,0,0,0.05);
box-shadow: 0.3em 0.3em 0 rgba(0,0,0,0.05);
}
main .mv-slider .img > a:hover {
-webkit-transform: none;
transform: none;
-webkit-box-shadow: 0.3em 0.3em 0 rgba(0,0,0,0.05);
box-shadow: 0.3em 0.3em 0 rgba(0,0,0,0.05);
}
.mv-slider .title span{
font-size: 180%;
}
.mv-slider .img{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin-bottom: 4.347vw;
width: 100%;
}
.mv-slider .title{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin-bottom: 4.347vw;
}
.mv-slider .data{
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
padding: 0;
width: 100%;
}
.mv-slider .data .caption{
margin-bottom: 4.347vw;
}
.mv-slider .slick-dots{
bottom: auto;
top: 50.4vw;
padding-right: 1.385em;
}
.slider .slick-dots li{
width: 1.645em;
margin: 0 0.5em;
}
.mv-slider .slick-list{
padding-right: 2.44vw;
padding-bottom: 0;
}
.carousel-area .data{
width: 100%;
}
.ex-slider{
width: 100%;
}
.carousel-area .slider-area{
margin-left: -4.347vw;
margin-right: -4.347vw;
margin-top: -4.347vw;
overflow: hidden;
}
.ex-slider .halfPhoto-Layout{
padding: 0 0 0 4.347vw;
}
.ex-slider .slick-list{
padding-right: 0;
}
.ex-slider .slick-dots{
padding-right: 0;
right: auto;
bottom: 3vw;
width: 100%;
text-align: center;
left: 4.347vw;
}
}
/*unchor*/
.unchor-Layout .-row{
margin: 0 -10px;
}
.unchor-Layout .col{
padding: 0 11px;
margin-bottom: 1.3em;
}
.unchor-Layout .shadow,
.unchor-Layout .elem{
display: block;
position: relative;
border-radius: 0.2em;
text-align: left;
text-align: center;
-webkit-transition: 0s;
transition: 0s;
height: 100%;
}
.unchor-Layout .shadow:after,
.unchor-Layout .elem:after{
content: "";
display: block;
position: absolute;
width: 1.2em;
height: 1.2em;
-webkit-transform: rotate(45deg) skew( calc((90deg - 50deg) / 2), calc((90deg - 50deg) / 2)) translate(-50%,50%);
transform: rotate(45deg) skew( calc((90deg - 50deg) / 2), calc((90deg - 50deg) / 2)) translate(-50%,50%);
left: 50%;
bottom: 0;
margin-bottom: -0.6em;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.unchor-Layout .shadow{
background-color: #EDEAEA;
z-index: 1;
}
.unchor-Layout .elem{
background-color: #F5F3F3;
padding: 0.75em;
-webkit-transform: translateY(-0.2em);
transform: translateY(-0.2em);
z-index: 2;
text-decoration: none;
color: #000000;
}
.unchor-Layout .shadow:after{
background-color: #EDEAEA;
border-radius: 0.5em;
border: #EDEAEA 0.3em solid;
z-index: -1;
}
.unchor-Layout .elem:after{
background-color: #F5F3F3;
}
.unchor-Layout span{
display: block;
position: relative;
z-index: 2;
text-align: center;
line-height: 1.4;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
max-height: 2.79em;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
}
@media screen and (min-width:520px){
.unchor-Layout .shadow:hover .elem{
-webkit-transform: translateY(0);
transform: translateY(0);
}
.unchor-Layout .shadow:hover:after{
border-color: #fff;
}
.unchor-Layout .shadow:hover .elem:after{
margin-bottom: -0.6em;
}
}
@media print, screen and (max-width:519px){
.unchor-Layout .col{
margin-bottom: 2em;
}
.index-unchor .block{
margin: 0;
}
body.index main section.index-unchor{
margin-bottom: 0;
}
.index-unchor .block > .unchor-Layout{
padding: 0;
}
.index-unchor .unchor-Layout .-row{
margin: 0 -2.028vw;
}
.index-unchor .unchor-Layout .col{
padding: 0 2.028vw;
margin-bottom: 1.12em;
}
.index-unchor .unchor-Layout .elem{
padding: 1vw 0;
}
.index-unchor .unchor-Layout span{
max-height: none;
min-height: 0;
padding: 0.2em 0 0.1em;
color: #615555;
}
.index-unchor .unchor-Layout span img{
display: inline-block;
width: 48%;
}
.index-unchor .unchor-Layout span.text{
font-size: 75%;
}
.index-unchor .unchor-Layout .i-lock{
position: relative;
}
.index-unchor .unchor-Layout .i-lock:before{
content: "";
display: block;
width: 1em;
height: 1em;
background: url(../svg/i-lock.svg) no-repeat center top;
background-size: 1em;
position: absolute;
right: 0;
top: -0.5em;
z-index: 2;
}
}
body.index .circle{
position: absolute;
right: 3.6%;
bottom: 15%;
width: 82px;
height: 82px;
}
body.index .circle .num{
width: 75px;
height: 75px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #fff;
border: #ce4166 1px solid;
border-radius: 50%;
color: #ce4166;
font-weight: bold;
line-height: 1;
}
body.index .circle .num span{
border-bottom: #ce4166 1px solid;
padding-bottom: 0.3em;
}
body.index .circle svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 82px;
height: 82px;
position: relative;
z-index: 2;
}
.slick-active circle {
fill: transparent;
stroke: #ce4166;
stroke-width: 4;
-webkit-animation: circle 16s forwards;
animation: circle 16s forwards;
}
@-webkit-keyframes circle {
0% { stroke-dasharray: 0 377; }
99.9%,to { stroke-dasharray: 377 377; }
}
@keyframes circle {
0% { stroke-dasharray: 0 377; }
99.9%,to { stroke-dasharray: 377 377; }
}
@media print, screen and (min-width:520px) and (max-width:1365px){
body.index .circle{
width: 6.0029vw;
height: 6.0029vw;
}
body.index .circle .num{
width: 5.4904vw;
height: 5.4904vw;
}
body.index .circle svg {
width: 6.0029vw;
height: 6.0029vw;
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
body.index .circle{
bottom: auto;
top: 28vw;
}
}
@media print, screen and (max-width:519px){
body.index .circle{
width: 11.1767vw;
height: 11.1767vw;
right: 4.6%;
bottom: 16%;
}
body.index .circle .num{
width: 10.1607vw;
height: 10.1607vw;
font-size: 75%;
}
body.index .circle svg {
width: 11.1767vw;
height: 11.1767vw;
}
}
@media print, screen and (max-width:519px){
.slick-active circle{
stroke-width: 3;
}
body.index .circle{
width: 11.0316vw;
height: 11.0316vw;
}
body.index .circle .num{
width: 10.1607vw;
height: 10.1607vw;
font-size: 75%;
}
body.index .circle svg {
width: 11.0316vw;
height: 11.0316vw;
}
}
/*add member*/
/*
.signup.page-signup .midashi01,
.signup.page-signup .dl_company,
.signup.page-signup .dl_company-kana,
.signup.page-signup .dl_code,
.signup.page-signup .dl_industry,
.signup.page-signup .dl_postal-code,
.signup.page-signup .dl_prefectures,
.signup.page-signup .dl_address,
.signup.page-signup .dl_bldg,
.signup.page-signup .midashi02,
.signup.page-signup .dl_if_sent_mail,
.signup.page-confirm .dl_if_sent_mail,
.signup.page-signup .dl_phone-number{
display: none;
}
*/
.signup.page-signup .dl_member_status{
order: 1;
margin-bottom: 3rem;
}
.signup.page-signup .midashi02{
order: 2;
}
.signup.page-signup .dl_if_sent_mail{
order: 3;
}
.signup.page-signup .dl_check-policy{
order: 4;
}
.signup.page-signup .aform-button-area{
order: 5;
}
img.mask{
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/*float_bnr*/
#bnr{
position: fixed;
z-index: 81;
}
#bnr > div{
border-radius: 1em;
background-color: #fff;
overflow: hidden;
position: relative;
margin: 0;
}
button#del{
width: auto;
display: inline-block;
position: fixed;
right: 10%;
bottom: 0;
opacity: 0.5;
z-index: 2;
}
#bnr #btn{
position: absolute;
display: block;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
padding: 1px;
margin: 0;
background: transparent;
z-index: 2;
right: 0;
top: 0;
cursor: pointer;
}
#bnr #btn img{
pointer-events: none;
}
#bnr.img a:hover{
opacity: 0.8;
}
@media print, screen and (max-width:519px){
#bnr{
width: 45.2173vw;
right: 11.3043vw;
bottom: 4.347vw;
padding: 1.7391vw 1.7391vw 0 0;
z-index: 9;
}
#bnr #btn{
width: 5.7971vw;
height: 5.7971vw;
}
}
@media print, screen and (min-width:520px) and (max-width:959px){
#bnr{
width: 19.5461vw;
right: 4.2459vw;
bottom: 2.4158vw;
padding: 0.8784vw 0.8784vw 0 0;
z-index: 9
}
#bnr #btn{
width: 2.3426vw;
height: 2.3426vw;
}
}
@media print, screen and (min-width:960px) and (max-width:1365px){
#bnr{
width: 19.5461vw;
right: 4.2459vw;
bottom: 2.4158vw;
padding: 0.8784vw 0.8784vw 0 0;
}
#bnr #btn{
width: 2.3426vw;
height: 2.3426vw;
}
}
@media print, screen and (min-width:1366px){
#bnr{
width: 267px;
bottom: 33px;
padding: 12px 12px 0 0;
right: 50%;
margin-right: -625px;
}
#bnr #btn{
width: 32px;
height: 32px;
}
}
/*simple-Layout*/
.simple-Layout{
font-size: 16px;
}
.simple-Layout .container{
width: 100%;
max-width: 1000px;
padding: 0 20px;
margin: auto;
}
@media print, screen and (max-width: 959px)
.simple-Layout main {
position: relative;
width: 100%;
padding: 3.347vw 4.347vw 3vw;
}
.simple-Layout .block > div.col-4, .simple-Layout .block > div.col-3 {
margin-right: -2.4426vw;
}
@media print, screen and (max-width:519px){
.simple-Layout .container{
padding-left: 0;
padding-right: 0;
}
}
.simple-Layout #header img{
width: 130px;
height: 46px;
}
.simple-Layout #header{
padding-top: 20px;
}
.simple-Layout main > section{
padding: 2vw;
}
@media screen and (min-width:960px){
.simple-Layout #header{
padding: 20px 20px 0;
}
.simple-Layout main > section{
padding: 20px;
}
.simple-Layout .block{
margin: 0 -30px;
}
.simple-Layout .block > div, .simple-Layout .block > article{
padding: 20px 30px 20px;
}
.simple-Layout .block > div.col-4, .simple-Layout .block > div.col-3{
margin-right: -30px;
}
.simple-Layout .aform-content form{
padding: 0;
}
.simple-Layout main{
padding: 0;
margin: 0;
}
.simple-Layout #footer{
padding-bottom: 20px;
}
}
.simple-Layout h1.super-small,
.simple-Layout #footer p{
text-align: center;
font-size: 14px;
color: #CDC6C6;
}
.simple-Layout h1.super-small{
margin: 0;
padding: 0;
text-align: center;
font-weight: normal;
}
@media print, screen and (max-width: 600px){
.simple-Layout #bnr{
width: 187px;
}
.simple-Layout #bnr #btn{
width: 22.7px;
height: 24.0px;
padding: 0;
}
.simple-Layout #bnr #btn img{
vertical-align: top;
}
}
@media print, screen and (min-width: 601px){
.simple-Layout #bnr{
width: 187px;
}
.simple-Layout #bnr #btn{
width: 22.7px;
height: 24.0px;
padding: 0;
}
.simple-Layout #bnr #btn img{
vertical-align: top;
}
}
@media print, screen and (min-width: 960px){
.simple-Layout #bnr{
width: 267px;
}
.simple-Layout #bnr #btn{
width: 32px;
height: 32px;
}
}
@media print, screen and (min-width: 1px){
body#amex #bnr{
margin-right: 0;
right: 0;
padding-right: 0;
}
body#amex #bnr > div{
background: none;
}
body#amex #bnr .block{
border-radius: 0;
}
}
@media print, screen and (min-width: 1025px){
body#amex #bnr{
bottom: auto;
top: 40%;
}
}
/*aform*/
.aform-content .dl_title,
.aform-content .dl_application-page,
.dl_formpage-id,.dl_flow-type,.dl_inherit-param{display:block !important; width: 0 !important;height: 0 !important;margin: 0 !important;padding: 0 !important;overflow: hidden !important;opacity: 0 !important;}
/*aform member_status*/
.dl_member_status .aform-input-example.member_status{
display: none;
}
.page-signup.signup .dl_member_status .aform-input-example.member_status{
display: block;
}
.page-signup.signup .dl_member_status{
}
.page-signup.signup .dl_member_status dt{
display: none;
}
.page-signup.signup .dl_member_status dd{
width: 100%;
border-color: #fff;
border-top: #E5E1E1 1px solid;
padding: 2em 0 0;
text-align: center;
}
.page-signup.signup .dl_member_status dd .caution{
background-color: #FBF2F6;
padding: 2em;
margin-bottom: 2em;
text-align: left;
}
.page-signup.signup .dl_member_status dd .caution ul{
padding-left: 1.4em;
}
.page-signup.signup .dl_member_status .aform-checkbox-ul{
display: inline-block;
}
/*page-campaign*/
.page-campaign .aform.ja + .attract-Layout{
display: none;
}
.page-campaign .aform.ja{
padding-top: 0;
}
.page-campaign .aform.ja form{
padding-top: 0;
}
/*search-results*/
.search-results header .usr_name,
.search-results header .btns,
.search-results header .bnr-container,
.search-results nav .login{
display: none;
}
/*recipes*/
.recipes .product-Layout .data-01 ul{
padding-top: 0.8em;
}
/*glass form*/
#aform-5 .midashi00{
display: none;
}
[class*="dl_item"].hidden{
overflow: hidden;
padding: 0;
margin: 0;
width: 0;
height: 0;
}
.form-page label.with_icon:before{
content: "";
display: block;
margin: auto;
width: 100%;
height: 2.1em;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.form-page .js-tab-glass label{
font-size: 93.75%;
}
.form-page .entry-header + .block .red-box-Layout > div{
border: 3px #F7D1DB solid;
}
.form-page .entry-header + .block .red-box-Layout h4{
font-size: 142.8%;
}
.aform-checkbox-ul p{
display: inline;
}
[class*="dl_chk"] li{
width: 33.3333%;
vertical-align: top;
padding: 0;
}
.aform-content [class*="dl_chk"] dd{
padding: 0;
}
.aform-confirm[class*="chk_"]{
padding: 1.1em 1.2em;
display: inline-block;
}
[class*="dl_chk"] ul,
[class*="dl_chk"] li > div{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
[class*="dl_chk"] li > div{
padding: 1em;
position: relative;
height: 100%;
align-content: flex-start;
}
[class*="dl_chk"] li span.icon-image{
display: block;
width: 100%;
padding-top: 72.37%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
[class*="dl_chk"] p{
padding-right: 0.2em;
width: 1.4em;
}
[class*="dl_chk"] p + label{
flex: 1;
font-size: 90%;
}
[class*="dl_chk"] p + label:after{
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
}
[class*="dl_chk"] li{
border-bottom: #efefef 1px solid;
border-right: #efefef 1px solid;
}
[class*="dl_chk"] li:nth-of-type(3n){
border-right: none;
}
/*特集トップ*/
.content-feature.list-page .tag-list .tags{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding-left: 2em;
padding-right: 0;
margin-right: -2.4em;
font-size: 100%;
}
.content-feature.list-page .tag-list .head{
font-size: 100%;
}
.content-feature.list-page .tag-list .head a{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: calc(100% - 0.8em);
position: relative;
margin-bottom: 0;
margin-top: 0.8em;
line-height: 1.2;
}
.content-feature.list-page .tag-list .head a:after{
content: "";
width: 0.65em;
height: 0.3em;
display: block;
position: absolute;
right: 0.4em;
bottom: 0.4em;
background: url(../svg/arrow-w.svg) no-repeat right center;
background-size: contain;
}
.content-feature.list-page .tag-list .tags a{
font-size: 100%;
margin-top: 0.8em;
margin-bottom: 0;
background-color: #F5F3F3;
-webkit-box-shadow: 0 0.2em 0 rgba(0,0,0,.2);
box-shadow: 0 0.2em 0 rgba(0,0,0,.2);
border-radius: 0.4em;
padding: 0.6em 0.94em 0.6em;
}
.content-feature.list-page .tag-list .tags a:hover{
transform: translateY(0.2em);
-webkit-box-shadow: 0 0 0 rgba(0,0,0,.2);
box-shadow: 0 0 0 rgba(0,0,0,.2);
}
.content-feature.list-page .fixed-contents{
padding-top: 1em;
}
@media print, screen and (min-width:520px) and (max-width:1365px){
.content-feature.list-page .tag-list .head{
width: 5.0512vw;
}
}
@media print, screen and (min-width:1366px){
.content-feature.list-page .tag-list .head{
width: 69px;
}
}
@media print, screen and (max-width:519px){
.content-feature.list-page .tag-list{
padding-top: 4.347vw;
}
.content-feature.list-page .tag-list .head{
width: 11.5942vw;
}
.content-feature.list-page .tag-list .tags{
font-size: 75%;
margin-right: 0;
padding-left: 1.4em;
}
.content-feature.list-page .tag-list .block > article{
padding-top: 0;
}
}
#SearchResults .ctex1,
#SearchResults .ctex24,
#SearchResults .ctex25{
display: none !important;
}
/*special content*/
#special_content.normal-user{
display: none;
}
#special_content.special-user{
display: block;
}
#is_notAuthority{
display: none;
}
#special_content.normal-user + #is_notAuthority{
display: block;
}
/*term*/
.term_block{
margin-bottom: 2em;
}
.aform-content .dl_check-policy .term_block{
margin-bottom: 1em;
text-align: left;
}
.term_block h4{
margin-bottom: 0.5em;
font-size: 100%;
}
.term_block ol,
.term_block li,
.term_block p{
margin-bottom: 0.5em;
}
.aform-content .dl_check-policy dd .term_block ol{
padding-left: 1.4em;
}
.aform-content .dl_check-policy dd .term_block li{
list-style: decimal;
text-align: left;
}
.term_block .idt,
.aform-content .dl_check-policy dd .term_block .idt{
padding-left: 1.6em;
}
.term_block .idt li,
.aform-content .dl_check-policy dd .term_block .idt li{
list-style: none;
text-indent: -1.7em;
}
.term_block .idt > li > .head{
width: 1.7em;
white-space: nowrap;
}
.term_block li > ol,
.term_block li > ul{
padding-top: 0.5em;
}
x#page-thunks .editor-layouts > .col.flow-Layout{
display: none;
}
.level-second.count-0,
.level-third.count-0,
.tags .count-0{
display: none;
}
header .search-wrap form,
main .editor-layouts .tags,
main .entry-header .tags a{
display: none !important;
}