は、width指定もしくはdisplay:inline-block */
/*-------------------------------------------*/
/* [ロールオーバーで枠線が太くなる] */
/* @MEMO */
/*
*/
/*
は、width指定もしくはdisplay:inline-block */
/*-------------------------------------------*/
/* [ロールオーバーでマーカーが伸びる(ver.1行)] */
/*-------------------------------------------*/
/* [ロールオーバーで揺らす] */
@-webkit-keyframes shakeAction {
0% {
-webkit-transform: rotate(1.2deg);
transform: rotate(1.2deg);
}
20% {
-webkit-transform: rotate(-0.8deg);
transform: rotate(-0.8deg);
}
40% {
-webkit-transform: rotate(0.4deg);
transform: rotate(0.4deg);
}
60% {
-webkit-transform: rotate(-0.75deg);
transform: rotate(-0.75deg);
}
70% {
-webkit-transform: rotate(0.375deg);
transform: rotate(0.375deg);
}
80% {
-webkit-transform: rotate(-0.25deg);
transform: rotate(-0.25deg);
}
90% {
-webkit-transform: rotate(0.125deg);
transform: rotate(0.125deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes shakeAction {
0% {
-webkit-transform: rotate(1.2deg);
transform: rotate(1.2deg);
}
20% {
-webkit-transform: rotate(-0.8deg);
transform: rotate(-0.8deg);
}
40% {
-webkit-transform: rotate(0.4deg);
transform: rotate(0.4deg);
}
60% {
-webkit-transform: rotate(-0.75deg);
transform: rotate(-0.75deg);
}
70% {
-webkit-transform: rotate(0.375deg);
transform: rotate(0.375deg);
}
80% {
-webkit-transform: rotate(-0.25deg);
transform: rotate(-0.25deg);
}
90% {
-webkit-transform: rotate(0.125deg);
transform: rotate(0.125deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes shakeActionHard {
0% {
-webkit-transform: rotate(2.4deg);
transform: rotate(2.4deg);
}
20% {
-webkit-transform: rotate(-1.6deg);
transform: rotate(-1.6deg);
}
40% {
-webkit-transform: rotate(0.8deg);
transform: rotate(0.8deg);
}
60% {
-webkit-transform: rotate(-1.5deg);
transform: rotate(-1.5deg);
}
70% {
-webkit-transform: rotate(0.7deg);
transform: rotate(0.7deg);
}
80% {
-webkit-transform: rotate(-0.5deg);
transform: rotate(-0.5deg);
}
90% {
-webkit-transform: rotate(0.25deg);
transform: rotate(0.25deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes shakeActionHard {
0% {
-webkit-transform: rotate(2.4deg);
transform: rotate(2.4deg);
}
20% {
-webkit-transform: rotate(-1.6deg);
transform: rotate(-1.6deg);
}
40% {
-webkit-transform: rotate(0.8deg);
transform: rotate(0.8deg);
}
60% {
-webkit-transform: rotate(-1.5deg);
transform: rotate(-1.5deg);
}
70% {
-webkit-transform: rotate(0.7deg);
transform: rotate(0.7deg);
}
80% {
-webkit-transform: rotate(-0.5deg);
transform: rotate(-0.5deg);
}
90% {
-webkit-transform: rotate(0.25deg);
transform: rotate(0.25deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/*-------------------------------------------*/
/* [揺らぎ演出] */
@-webkit-keyframes yuragiSSsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(5px, 9999px, 10px, 0);
}
2% {
clip: rect(10px, 9999px, 17px, 0);
}
3% {
clip: rect(15px, 9999px, 20px, 0);
}
5% {
clip: rect(0, 9999px, 5px, 0);
}
8% {
clip: rect(30px, 9999px, 40px, 0);
}
10% {
clip: rect(10px, 9999px, 20px, 0);
}
11% {
clip: rect(45px, 9999px, 50px, 0);
}
12% {
clip: rect(30px, 9999px, 40px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(10px, 9999px, 15px, 0);
}
35% {
clip: rect(15px, 9999px, 25px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiSSsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(5px, 9999px, 10px, 0);
}
2% {
clip: rect(10px, 9999px, 17px, 0);
}
3% {
clip: rect(15px, 9999px, 20px, 0);
}
5% {
clip: rect(0, 9999px, 5px, 0);
}
8% {
clip: rect(30px, 9999px, 40px, 0);
}
10% {
clip: rect(10px, 9999px, 20px, 0);
}
11% {
clip: rect(45px, 9999px, 50px, 0);
}
12% {
clip: rect(30px, 9999px, 40px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(10px, 9999px, 15px, 0);
}
35% {
clip: rect(15px, 9999px, 25px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@-webkit-keyframes yuragiSSsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(30px, 9999px, 40px, 0);
}
2% {
clip: rect(0, 9999px, 10px, 0);
}
3% {
clip: rect(10px, 9999px, 20px, 0);
}
5% {
clip: rect(5px, 9999px, 15px, 0);
}
9% {
clip: rect(10px, 9999px, 20px, 0);
}
10% {
clip: rect(40px, 9999px, 50px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(20px, 9999px, 45px, 0);
}
36% {
clip: rect(50px, 9999px, 60px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiSSsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(30px, 9999px, 40px, 0);
}
2% {
clip: rect(0, 9999px, 10px, 0);
}
3% {
clip: rect(10px, 9999px, 20px, 0);
}
5% {
clip: rect(5px, 9999px, 15px, 0);
}
9% {
clip: rect(10px, 9999px, 20px, 0);
}
10% {
clip: rect(40px, 9999px, 50px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(20px, 9999px, 45px, 0);
}
36% {
clip: rect(50px, 9999px, 60px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
@-webkit-keyframes yuragiMsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(30px, 9999px, 50px, 0);
}
2% {
clip: rect(10px, 9999px, 35px, 0);
}
3% {
clip: rect(40px, 9999px, 70px, 0);
}
5% {
clip: rect(150px, 9999px, 200px, 0);
}
8% {
clip: rect(100px, 9999px, 160px, 0);
}
10% {
clip: rect(40px, 9999px, 90px, 0);
}
11% {
clip: rect(150px, 9999px, 220px, 0);
}
12% {
clip: rect(140px, 9999px, 160px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(40px, 9999px, 50px, 0);
}
35% {
clip: rect(80px, 9999px, 100px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiMsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(30px, 9999px, 50px, 0);
}
2% {
clip: rect(10px, 9999px, 35px, 0);
}
3% {
clip: rect(40px, 9999px, 70px, 0);
}
5% {
clip: rect(150px, 9999px, 200px, 0);
}
8% {
clip: rect(100px, 9999px, 160px, 0);
}
10% {
clip: rect(40px, 9999px, 90px, 0);
}
11% {
clip: rect(150px, 9999px, 220px, 0);
}
12% {
clip: rect(140px, 9999px, 160px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(40px, 9999px, 50px, 0);
}
35% {
clip: rect(80px, 9999px, 100px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@-webkit-keyframes yuragiMsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(320px, 9999px, 350px, 0);
}
2% {
clip: rect(300px, 9999px, 335px, 0);
}
3% {
clip: rect(250px, 9999px, 270px, 0);
}
5% {
clip: rect(400px, 9999px, 420px, 0);
}
9% {
clip: rect(400px, 9999px, 420px, 0);
}
10% {
clip: rect(300px, 9999px, 340px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(490px, 9999px, 510px, 0);
}
36% {
clip: rect(540px, 9999px, 580px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiMsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(320px, 9999px, 350px, 0);
}
2% {
clip: rect(300px, 9999px, 335px, 0);
}
3% {
clip: rect(250px, 9999px, 270px, 0);
}
5% {
clip: rect(400px, 9999px, 420px, 0);
}
9% {
clip: rect(400px, 9999px, 420px, 0);
}
10% {
clip: rect(300px, 9999px, 340px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(490px, 9999px, 510px, 0);
}
36% {
clip: rect(540px, 9999px, 580px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
@-webkit-keyframes yuragiLsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(80px, 9999px, 110px, 0);
}
2% {
clip: rect(30px, 9999px, 65px, 0);
}
3% {
clip: rect(100px, 9999px, 140px, 0);
}
5% {
clip: rect(390px, 9999px, 450px, 0);
}
8% {
clip: rect(250px, 9999px, 320px, 0);
}
10% {
clip: rect(140px, 9999px, 180px, 0);
}
11% {
clip: rect(400px, 9999px, 440px, 0);
}
12% {
clip: rect(280px, 9999px, 310px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(45px, 9999px, 100px, 0);
}
35% {
clip: rect(150px, 9999px, 200px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiLsizeFrame {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(80px, 9999px, 110px, 0);
}
2% {
clip: rect(30px, 9999px, 65px, 0);
}
3% {
clip: rect(100px, 9999px, 140px, 0);
}
5% {
clip: rect(390px, 9999px, 450px, 0);
}
8% {
clip: rect(250px, 9999px, 320px, 0);
}
10% {
clip: rect(140px, 9999px, 180px, 0);
}
11% {
clip: rect(400px, 9999px, 440px, 0);
}
12% {
clip: rect(280px, 9999px, 310px, 0);
}
13% {
clip: rect(0, 9999px, 0, 0);
}
32% {
clip: rect(0, 9999px, 0, 0);
}
33% {
clip: rect(45px, 9999px, 100px, 0);
}
35% {
clip: rect(150px, 9999px, 200px, 0);
}
36% {
clip: rect(0, 9999px, 0, 0);
}
}
@-webkit-keyframes yuragiLsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(680px, 9999px, 710px, 0);
}
2% {
clip: rect(630px, 9999px, 665px, 0);
}
3% {
clip: rect(500px, 9999px, 540px, 0);
}
5% {
clip: rect(890px, 9999px, 950px, 0);
}
9% {
clip: rect(890px, 9999px, 950px, 0);
}
10% {
clip: rect(700px, 9999px, 780px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(980px, 9999px, 1010px, 0);
}
36% {
clip: rect(1045px, 9999px, 1180px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
@keyframes yuragiLsizeFrame2 {
0% {
clip: rect(0, 9999px, 0, 0);
}
1% {
clip: rect(680px, 9999px, 710px, 0);
}
2% {
clip: rect(630px, 9999px, 665px, 0);
}
3% {
clip: rect(500px, 9999px, 540px, 0);
}
5% {
clip: rect(890px, 9999px, 950px, 0);
}
9% {
clip: rect(890px, 9999px, 950px, 0);
}
10% {
clip: rect(700px, 9999px, 780px, 0);
}
11% {
clip: rect(0, 9999px, 0, 0);
}
34% {
clip: rect(0, 9999px, 0, 0);
}
35% {
clip: rect(980px, 9999px, 1010px, 0);
}
36% {
clip: rect(1045px, 9999px, 1180px, 0);
}
40% {
clip: rect(9999px, 9999px, 9999px, 0);
}
41% {
clip: rect(0, 9999px, 0, 0);
}
}
/*-------------------------------------------*/
/* [スノーノイズ] */
@-webkit-keyframes snowNoiseFrame {
0% {
background-position: 50px 0;
}
40% {
background-position: 10px 50%;
}
80% {
background-position: 300px 100%;
}
100% {
background-position: 0 0;
}
}
@keyframes snowNoiseFrame {
0% {
background-position: 50px 0;
}
40% {
background-position: 10px 50%;
}
80% {
background-position: 300px 100%;
}
100% {
background-position: 0 0;
}
}
/*----------------------------------*/
/* [BLINK EFFECT] */
/* @MEMO */
.blinkEf {
display: block;
overflow: hidden;
width: 0;
}
.blinkEf .blinkEfC {
background-color: white;
display: block;
}
.blinkEf.is-render {
-webkit-animation: blinkEfWidthFrame 0.2s ease-out;
-webkit-animation-fill-mode: both;
animation: blinkEfWidthFrame 0.2s ease-out;
animation-fill-mode: both;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.blinkEf.is-render .blinkEfC {
-webkit-animation: blinkEfCFrame 0.2s ease-out;
-webkit-animation-fill-mode: both;
animation: blinkEfCFrame 0.2s ease-out;
animation-fill-mode: both;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes blinkEfWidthFrame {
0% {
width: 0;
}
1% {
width: 100%;
}
20% {
width: 100%;
}
50% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes blinkEfWidthFrame {
0% {
width: 0;
}
1% {
width: 100%;
}
20% {
width: 100%;
}
50% {
width: 0;
}
100% {
width: 100%;
}
}
@-webkit-keyframes blinkEfCFrame {
0% {
background-color: white;
}
50% {
background-color: white;
}
100% {
background-color: rgba(255, 255, 255, 0);
}
}
@keyframes blinkEfCFrame {
0% {
background-color: white;
}
50% {
background-color: white;
}
100% {
background-color: rgba(255, 255, 255, 0);
}
}
@-webkit-keyframes loopBgInfos {
0% {
background-position: 0 0;
}
to {
background-position: 180px 90px;
}
}
@keyframes loopBgInfos {
0% {
background-position: 0 0;
}
to {
background-position: 180px 90px;
}
}
@-webkit-keyframes yure-anim {
90% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
93% {
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
96% {
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes yure-anim {
90% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
93% {
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
96% {
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes yure-anim2 {
90% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
93% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
96% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes yure-anim2 {
90% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
93% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
96% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes show-anim {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes show-anim {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes anim-h-news {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes anim-h-news {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes anim-h-news2 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
@keyframes anim-h-news2 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
.c_inner {
margin: auto;
max-width: 1080px;
}
.theme_color_red {
color: #dc2c2d;
}
.theme_color_orange {
color: #e08234;
}
.theme_color_green {
color: #95a243;
}
.c_cont_bg {
background-image: url(../img/bg_pat.png);
background-repeat: repeat;
background-size: 200px 200px;
position: relative;
}
.c_cont_bg:before {
background-image: url(../img/bg_deco.png);
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 195px;
position: absolute;
top: -2px;
width: 100%;
}
/******************************************
* css animation
*****************************************/
/* 下から上 */
.effect-fade {
opacity: 0;
-webkit-transform: translate(0, 30px);
transform: translate(0, 30px);
-webkit-transition: all 1.5s 0.5s cubic-bezier(0.01, 1.16, 1, 1);
transition: all 1.5s 0.5s cubic-bezier(0.01, 1.16, 1, 1);
}
.effect-fade.effect-scroll {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 上から下 */
.effect-fade02 {
opacity: 0;
-webkit-transform: translate(0, -30px);
transform: translate(0, -30px);
-webkit-transition: all 1.5s 0.5s cubic-bezier(0.01, 1.16, 1, 1);
transition: all 1.5s 0.5s cubic-bezier(0.01, 1.16, 1, 1);
}
.effect-fade02.effect-scroll {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 左から右 */
.effect-fade03 {
opacity: 0;
-webkit-transform: translate(-30px, 0);
transform: translate(-30px, 0);
-webkit-transition: all 2.5s 0.5s cubic-bezier(0.01, 1.16, 1, 1);
transition: all 2.5s 0.5s cubic-bezier(0.01, 1.16, 1, 1);
}
.effect-fade03.effect-scroll {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 右から左 */
.effect-fade04 {
opacity: 0;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
-webkit-transition: all 2.5s 0.5s cubic-bezier(0.01, 1.16, 1, 1);
transition: all 2.5s 0.5s cubic-bezier(0.01, 1.16, 1, 1);
}
.effect-fade04.effect-scroll {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 透過 */
.effect-fade05 {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 1s 0.5s ease;
transition: all 1s 0.5s ease;
}
.effect-fade05.effect-scroll {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* common
##################################### */
.c_cont_inner {
margin: auto;
max-width: 1000px;
width: calc(100% - 3vw);
}
.c_btn {
background-color: #fff;
border: solid 1px #924898;
-webkit-box-shadow: 2px 2px 2px #ccc;
box-shadow: 2px 2px 2px #ccc;
color: #924898;
display: inline-block;
font-size: 1.6rem;
padding: 3px 2em;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.c_btn:hover {
background: #f39800;
border-color: #f39800;
color: #fff;
text-decoration: none;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* project
##################################### */
/* structure
##################################### */
.mv {
position: relative;
text-align: center;
}
.mv:before {
background-image: url(../img/mv_deco_top.png);
background-repeat: repeat-x;
content: "";
height: 40px;
left: 0;
position: absolute;
top: 5px;
width: 100%;
z-index: -1;
}
.mv:after {
background-image: url(../img/mv_deco_bottom.png);
background-repeat: repeat-x;
bottom: 0;
content: "";
height: 40px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
.mv_imgWp {
overflow: hidden;
padding: 60px 0 100px;
position: relative;
z-index: 1;
}
.mv_imgWp h1 {
position: relative;
z-index: 1;
}
#header {
background: #f9f2d4;
-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
opacity: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
#header.fixed {
opacity: 1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.h_cont {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin: auto;
max-width: 1080px;
min-height: 60px;
width: 96%;
}
.gnav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.recipe_logo {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
margin-right: 2vw;
width: 200px;
}
.gnav_item a {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 1.6rem;
height: 100%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 60px;
width: 100%;
}
.gnav_item {
text-align: center;
width: 33.3333%;
}
.gnav_item a:hover {
background: #fb9087;
color: #fff;
text-decoration: none;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.p-footer {
padding-bottom: 50px;
padding-top: 150px;
position: relative;
}
.p-footer:before {
background-image: url(../img/mv_deco_top.png);
background-repeat: repeat-x;
content: "";
left: 0;
position: absolute;
top: 5px;
width: 100%;
z-index: -1;
}
.f_cresit {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: auto;
max-width: 430px;
}
.copy {
text-align: center;
}
.pageTop {
bottom: 1em;
display: none;
position: fixed;
right: 2vw;
}
.f_cont {
position: relative;
}
#wp_pager {
letter-spacing: -0.4em;
margin-top: 95px;
overflow: hidden;
text-align: center;
}
#wp_pager ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.page-numbers {
background-repeat: no-repeat;
background-size: contain;
display: block;
font-size: 0;
font-weight: bold;
padding-top: 100%;
position: relative;
}
.pageNumWrap .page-numbers:before {
background-image: url(../img/btn_pager_off.png);
z-index: -1;
}
.pageNumWrap .page-numbers:after {
background-image: url(../img/btn_pager_on.png);
z-index: -1;
}
.pageNumWrap .page-numbers.current:before {
background-image: url(../img/btn_pager_on.png);
z-index: -1;
}
.pageNumWrap .page-numbers.current:after {
background-image: url(../img/btn_pager_off.png);
z-index: -1;
}
.pageNumWrap .page-numbers.prev:before {
background-image: url("../img/ico_arrow_prev_off.png");
z-index: 0;
}
.pageNumWrap .page-numbers.prev:after {
background-image: url("../img/ico_arrow_prev_on.png");
z-index: 0;
}
.pageNumWrap .page-numbers.next:before {
background-image: url("../img/ico_arrow_next_off.png");
z-index: 0;
}
.pageNumWrap .page-numbers.next:after {
background-image: url("../img/ico_arrow_next_on.png");
z-index: 0;
}
.pageNumWrap .page-numbers.next:hover:before {
opacity: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.pageNumWrap .page-numbers.next:hover:after {
opacity: 1;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.pageNumWrap .page-numbers.prev:hover:before {
opacity: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.pageNumWrap .page-numbers.prev:hover:after {
opacity: 1;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.pageNumWrap .page-numbers.current:hover:before,
.pageNumWrap .page-numbers.dots:hover:before {
opacity: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.pageNumWrap .page-numbers.current:hover:after,
.pageNumWrap .page-numbers.dots:hover:after {
opacity: 1;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.pageNumWrap .page-numbers:before,
.pageNumWrap .page-numbers:after {
-webkit-transition: all 0.3s ease-out;
background-repeat: no-repeat;
background-size: contain;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: all 0.3s ease-out;
width: 100%;
}
#wp_pager .btn_list,
#wp_pager .btn_next,
#wp_pager .btn_prev,
#wp_pager li {
margin: 0 0.5em;
}
#wp_pager .btn_list span,
#wp_pager .btn_next span,
#wp_pager .btn_prev span,
#wp_pager .page-numbers {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
color: #fff;
font-size: 2rem;
letter-spacing: normal;
overflow: hidden;
position: relative;
text-decoration: none;
-webkit-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
width: 36px;
z-index: 1;
}
.pageNumWrap .page-numbers:hover:before {
opacity: 1;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.pageNumWrap .page-numbers:hover:before:hover:after {
opacity: 1;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.pageNumWrap .page-numbers:hover:before:hover:before {
opacity: 1;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.pageNumWrap .page-numbers:hover:after {
opacity: 0;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#wp_pager .btn_list span:after,
#wp_pager .btn_next span:after,
#wp_pager .btn_prev span:after,
#wp_pager .page-numbers:after {
z-index: -1;
}
#wp_pager .btn_list span.current a:after,
#wp_pager .btn_list span.current span:after,
#wp_pager .btn_list span:hover a:after,
#wp_pager .btn_list span:hover span:after,
#wp_pager .btn_next span.current a:after,
#wp_pager .btn_next span.current span:after,
#wp_pager .btn_next span:hover a:after,
#wp_pager .btn_next span:hover span:after,
#wp_pager .btn_prev span.current a:after,
#wp_pager .btn_prev span.current span:after,
#wp_pager .btn_prev span:hover a:after,
#wp_pager .btn_prev span:hover span:after,
#wp_pager .page-numbers.current a:after,
#wp_pager .page-numbers.current span:after,
#wp_pager .page-numbers:hover a:after,
#wp_pager .page-numbers:hover span:after {
opacity: 1;
}
#wp_pager .btn_list span.next,
#wp_pager .btn_list span.prev,
#wp_pager .btn_next span.next,
#wp_pager .btn_next span.prev,
#wp_pager .btn_prev span.next,
#wp_pager .btn_prev span.prev,
#wp_pager .page-numbers.next,
#wp_pager .page-numbers.prev {
padding: 0;
}
#wp_pager .btn_list span.next span,
#wp_pager .btn_list span.prev span,
#wp_pager .btn_next span.next span,
#wp_pager .btn_next span.prev span,
#wp_pager .btn_prev span.next span,
#wp_pager .btn_prev span.prev span,
#wp_pager .page-numbers.next span,
#wp_pager .page-numbers.prev span {
padding: 0 25px;
}
#wp_pager .page-numbers:not(.prev):not(.next) {
background: none;
padding: 0 0;
}
#wp_pager .page-numbers:not(.prev):not(.next) span:after {
display: none;
}
#wp_pager .btn_list span,
#wp_pager .btn_next span,
#wp_pager .btn_prev span {
padding: 0;
}
#wp_pager .btn_list span a,
#wp_pager .btn_next span a,
#wp_pager .btn_prev span a {
padding: 0 20;
}
.wp_pager_detail {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.wp_pager_detail .btn_prev a,
.wp_pager_detail .btn_next a,
.wp_pager_detail .btn_list a {
background-repeat: no-repeat;
background-size: contain;
display: block;
font-size: 2rem;
padding-top: 100%;
position: relative;
}
.wp_pager_detail .btn_prev a:before,
.wp_pager_detail .btn_prev a:after,
.wp_pager_detail .btn_next a:before,
.wp_pager_detail .btn_next a:after,
.wp_pager_detail .btn_list a:before,
.wp_pager_detail .btn_list a:after {
-webkit-transition: all 0.3s ease-out;
background-repeat: no-repeat;
background-size: contain;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: all 0.3s ease-out;
width: 100%;
}
.wp_pager_detail .btn_prev a:before {
background-image: url(../img/ico_arrow_prev_on.png);
z-index: -1;
}
.wp_pager_detail .btn_prev a:after {
background-image: url(../img/ico_arrow_prev_off.png);
z-index: -1;
}
.btn_prev {
width: 34px;
}
.wp_pager_detail .btn_next a:before {
background-image: url(../img/ico_arrow_next_on.png);
z-index: -1;
}
.wp_pager_detail .btn_next a:after {
background-image: url(../img/ico_arrow_next_off.png);
z-index: -1;
}
.btn_next {
width: 34px;
}
.wp_pager_detail .btn_list a:before {
background-image: url(../img/ico_btn_list_off.png);
z-index: -1;
}
.wp_pager_detail .btn_list a:after {
background-image: url(../img/ico_btn_list_on.png);
z-index: -1;
}
.wp_pager_detail .btn_list a {
color: #fff;
font-size: 1.6rem;
padding: 10px 0px 0;
}
.btn_list {
width: 121px;
}
.wp_pager_detail .btn_prev a:after {
-webkit-transition-timing-function: ease-in;
opacity: 0;
transition-timing-function: ease-in;
}
.wp_pager_detail .btn_next a:after {
-webkit-transition-timing-function: ease-in;
opacity: 0;
transition-timing-function: ease-in;
}
.wp_pager_detail .btn_list a:after {
-webkit-transition-timing-function: ease-in;
opacity: 0;
transition-timing-function: ease-in;
}
.wp_pager_detail a:hover {
text-decoration: none;
}
@media only screen and (max-width: 768px) {
.m_media {
display: block;
}
.m_media_imgWp {
margin: auto;
margin-bottom: 20px;
}
.m_media__rev .m_media_body {
margin: auto;
}
.bl_cardUni > .m_card {
margin-bottom: 20px;
margin-right: 0;
width: 100%;
}
.m_cardUni.m_cardUni__col3 {
margin-bottom: -20px;
}
/* 下から上 */
.effect-fade {
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.effect-fade.effect-scroll {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 上から下 */
.effect-fade02 {
opacity: 0;
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.effect-fade02.effect-scroll {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 左から右 */
.effect-fade03 {
opacity: 0;
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.effect-fade03.effect-scroll {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 右から左 */
.effect-fade04 {
opacity: 0;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.effect-fade04.effect-scroll {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 透過 */
.effect-fade05 {
opacity: 0;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.effect-fade05.effect-scroll {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.c_cont_bg:before {
background-size: 100%;
}
.c_inner {
width: 91vw;
}
.c_cont_bg {
padding-bottom: 60px;
padding-top: 180px;
}
.mv:before,
.mv:after {
background-size: 110%;
height: 52px;
}
.mv_btnWp {
margin: 10px auto 0;
position: relative;
z-index: -1;
}
.mv_imgWp {
padding: 70px 0 70px;
}
.gnav_item a {
font-size: 1.2rem;
}
.h_cont {
width: 98%;
}
.p-footer:before {
background-size: 45%;
height: 25px;
}
.p-footer {
padding-bottom: 25px;
padding-top: 120px;
}
.copy {
font-size: 1rem;
margin-top: 60px;
}
.pageTop {
width: 40px;
}
.f_cresit {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
width: 90%;
}
.f_cresit_item {
width: 35%;
}
.p-footer:before {
background-size: 110%;
height: 52px;
}
}
@media screen and (min-width: 769px) {
.sp_only {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.pc_only {
display: none !important;
}
#wp_pager .btn_list span,
#wp_pager .btn_next span,
#wp_pager .btn_prev span,
#wp_pager .page-numbers {
font-size: 1.5rem;
width: 28px;
}
.btn_prev {
width: 28px;
}
.btn_next {
width: 28px;
}
.wp_pager_detail .btn_list a {
font-size: 1.5rem;
}
}
@media only screen and (min-width: 769px) {
.c_cont_bg {
padding-bottom: 200px;
padding-top: 290px;
}
.c_inner {
width: 92vw;
}
.mv_btn {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: url(../img/mv_btn_bg.png);
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 18px;
height: 100%;
height: 100%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
padding: 0 20px;
position: relative;
width: 100%;
z-index: 2;
}
.mv_btn:hover img {
opacity: 0.8;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.mv_btnWp {
bottom: 75px;
height: 90px;
margin: -2vw auto 0;
max-width: 650px;
width: 100%;
}
.mv_btn_deco {
height: 100%;
position: relative;
text-align: center;
}
.mv_btn_deco:before {
background: url(../img/ribbon_left.png);
background-repeat: no-repeat;
background-size: 100%;
bottom: -25px;
content: "";
height: 96px;
left: -440px;
max-width: 600px;
position: absolute;
width: 100%;
z-index: -2;
}
.mv_btn_deco:after {
background: url(../img/ribbon_right.png);
background-repeat: no-repeat;
background-size: 100%;
bottom: -25px;
content: "";
height: 96px;
max-width: 600px;
position: absolute;
right: -440px;
width: 10px;
width: 100%;
z-index: -2;
}
.p-footer:before {
background-image: url(../img/mv_deco_top.png);
height: 40px;
}
.f_cresit {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.copy {
font-size: 1.2rem;
margin-top: 80px;
}
}
@media only screen and (max-width: 414px) {
.gnav_item a {
font-size: 1rem;
}
}