@charset "UTF-8";
/*========== web font ==========*/
.engTxt {
/*font-family: 'EB Garamond', serif;*/
font-family: 'Abel', sans-serif;
/*font-family: 'Amiri', serif;*/
letter-spacing: 0.1em;
}
.mincho {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.gothic {
font-family: Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
}
/*-------------------------------------------*/
/*----------------- 基本設定 --------------*/
/*---------------------------------------*/
html, body {
width: 100%;
/*overflow-x: hidden;*/
}
body {
font-size: 13px;
line-height: 1.6;
color: #000;
letter-spacing: 0.01em;
}
.forSp {
display: none;
}
.forPc {
display: block;
}
p, dd {
text-align: justify;
}
div {
width: 100%;
}
a.anchor{
display: block;
padding-top: 50px;
margin-top: -50px;
}
a.hover{
transition: 0.3s;
}
@media screen and (max-width : 959px ){
body {
/*padding-bottom: 60px;*/
}
.forPc {
display: none;
}
.forSp {
display: block;
}
.nonSp {
display: none;
}
#t_live_balloon {
display: none !important;
}
#top {
padding-top: 70px;
}
}/*Close @media screen and (max-width: 959px)*/
@keyframes fadeIn {
0% {opacity: 0}
30% {opacity: 0}
100% {opacity: 1}
}
/*-------------------------------------------*/
/*----------------- common --------------*/
/*---------------------------------------*/
.icon_a {
background-color: #eaeae2;
border-radius: 50%;
position: relative;
}
.icon_a::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eaeae2;
z-index: -1;
opacity: 1;
transition: 0.5s;
}
.icon_a:hover {
background-color: #ccccad;
}
.icon_a:hover::after {
opacity: 0;
transform: scale(1.4);
}
/*.icon_a:nth-of-type(2)::after,
.icon_a.presetnt::after {
background-color:#FF9596;
animation:1s infinite btnAni;
z-index: -2;
}
@keyframes btnAni{
0%{
}
100%{
transform: scale(1.4);
opacity: 0;
}
}
.icon_a:nth-of-type(2),
.icon_a.presetnt {
animation:2s infinite boxAni;
}
@keyframes boxAni{
0%{
}
50%{
transform: rotatey(360deg);
}
100%{
transform: rotatey(360deg);
}
}*/
a.arwP {
font-size: 24px;
display: flex;
align-items: center;
}
a.arwP::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.5em;
background-color: #ea5c71;
border-radius: 50%;
background-image: url("../img/arw-w.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}
*, *:before, *:after {
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #555;
text-decoration: none;
transition: all 0.5s;
}
a.blueLink {
color: #3666AE;
text-decoration: underline;
}
a.blueLink:hover {
opacity: 0.6;
}
#btnBack {
padding: 30px 0 0;
}
/*#btnPage a,*/
#btnBack a{
font-size: 14px;
width: 260px;
height: 3em;
}
img {
width: 100%;
height: auto;
vertical-align: middle;
}
#common_ftag {
line-height: 0;
}
#common_ftag img {
max-width: 0px;
}
h1, h2, h3, h4, h5 {
font-weight: normal;
line-height: 1.4;
margin: 0;
}
p {
text-align: justify;
}
.wrapWidth {
width: 100%;
margin: 0 auto;
}
.boxWidth {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.caption {
font-size: 12px;
line-height: 1.4;
padding: 1em 0;
}
#captionBox {
text-align: center;
padding: 2em 0;
}
#captionBox .caption {
display: inline-block;
text-align: justify;
line-height: 2;
font-size: 13px;
color: #333;
}
#pageTop{
width: 100%;
position: relative;
z-index: 10;
height: 0;
}
#goPageTop {
position: fixed;
right: 10px;
z-index: 20;
bottom: 5px;/*margin-left: 600px;*/
width: 40px;
}
#goPageTop a {
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #000;
display: block;
text-align: center;
padding-top: 10px;
opacity: 0.3;
transition: all 0.3s;
}
#goPageTop a img {
width: 70%;
}
#goPageTop a:hover {
opacity: 0.9;
}
#wrapper {
min-height: calc(100vh - 488px);
}
@media screen and (max-width: 959px) {
.boxWidth {
width: 90%;
}
#pageTop{
height: 60px;
}
#wrapper {
min-height: calc(100vh - 398px);
}
}
@media screen and (max-width: 599px) {
#captionBox .caption span.non-Sp {
display: none;
}
#wrapper {
min-height: calc(100vh - 349px);
}
}
.imgFx {
position: relative;
}
.imgFx .tagImg {
opacity: 0;
}
.imgFx .imgCover {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #000;
transform-origin: left top;
transform: scaleX(0);
}
.imgFx.active {
}
.imgFx.active .tagImg {
animation: tagImg 1s ease 0s 1 forwards;
}
@keyframes tagImg {
50% {
opacity: 0;
}
51% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.imgFx.active .imgCover {
animation: cover 1s ease 0s 1 forwards;
}
@keyframes cover {
0% {
transform: scaleX(0);
transform-origin: left top;
}
49% {
transform: scaleX(1);
transform-origin: left top;
}
51% {
transform: scaleX(1);
transform-origin: right top;
}
100% {
transform: scaleX(0);
transform-origin: right top;
}
}
/*========== FLEX BOX ==========*/
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.flex-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-left {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.f-vh-center {
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;
}
@media screen and (max-width : 599px ){
}
@media screen and (max-width : 599px ){
}
/*-------------------------------------------*/
/*----------------- navSp --------------*/
/*---------------------------------------*/
#navSpWrap {
position: fixed;
background-color: rgba(255,255,255,1);
right: 0;
bottom: 0;
width: 100%;
height: calc(100vh - 100px);
z-index: 900;
overflow-y: scroll;
transform: translateX(100%);
transition: 0.5s cubic-bezier(.42,1,.62,1);
}
.showMenu #navSpWrap {
transform: translateX(0%);
}
#navSpWrap #navSp {
padding: 5%;
}
#navSpWrap #navSp li {
padding: 0.5em 0;
opacity: 0;
transform: translateX(100%);
transition: 0.5s cubic-bezier(.42,1,.62,1) 0.1s;
}
.showMenu #navSpWrap #navSp li {
transform: translateX(0%);
opacity: 1;
}
.showMenu #navSpWrap #navSp li:nth-child(2) {
transition-delay: 0.2s;
}
.showMenu #navSpWrap #navSp li:nth-child(3) {
transition-delay: 0.3s;
}
.showMenu #navSpWrap #navSp li:nth-child(4) {
transition-delay: 0.4s;
}
.showMenu #navSpWrap #navSp li:nth-child(5) {
transition-delay: 0.5s;
}
.showMenu #navSpWrap #navSp li:nth-child(6) {
transition-delay: 0.6s;
}
#navSpWrap #navSp li a {
font-size: 42px;
font-weight: 700;
line-height: 1.2;
color: #000;
}
#navSpWrap a:hover {
opacity: 0.4;
}
#navSpWrap #navSp li a span {
display: block;
font-size: 18px;
font-weight: 400;
}
#navSpWrap .navBtm {
width: 100%;
background-color: #e6ebdc;
padding: 3% 5%;
}
#navSpWrap .navBtm > a {
display: block;
font-size: 16px;
line-height: 2;
}
#navSpWrap .navBtm .snsWrap {
}
#navSpWrap .navBtm .snsWrap h3 {
padding: 1em 0;
font-size: 18px;
}
#navSpWrap .navBtm .snsWrap .snsBox {
justify-content: flex-start;
}
#navSpWrap .navBtm .snsWrap .snsBox a {
border-radius: 50%;
border: #000 solid 1px;
width: 50px;
margin-right: 10px;
}
@media screen and (max-width : 959px ){
#navSpWrap {
height: calc(100% - 50px);
}
}
@media screen and (max-width : 599px ){
#navSpWrap #navSp li a {
font-size: clamp(27px, 7.5vw, 29px);
}
#navSpWrap #navSp li a span {
font-size: clamp(13px, 3.7vw, 15px);
}
#navSpWrap .navBtm > a {
font-size: clamp(13px, 3.7vw, 15px);
}
#navSpWrap .navBtm .snsWrap h3 {
padding: 1em 0 0.3em;
font-size: clamp(13px, 3.7vw, 15px);
}
#navSpWrap .navBtm .snsWrap .snsBox a {
width: 13%;
}
}
/*-------------------------------------------*/
/*----------------- header --------------*/
/*---------------------------------------*/
header {
position: fixed;
width: 100%;
height: 100px;
left: 0;
top: 0;
z-index: 999;
background-color:rgba(255,255,255,0.9);
}
header h1 {
position: absolute;
left: 20px;
top: 10px;
width: 300px;
/*display: none;*/
}
header .btnWrap {
position: absolute;
width: 150px;
top: 0;
padding-top: 10px;
right: 120px;
}
header .btnWrap a {
display: block;
width: 70px;
}
header #menu {
position: absolute;
width: 80px;
height: 80px;
top: 0;
right: 0;
background-color: #c4af96;
cursor: pointer;
transition: 0.5s;
}
header #menu:hover {
background-color: #937a5d;
}
header #menu span {
display: block;
position: absolute;
width: 60%;
height: 4px;
left: 20%;
top: 15px;
background-color: #fff;
margin-bottom: 2px;
transition: 0.5s;
}
header #menu span:nth-child(2) {
top: 26px;
}
header #menu span:nth-child(3) {
top: 38px;
}
header #menu p {
position: absolute;
width: 100%;
bottom: 5%;
text-align: center;
color: #fff;
font-size: 16px;
transition: 0.3s;
}
body.showMenu header #menu span:nth-child(1) {
top: 23px;
transform: rotateZ(45deg);
}
body.showMenu header #menu span:nth-child(2) {
opacity: 0;
}
body.showMenu header #menu span:nth-child(3) {
top: 35px;
transform: translateY(-12px) rotateZ(-45deg);
}
@media screen and (max-width: 959px) {
header {
width: 100%;
height: 50px;
}
header h1 {
width: 40%;
max-width: 200px;
left: 3%;
display: block;
}
header .btnWrap {
width: 85px;
right: 60px;
padding-top: 5px;
}
header .btnWrap a {
width: 40px;
}
header #menu {
position: absolute;
width: 50px;
height: 50px;
}
header #menu span {
width: 60%;
height: 3px;
left: 20%;
top: 7px;
background-color: #fff;
margin-bottom: 2px;
}
header #menu span:nth-child(2) {
top: 14px;
}
header #menu span:nth-child(3) {
top: 21px;
}
header #menu p {
font-size: 13px;
}
body.showMenu header #menu p {
opacity: 0;
}
}
@media screen and (max-width: 599px) {
}
/*-------------------------------------------*/
/*----------------- footer --------------*/
/*---------------------------------------*/
footer {
padding: 60px 0 0;
background-color: #e6ebdc;
}
footer #footBox {
position: relative
}
footer #footBox .logoBox {
position: absolute;
width: 130px;
left: 0;
top: 0;
}
footer #footBox .snsWrap {
width: 80%;
max-width: 500px;
margin:0 auto;
}
footer #footBox .snsWrap h3 {
text-align: center;
padding-bottom: 1em;
}
footer #footBox .snsWrap .snsBox {}
footer #footBox .snsWrap .snsBox a {
width: 15%;
border-radius: 50%;
border: #000 solid 1px;
}
footer #footBox .snsWrap .snsBox a:hover {
box-shadow: 0px 0px 20px rgba(0,0,0,0.2)inset;
}
footer #footBox .snsWrap ul {
padding-top: 2em;
text-align: center;
}
footer #footBox .snsWrap ul li {
display: inline-block;
padding: 0 0.5em;
border-right: #333 solid 1px;
}
footer #footBox .snsWrap ul li:nth-child(1) {
border-left: #333 solid 1px;
}
footer .cpyR {
width: 100%;
background-color: #fff;
padding: 15px 0;
margin-top: 60px;
}
footer .cpyR p {
text-align: center;
font-size: 12px;
}
@media screen and (max-width: 959px) {
footer #footBox .logoBox {
position: static;
width: 130px;
margin: 0 auto;
}
footer #footBox .snsWrap {
padding-top: 50px;
}
footer #footBox .snsWrap .snsBox {
max-width: 360px;
margin: 0 auto;
}
}
@media screen and (max-width: 599px) {
}
/*-------------------------------------------*/
/*----------------- toppage --------------*/
/*---------------------------------------*/
#toppage #mainWrap {
position: relative;
margin-top: 100px;
padding-bottom: 80px;
}
#toppage #mainWrap .flow00 {
position: absolute;
left: 3%;
bottom: 10%;
pointer-events: none;
width: 36%;
z-index: 0;
}
#toppage #mainWrap .flow01 {
position: absolute;
right: 0;
top: 33%;
pointer-events: none;
width: 36%;
z-index: 9;
}
#toppage #mainWrap #mainBox {
position: relative;
}
#toppage #mainWrap #mainBox h1 {
position: absolute;
width: 38%;
left: 0;
top: 2%;
z-index: 2;
}
#toppage #swipeWrap {
width:100%;
height: 100%;
}
#toppage #swipeWrap .swiper {
width: 100%;
height: 100%;
padding-bottom: 50px;
}
#toppage #swipeWrap .swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#toppage #swipeWrap .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#toppage #swipeWrap .swiper-slide .imgBox {
border-radius: 5%;
overflow: hidden;
width: 59%;
margin-left: 41%;
opacity: 0;
transition: 0.5s;
}
#toppage #swipeWrap .swiper-slide.swiper-slide-active .imgBox {
opacity: 1;
}
#toppage #swipeWrap .swiper-slide .txtBox {
position: absolute;
width: 46%;
right: 30%;
bottom: -50px;
background-color: #fff;
padding: 1.5% 3%;
border-radius: 15px;
transform: translateX(20%);
opacity: 0;
transition: 0.5s 1.5s;
border: #000 solid 2px;
}
#toppage #swipeWrap .swiper-slide.swiper-slide-active .txtBox {
transform: translateX(0%);
opacity: 1;
}
#toppage #swipeWrap .swiper-slide .txtBox .date {
content: '';
background-image: url("../../img/bg-date.png");
background-position: left center;
background-size: 3em;
background-repeat: no-repeat;
padding: 0.5em 0;
padding-left: 3.5em;
}
#toppage #mainWrap h3 {
opacity: 0;
}
#toppage #swipeWrap .swiper-slide .txtBox h3 {
font-weight: 700;
font-size: 36px;
text-align: left;
line-height: 1.3;
height: 2.5em;
margin-bottom: 0.3em;
overflow: hidden;
letter-spacing: -0.05em;
transform: translateX(-20%);
opacity: 0;
transition: 0.7s 2s;
font-feature-settings: "palt";
letter-spacing: -0.05em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
#toppage #swipeWrap .swiper-slide.swiper-slide-active .txtBox h3 {
opacity: 1;
transform: translateX(0%);
}
#toppage #swipeWrap .swiper-slide .txtBox a {
display: block;
width: 36%;
margin-left: 70%;
padding: 0.2em;
font-weight: 700;
font-size: 13px;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 999px;
}
#toppage #swipeWrap .swiper-slide .txtBox a:hover {
opacity: 0.6;
}
#toppage #swipeWrap .swiper-slide .txtBox {
}
#toppage #swipeWrap .swiper-button-next, .swiper-rtl .swiper-button-prev {
right: 10px;
top: 90%;
left: auto;
}
#toppage #swipeWrap .swiper-button-prev, .swiper-rtl .swiper-button-next {
left: inherit;
top: 90%;
right: 5%;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 10px;
left: 70%;
width: 30%;
text-align: right;
}
#toppage .swiper-pagination-bullet {
width: 10px;
height: 10px;
}
#toppage .swiper-pagination-bullet-active {
background: #e61e73;
}
.swiper-button-next, .swiper-button-prev {
color: #e61e73;
visibility: hidden;
/*--swiper-theme-color: #e61e73;*/
transition: 0.5s;
opacity: 0;
}
#mainBox:hover .swiper-button-next, #mainBox:hover .swiper-button-prev{
visibility: visible;
opacity: 1;
}
#toppage #newartWrap {
background-color: #f6e9e8;
padding: 50px 0;
}
#toppage #newartWrap h2 {
width: 90%;
max-width: 320px;
margin: 0 auto;
padding-bottom: 20px;
}
#toppage #newartWrap #newartBox {}
#toppage #newartWrap #newartBox .itemBox {
width: 31%;
margin-bottom: 5%;
transition: 0.5s ease-out;
position: relative;
}
#toppage #newartWrap #newartBox .itemBox.itemEmp {
margin-bottom: 0px;
}
.itemBox.pickup::after {
content: '';
position: absolute;
left: -5%;
top: -5%;
width: 25%;
max-width: 80px;
height: 30%;
background-image: url("../../img/pu-red.svg");
background-position: top center;
background-repeat: no-repeat;
background-size: 100%;
z-index: 2;
}
.itemBox.pickup-r::after {
background-image: url("../../img/pu-red.svg");
}
.itemBox.pickup-y::after {
background-image: url("../../img/pu-ylw.svg");
}
.itemBox.pickup-g::after {
background-image: url("../../img/pu-grn.svg");
}
.itemBox.pickup-b::after {
background-image: url("../../img/pu-ble.svg");
}
.itemBox.pickup-p::after {
background-image: url("../../img/pu-ppl.svg");
}
#toppage #newartWrap #newartBox .itemBox:hover {
opacity: 0.7;
}
#toppage #newartWrap #newartBox .itemBox .imgBox {
overflow: hidden;
border-radius: 15px;
isolation: isolate;
position: relative;
}
#toppage #newartWrap #newartBox .itemBox .imgBox img {
display: block;
/* height: 220px;*/
object-fit: cover;
width: 100%;
transition: 0.5s ease-out;
}
#toppage #newartWrap #newartBox .itemBox:hover .imgBox img {
transform: scale(1.1);
}
.coming {
pointer-events: none;
position: relative;
}
.coming .imgBox::after,
.imgBox.coming::after {
content: '';
color: #fff;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.6);
background-image: url("../../img/bg-coming.svg");
background-size: 50%;
background-position: center center;
background-repeat: no-repeat;
}
#toppage #newartWrap #newartBox .itemBox p.tit {
font-size: 20px;
font-weight: 700;
height: 3.3em;
padding-top: 0.6em;
line-height: 1.3;
/* display: flex;
align-items: center;*/
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
p.cat {
position: relative;
padding-left: 45px;
padding: 0.5em 0 0.5em 40px;
}
p.cat a {
position: relative;
}
p.cat a::before {
content: '';
position: absolute;
width: 30px;
height: 150%;
right: 103%;
top: -25%;
background-image:url("../img/cat-oshijhamo.svg");
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
}
.itemBox p.cat a {
}
p.cat.none {
position: relative;
padding: 0.5em 0 0.5em 0px;
}
p.cat.none a::before {
display: none;
}
p.cat a:hover {
text-decoration: underline;
}
p.osihamo a::before {
background-image:url("../img/cat-oshijhamo.svg");
}
p.jimoto a::before {
background-image:url("../img/cat-jimoto.svg");
}
p.marche a::before {
background-image:url("../img/cat-marche.svg");
}
p.energy a::before {
background-image:url("../img/cat-energy.svg");
}
#toppage #newartWrap .ichiranBox {
padding: 30px 0;
}
#toppage #newartWrap .ichiranBox a {
background-color: #000;
color: #fff;
font-size: 18px;
display: block;
margin: 0 auto;
width: 15em;
height: 3em;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s ease;
}
#toppage #newartWrap .ichiranBox a:hover {
opacity: 0.6;
}
#toppage #largeImgWrap {
position: relative;
overflow: hidden;
}
#toppage #largeImgWrap img {
transition: 0.5s ease;
}
#toppage #largeImgWrap a:hover img {
transform: scale(1.05);
}
#toppage #largeImgWrap .txtBox {
position: absolute;
left: 50px;
bottom: 30px;
color: #fff;
}
#toppage #largeImgWrap .txtBox dt {
background-color: #000;
width: 10em;
font-size: 14px;
border-radius: 999px;
text-align: center;
}
#toppage #largeImgWrap .txtBox dd {
font-size: 34px;
font-weight: 700;
line-height: 1.4;
/*text-shadow: 0px 0px 3px rgba(0,0,0,0.5),1px 0px 3px rgba(0,0,0,0.5),1px 1px 3px rgba(0,0,0,0.5), 1px 2px 6px rgba(0,0,0,0.5);*/
color: #000;
text-shadow: 0px 0px 3px #fff,2px 0px 1px #fff,2px 2px 1px #fff,0px 2px 1px #fff,-2px 0px 1px #fff,0px -2px 1px #fff,-2px -2px 1px #fff;
}
#toppage #largeImgWrap .txtBox dd.txWh {
text-shadow: 0px 0px 3px rgba(0,0,0,0.5),1px 0px 3px rgba(0,0,0,0.5),1px 1px 3px rgba(0,0,0,0.5), 1px 2px 6px rgba(0,0,0,0.5);
color: #fff;
}
#toppage #aboutWrap {
padding: 50px 0;
}
#toppage #aboutWrap .flex {
max-width: 900px;
align-items: center;
border-bottom: #555 solid 1px;
padding-bottom: 50px;
}
#toppage #aboutWrap .flex .leftBox {
width: 43%;
}
#toppage #aboutWrap .flex .leftBox a {
display: block;
background-color: #000;
color: #fff;
font-size: 18px;
width: 200px;
padding: 0.4em;
text-align: center;
margin: 0 auto;
margin-top: 15px;
}
#toppage #aboutWrap .flex .rightBox {
width: 57%;
}
#toppage #aboutWrap .flex h2 {
font-size: 38px;
font-weight: 700;
padding-top: 0.3em;
}
#toppage #aboutWrap .flex h2 span {
color: #e61e73;
}
#toppage #clubWrap {
padding-bottom: 50px;
}
#toppage #clubWrap .flex {
max-width: 900px;
align-items: center;
}
#toppage #clubWrap .flex .leftBox {
width: 43%;
}
#toppage #clubWrap .flex .leftBox a {
}
#toppage #clubWrap .flex .rightBox {
width: 45%;
}
#toppage #clubWrap .flex .leftBox h3 {}
#toppage #clubWrap .flex a.btn_02 {
display: block;
background-color: #000;
color: #fff;
font-size: 18px;
width: 200px;
padding: 0.4em;
text-align: center;
margin: 0 auto;
margin-top: 15px;
}
#toppage #clubWrap .flex .rightBox {}
#toppage #clubWrap .flex .rightBox a.btn_02 {
display: none;
pointer-events: auto;
}
#toppage #clubWrap .flex .rightBox a {
display: block;
/*pointer-events: none;*/
}
#toppage #clubWrap .flex .rightBox a.presetnt {
}
#toppage #clubWrap .flex .rightBox a:hover {
opacity: 0.5;
}
#toppage #clubWrap .flex .rightBox a dl {
display: flex;
align-items: center;
padding: 5px 0;
}
#toppage #clubWrap .flex .rightBox a dt {
width: 20%;
}
#toppage #clubWrap .flex .rightBox a dd {
width: 77%;
font-size: 16px;
}
#toppage #clubWrap .flex .rightBox a dd p {
font-weight: 700;
font-size: 20px;
}
a.btn_02 {
color: #fff;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
border: #000 solid 2px;
margin: 0 auto;
position: relative;
/*overflow: hidden;*/
}
a.btn_02::after {
position: absolute;
content: '';
background-color: #fff;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transition: 0.3s ease-out;
transform: translate(-50%, -50%) scaleX(0);
transform-origin: center center;
box-sizing: border-box;
z-index: 1;
}
a.btn_02:hover::after {
transform: translate(-50%, -50%) scaleX(1);
}
a.btn_02:hover span {
color: #000;
position: relative;
z-index: 3;
}
@media screen and (max-width: 959px) {
#toppage #mainWrap {
padding-bottom: 37%;
margin-top: 0px;
}
#toppage #mainWrap .flow00 {
position: absolute;
left: auto;
right: 55%;
top: 107%;
pointer-events: none;
width: 44%;
z-index: 88;
mix-blend-mode:multiply;
max-width: 280px;
}
#toppage #mainWrap #mainBox {
width: 100%;
padding: 30px 0 0;
}
#toppage #mainWrap #mainBox h1 {
position: static;
width: 90%;
max-width: 600px;
margin: 0 auto;
padding-bottom: 10px;
z-index: 2;
}
#toppage #swipeWrap .swiper {
width: 100%;
height: 100%;
padding-bottom: 100px;
}
#toppage #swipeWrap .swiper-slide .imgBox {
border-radius: 20px;
width: 94%;
max-width: 600px;
margin-left: 3%;
}
#toppage #swipeWrap .swiper-slide.swiper-slide-active .imgBox {
opacity: 1;
}
#toppage #swipeWrap .swiper-slide .txtBox {
position: absolute;
width: 90%;
right: 13%;
bottom: -90px;
background-color: #fff;
padding: 3% 5% 3% 7%;
border-radius: 10px 10px;
}
#toppage #swipeWrap .swiper-slide .txtBox h3 {
font-size: clamp(24px, 4.2vw, 36px);
line-height: 1.3;
margin-bottom: 0.5em;
height: 2.5em;
}
#toppage #swipeWrap .swiper-slide .txtBox .date {
background-size: 2em;
padding: 0.3em 0 0.5em;
padding-left: 3.5em;
font-size: 14px;
}
#toppage #swipeWrap .swiper-slide .txtBox a {
padding: 0;
margin-left: 66%;
font-size: 12px;
}
#toppage #swipeWrap .swiper-button-next, .swiper-rtl {
display: none;
}
#toppage #swipeWrap .swiper-button-prev {
display: none;
}
#toppage .swiper-horizontal>.swiper-pagination-bullets,
#toppage .swiper-pagination-bullets.swiper-pagination-horizontal,
#toppage .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: -15px;
left: 0%;
width: 100%;
text-align: center;
}
#toppage #newartWrap {
position: relative;
}
#toppage #newartWrap h2 {
width: 40%;
position: absolute;
right: 5%;
top: -8%;
}
#toppage #newartWrap #newartBox .itemBox {
width: 46%;
}
#toppage #largeImgWrap {
}
#toppage #largeImgWrap .txtBox {
left: 5%;
bottom: 5%;
width: 90%;
}
#toppage #largeImgWrap .txtBox dt {
width: 8em;
font-size: 13px;
}
#toppage #largeImgWrap .txtBox dd {
font-size: clamp(24px, 4.2vw, 36px);
}
#toppage #aboutWrap {
padding: 30px 0;
}
#toppage #aboutWrap .flex {
max-width: 900px;
align-items: center;
border-bottom: #555 solid 1px;
padding-bottom: 50px;
flex-direction: column-reverse;
}
#toppage #aboutWrap .flex .leftBox {
width: 100%;
}
#toppage #aboutWrap .flex .leftBox a {
font-size: 18px;
}
#toppage #aboutWrap .flex .rightBox {
width: 100%;
}
#toppage #aboutWrap .flex h2 {
font-size: 38px;
font-weight: 700;
padding-top: 0.3em;
text-align: center;
}
#toppage #aboutWrap .flex h2 span {
color: #e61e73;
}
#toppage #clubWrap {
padding-bottom: 30px;
}
#toppage #clubWrap .flex {
max-width: 400px;
}
#toppage #clubWrap .flex .leftBox {
width: 100%;
}
#toppage #clubWrap .flex .leftBox a {
}
#toppage #clubWrap .flex .rightBox {
width: 100%;
padding-top: 30px;
}
#toppage #clubWrap .flex .leftBox h3 {}
#toppage #clubWrap .flex .leftBox a {
font-size: 18px;
display: none;
}
#toppage #clubWrap .flex .rightBox {}
#toppage #clubWrap .flex .rightBox a,
#toppage #clubWrap .flex .rightBox a.btn_02 {
display: block;
}
#toppage #clubWrap .flex .rightBox a:hover {
opacity: 0.5;
}
#toppage #clubWrap .flex .rightBox a dl {
display: flex;
align-items: center;
padding: 5px 0;
}
#toppage #clubWrap .flex .rightBox a dt {
width: 20%;
}
#toppage #clubWrap .flex .rightBox a dd {
width: 77%;
font-size: clamp(15px, 4.3vw, 17px);
}
#toppage #clubWrap .flex .rightBox a dd p {
font-weight: 700;
font-size: clamp(15px, 4.6vw, 17px);
}
}
@media screen and (max-width: 599px) {
#toppage #mainWrap #mainBox {
padding: 10px 0 0;
}
#toppage #mainWrap .flow00 {
right: 50%;
}
#toppage #newartWrap #newartBox {
max-width: 400px;
}
#toppage #newartWrap #newartBox .itemBox {
width: 100%;
}
#toppage #newartWrap #newartBox .itemBox p.tit {
font-size: clamp(19px, 5.3vw, 21px);
}
#toppage #newartWrap h2 {
width: 40%;
position: absolute;
right: 5%;
top: -2%;
}
#toppage #swipeWrap .swiper-slide .txtBox h3,
#toppage #largeImgWrap .txtBox dd {
font-size: clamp(23px, 6.4vw, 25px);
}
#toppage #largeImgWrap .txtBox dd br {
display: none;
}
#toppage #aboutWrap .flex h2 {
/*font-size: clamp(22px, 6.4vw, 32px);*/
padding-top: 0.5em;
font-size: 7vw;
}
#toppage #clubWrap .flex .leftBox h3 {
width: 80%;
margin: 0 auto;
}
footer #footBox .snsWrap ul li {
display: inline-block;
padding: 0 1.5em;
border-right: #333 solid 1px;
border-left: #333 solid 1px;
margin-bottom: 10px;
}
#toppage #clubWrap .flex .rightBox a dd {
width: 77%;
font-size: clamp(12px, 3.7vw, 14px);
}
}
/*===============下層共通あ===============*/
#titWrap {
background-color: #f6e8e8;
padding: 30px 0;
}
#titWrap h1{
width: 70%;
max-width: 400px;
margin: 0 auto;
}
#bread {
margin-top: 110px;
background-color: #e6e6e5;
padding: 0.5em 0;
}
#bread a {
margin-left: 0.5em;}
#bread a::after {
content: ' ';
height: 100%;
background-image: url("../img/arrow.svg");
background-position: right center;
background-repeat: no-repeat;
background-size: 80%;
margin: 0.8em 0;
pointer-events: none;
}
#bread div {
max-width: 1400px !important;
}
#bread span {
margin-left: 0.5em;
}
/*.marker.marker-anim {
background-position:-100% .8em
}*/
.marker.active {
background-size: 100% .8em;
}
.marker {
background: rgb(242,168,170);
background: linear-gradient(180deg, rgba(242,168,170,0) 0%, rgba(242,168,170,1) 20%,rgba(242,168,170,0) 100%);
background-repeat: no-repeat;
background-size: 0% .8em;
background-position: 0 1em;
transition: all 0.8s ease;
font-weight:700;
background-position:0 .8em
}
.boxWidth .boxWidth {
width: 100%;
}
.brSp {
display: none;
}
@media screen and (max-width: 959px) {
#bread {
margin-top: 10px;
}
}
@media screen and (max-width: 599px) {
#bread {
margin-top: 0px;
}
.brSp {
display: inline;
}
}
/*===============category===============*/
#category {}
#category #largeImgWrap {}
#category #largeImgWrap .tagImg {
position: relative;
}
#category #largeImgWrap .txtBox {
position: absolute;
width: 40%;
max-width: 400px;
right: 5%;
top: 50%;
transform: translate(-0%,-50%);
background-color: #fff;
padding: 30px;
}
#category #largeImgWrap .txtBox h2 {
width: 60%;
margin: 0 auto;
}
#category #largeImgWrap .txtBox p {
padding-top: 1em;
font-size: 16px;
}
#category #catWrap {
padding-top: 80px;
}
#category #catWrap #catBox {}
#category #catWrap #catBox .itemBox {
width: 31%;
margin-bottom: 50px;
transition: 0.5s ease-out;
position: relative;
}
#category #catWrap #catBox .itemBox:hover {
opacity: 0.7;
}
#category #catWrap #catBox .itemBox .imgBox {
overflow: hidden;
border-radius: 15px;
isolation: isolate;
position: relative;
}
#category #catWrap #catBox .itemBox .imgBox img {
display: block;
/*height: 220px;*/
object-fit: cover;
width: 100%;
transition: 0.5s ease-out;
}
#category #catWrap #catBox .itemBox:hover .imgBox img {
transform: scale(1.1);
}
#category #catWrap #catBox .itemBox.coming {
pointer-events: none;
}
#category #catWrap #catBox .itemBox.coming .imgBox::after {
content: '';
color: #fff;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.6);
background-image: url("../../img/bg-coming.svg");
background-size: 50%;
background-position: center center;
background-repeat: no-repeat;
}
#category #catWrap #catBox .itemBox p.tit {
font-size: 20px;
font-weight: 700;
height: 3.3em;
padding-top: 0.6em;
line-height: 1.3;
/* display: flex;
align-items: center;*/
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media screen and (max-width: 959px) {
#category #catWrap #catBox .itemBox {
width: 46%;
}
#category #catWrap {
padding-top: 50px;
}
}
@media screen and (max-width: 599px) {
#category #largeImgWrap .txtBox {
position: static;
transform: none;
width: 100%;
margin: 0 auto;
max-width: 500px;
}
#category #catWrap #catBox .itemBox {
width: 100%;
}
#category #catWrap {
padding-top: 30px;
}
}
#category.serial {}
#category.serial p.cat {
font-size: 24px;
padding-top: 0.2em;
}
#category.serial p.kinds {
font-size: 13px;
border: #777 solid 1px;
width: 5em;
height: 2em;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1em;
}
/*===============single===============*/
#single {}
#single article {
padding-bottom: 80px;
}
#single article .boxWidth {
max-width: 800px;
margin: 0 auto;
}
#single #titBox {
padding-top: 50px;
max-width: 900px;
}
#single #titBox h1 {
font-size: 38px;
font-weight: 700;
padding: 0.4em 0;
}
#single #titBox h2 {
padding: 0.3em 0;
border-top: #e51d73 solid 1px;
border-bottom: #e51d73 solid 1px;
}
#single #titBox h2,
#single.oshihamo h3.area {
font-size: 22px;
}
#single #titBox p.cat {
text-align: right;
padding: 1em 0;
font-size: 15px;
}
#single #titBox .imgBox {
padding-bottom: 20px
}
#single.oshihamo .desc.teller{
padding: 1em 0;
}
#single #titBox #introBox,
#single #profile {
background-color: #e9e9e1;
padding: 20px 40px 30px;
margin-bottom: 30px;
}
#single #profile {
margin-top: 50px;
}
#single #titBox #introBox p,
#single #profile p {
font-size: 15px;
text-align: center;
padding: 0.3em 0;
}
#single #titBox #introBox .flex,
#single #profile .flex {
align-items: center;
}
#single #introBox .iconFlex,
#single #profile .iconFlex {
align-items: center;
}
#single #titBox #introBox .flex .imgBox,
#single #profile .flex .imgBox {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
#single #titBox #introBox .flex .iconBox,
#single #profile .flex .iconBox {
border-radius: 100%;
border:#555 solid 1px;
width: 50px;
height: 50px;
margin-left: 7%;
}
#single #titBox #introBox .flex dl,
#single #profile .flex dl {
flex: 1;
padding-left: 3%;
}
#single #titBox #introBox .flex dt,
#single #profile .flex dt {
font-size: 15px;
padding-bottom: 0.3em;
}
#single #titBox #introBox .flex dt p {
font-weight: 400;
font-size: 70%;
line-height: 1.2;
text-align: left;
}
#single #titBox #introBox .flex dd,
#single #profile .flex dd {
font-size: 18px;
font-weight: 700;
}
#single #titBox #introBox .flex dd span,
#single #profile .flex dd span {
font-size: 75%;
font-weight: 400;
display: block;
}
#single p.desc {
font-size: 18px;
line-height: 2;
margin: 0 auto;
padding: 1em 0;
max-width: 800px;
}
#single p.desc.caption {
padding: 0;
font-size: 13px;
line-height: 1.5;
}
#single #titBox .indexBox {
margin: 30px auto;
border: #555 solid 1px;
border-radius: 20px;
padding: 20px 50px 30px;
}
#single #titBox .indexBox h4 {
padding-bottom: 0.5em;
text-align: center;
font-size: 24px;
}
#single #titBox .indexBox li {
font-size: 20px;
text-indent: -1.1em;
line-height: 1.2;
padding: 0.3em 0;
padding-left: 1.1em;
}
#single #titBox .indexBox li a:hover {
opacity: 0.6;
}
#single .sec {
padding: 30px 0;
}
#single .sec h2 {
font-size: 32px;
font-weight: 700;
padding: 0.8em 0;
line-height: 1.3;
border-top: #c8c9ca solid 2px;
border-bottom: #c8c9ca solid 2px;
margin-bottom: 0.5em;
}
#single .sec h3 {
font-size: 28px;
font-weight: 500;
padding: 1em 0 0.5em;
line-height: 1.3;
border-bottom: #E61E73 solid 2px;
margin-bottom: 0.5em;
}
#single .sec .imgBox {
/* padding: 20px 0;*/
}
#single .sec .imgBox.mgnTop {
margin-top: 20px;
}
#single .editer {
padding-bottom: 30px;
align-items: center;
}
#single .editer .imgBox {
width: 120px;
}
#single .editer .imgBox p {
text-align: center;
padding: 0.5em 0;
font-size: 14px;
}
#single .editer .txtBox {
width: calc(100% - 160px);
background-color: #e9f3fb;
font-size: 16px;
padding: 1.5em;
border-radius: 15px;
position: relative;
display: flex;
align-items: center;
}
#single .editer_bl .txtBox {
background-color: #e9f3fb;
}
#single .editer .txtBox::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
right: 100%;
top: 45%;
transform: translateY(-50%);
border-right: #e9f3fb solid 30px;
border-top: transparent solid 15px;
border-bottom: transparent solid 15px
}
#single .editer_pk .txtBox::after {
border-right: #fbe8e8 solid 30px;
}
#single #secOsusume {
padding: 30px 0;
}
#single #secOsusume h3,
#single .putihamo h3.puti,
#single #secRecipe h3,
#single #secSisetu h3{
font-size: 34px;
color: #fff;
text-align: center;
padding: 0.3em;
background-color: #e95b71;
border-radius: 15px;
margin-bottom: 20px;
}
#single #secOsusume .flex {}
#single #secOsusume .flex .itemBox {
width: 45%;
padding: 20px 0;
}
#single #secOsusume .flex .itemBox .imgBox {
width: 80%;
margin: 10px auto;
border-radius: 15px;
overflow: hidden;
}
#single #secOsusume .flex .itemBox dt {
font-size: 18px;
text-align: center;
padding: 0.3em 0;
font-weight: 700;
}
#single #secOsusume .flex .itemBox dd {
font-size: 16px;
}
#single .recom {
position: relative;
}
#single .recom::after {
content: '';
position: absolute;
width: 50%;
height: 30%;
left: 0;
top: 3%;
background-image: url("../img/icon-recom.png");
background-position: left top;
background-repeat: no-repeat;
background-size: 100%;
}
#single #secOsusume .btnBox {
padding: 30px 0;
}
#single #secOsusume .btnBox a {
width: 460px;
height: 80px;
color: #fff;
background-color: #e95b71;
border: #e95b71 solid 2px;
text-align: center;
font-size: 21px;
dibackground-color: #e95b71;
text-align: center;
margin: 0 auto;
}
#single #secOsusume .btnBox a span {
display: flex;
justify-content: center;
align-items: center;
}
#single #secOsusume .btnBox a img {
display: inline-block;
width: 2.5em;
margin-right: 10px;
}
#single #secOsusume .btnBox a:hover::after{
color: #e95b71;
}
#single #secOsusume .btnBox .caption {
text-align: center;
font-size: 15px;
}
#single .addBox {
border: #9e9e9f solid 2px;
border-radius: 15px;
padding: 20px 0;
}
#single .addBox h3 {
font-size: 22px;
text-align: center;
padding: 0.3em;
margin-bottom: 1em;
border-bottom: #9e9e9f solid 2px;
}
#single .addBox .flex {
padding: 2% 5%;
}
#single .addBox .flex .leftBox {
width: 58%;
font-size: 15px;
overflow-wrap: break-word;
word-break: break-word;
}
#single .addBox .flex .leftBox a {
line-height: 1;
}
#single .addBox .flex .rightBox {
width: 36%;
}
#single .addBox .flex .rightBox .btnGmap {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
color: #fff;
font-size: 16px;
border-radius: 99px;
}
#single .addBox .flex .rightBox .btnGmap:hover {
opacity: 0.6;
}
#single .addBox .flex .rightBox .btnGmap .map {
width: 25px;
margin: 0 10px;
}
#single .addBox .flex .rightBox .btnGmap .try {
width: 10px;
margin: 0 10px;
}
#single .addBox .flex .rightBox .btnBox {
justify-content: flex-end;
padding-top: 10px;
}
#single .addBox .flex .rightBox .btnBox a {
border: #000 solid 1px;
width: 40px;
margin: 5px;
border-radius: 100%;
}
#single .addBox .flex .rightBox .btnBox a:hover {
background-color: #eee;
}
#single .addBox .flex .note {
padding: 1em;
border: #FF0004 solid 1px;
color: #FF0004;
font-size: 15px;
margin-top: 1em;
}
#single #secPresent {}
#single #secPresent .frame {
position: relative;
border: #2BABDD solid 2px;
border-radius: 15px;
background-color: #FFF8E9;
padding: 8% 3% 3%;
}
#single #secPresent .frame h4 {
width: 65%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
}
#single #secPresent .frame .flex {}
#single #secPresent .frame .flex dl {
width: 74%;
}
#single #secPresent .frame .flex dt {
font-size: 28px;
color: #00A2DB;
}
#single #secPresent .frame .flex dd {
font-size: 18px;
line-height: 2;
margin: 0 auto;
padding: 1em 0;
}
#single #secPresent .frame .flex .imgBox {
width: 24%;
}
#single a.linkGrn {
display: block;
width: 20em;
margin: 0 auto;
font-size: 21px;
line-height: 1.3;
color: #fff;
text-align: center;
padding: 0.6em 1em;
background-color: #00A983;
border-radius: 12px;
margin-bottom: 20px;
}
#single a.linkGrn:hover {
opacity: 0.6;
}
#single .sec .linkBox {
background-color: #EAEAE2;
padding: 1em;
font-size: 18px;
margin: 20px 0;
}
#single .sec .linkBox a span {
text-decoration: underline;
}
#single .sec .linkBox a::before {
content: '●';
color: #EE8382;
margin-right: 0.3em;
}
@media screen and (max-width: 959px) {
#single #titBox {
padding-top: 30px;
}
#single a.linkGrn {
font-size: clamp(20px, 2.7vw, 22px);
}
}
@media screen and (max-width: 599px) {
#single article {
padding-bottom: 50px;
}
#bread a,#bread span {
font-size: clamp(12px, 3.5vw, 14px);
}
#single #titBox {
padding-top: 20px;
}
#single #titBox .boxWidth {
width: 100%;
}
#single #titBox h1 {
font-size: clamp(25px, 6.9vw, 27px);
}
#single #titBox h2,
#single.oshihamo h3.area
{
font-size: clamp(15px, 4.3vw, 17px);
}
#single #titBox p.cat {
font-size: clamp(13px, 3.7vw, 15px);
}
#single #titBox #introBox,
#single #profile {
padding: 5%;
}
#single #titBox #introBox .flex .imgBox,
#single #profile .flex .imgBox {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
margin: 1em auto;
}
#single #titBox #introBox .iconFlex,
#single #profile .iconFlex {
/*flex-direction: column-reverse;*/
}
#single #titBox #introBox .flex .iconBox,
#single #profile .flex .iconBox {
width: 50px;
height: 50px;
}
#single #titBox #introBox .flex dl,
#single #profile .flex dl {
flex: none;
width: 100%;
padding-left: 0%;
}
#single #titBox #introBox .flex dt,
#single #profile .flex dt {
font-size: 15px;
font-weight: 400;
text-align: center;
}
#single #titBox #introBox .flex dt p,
#single #profile .flex dt p {
text-align: center;
}
#single #titBox #introBox .flex dd,
#single #profile .flex dd {
font-size: 21px;
padding-top: 0.5em;
text-align: center;
}
#single #titBox #introBox .flex dd span,
#single #profile .flex dd span {
font-size: 14px;
padding-top: 0.3em;
}
#single dd span.txtL{
text-align: justify;
}
#single p.desc {
font-size: clamp(15px, 4.3vw, 17px);
line-height: 2;
padding: 1em ;
}
#single #titBox .indexBox {
margin: 10px auto;
border-radius: 10px;
padding: 3% 5%;
}
#single #titBox .indexBox h4 {
font-size: 14px;
}
#single #titBox .indexBox li {
font-size: clamp(13px, 3.7vw, 15px);
padding-top: 0.5em;
padding-bottom: 0.5em;
}
#single .sec h2 {
font-size: clamp(23px, 6.4vw, 25px);
}
#single .editer .imgBox {
width: 120px;
margin: 0 auto;
}
#single .editer .txtBox {
width: 100%;
background-color: #e9f3fb;
font-size: 16px;
padding: 1.5em;
border-radius: 15px;
position: relative;
margin-top: 30px;
}
#single .editer .txtBox::after {
width: 30px;
height: 30px;
right: auto;
left: 50%;
top: auto;
bottom: 100%;
transform: translateX(-50%);
border-bottom: #e9f3fb solid 30px;
border-left: transparent solid 15px;
border-right: transparent solid 15px;
}
#single .editer_pk .txtBox::after {
border-bottom: #fbe8e8 solid 30px;
border-left: transparent solid 15px;
border-right: transparent solid 15px;
}
#single #secOsusume h3, #single .putihamo h3,
#single #secRecipe h3,
#single #secSisetu h3{
font-size: clamp(18px, 5.1vw, 20px);
border-radius: 5px;
margin-bottom: 20px;
}
#single #secOsusume .flex {
max-width: 350px;
margin: 0 auto;
}
#single #secOsusume .flex .itemBox {
width: 100%;
padding: 20px 0;
}
#single #secOsusume .btnBox a {
width: 100%;
height: 80px;
font-size: clamp(14px, 4.4vw, 18px);
}
#single .addBox h3 {
font-size: clamp(18px, 5.1vw, 20px);
}
#single .addBox .flex {
padding: 2% 3%;
}
#single .addBox .flex .leftBox {
width: 100%;
font-size: clamp(15px, 4.3vw, 17px)
}
#single .addBox .flex .rightBox {
width: 100%;
margin-top: 20px;
}
#single .addBox .flex .rightBox .btnBox {
justify-content: center;
padding-top: 10px;
}
#single #secPresent .frame .flex {
padding: 5%;
}
#single #secPresent .frame .flex dl {
width: 100%;
}
#single #secPresent .frame .flex dt {
font-size: clamp(19px, 5.3vw, 21px);
}
#single #secPresent .frame .flex dd {
font-size: clamp(15px, 4.3vw, 17px);
}
#single #secPresent .frame .flex .imgBox {
width: 100%;
text-align: center;
}
#single #secPresent .frame .flex .imgBox img {
width: 75%;
max-width: 240px;
}
#single .sec h3 {
font-size: clamp(19px, 5.3vw, 21px);
text-align: center;
}
#single a.linkGrn {
font-size: clamp(13px, 4.3vw, 17px);
}
#single #secOsusume h3,
#single .putihamo h3.puti,
#single #secRecipe h3,
#single #secSisetu h3{
font-size: clamp(23px, 6.4vw, 25px);
}
}
/*===============osihamo===============*/
#single.oshihamo .desc.oshibito {
padding: 1em 0;
}
#single.oshihamo #introBox {
margin-top: 30px;
}
#single.oshihamo h3.area {
padding: 0em 0 0.4em;
line-height: 1.3;
border-bottom: #c8c9ca solid 2px;
margin-bottom: 0.5em;
}
#single .editer_pk .txtBox {
background-color: #fbe8e8;
}
#single.oshihamo .addBox .flex {
padding: 2% 5%;
position: relative;
}
#single.oshihamo .addBox .flex .leftBox {
width: 100%;
}
#single.oshihamo .addBox .flex .rightBox {
position: absolute;
width: 15em;
top: 5%;
right: 2em;
}
#single.oshihamo .putihamo .imgBox {
padding-bottom: 30px;
}
#single.oshihamo .putihamo .editer .txtBox {
background-color: #e9f3fb;
text-align: justify;
}
@media screen and (max-width: 599px) {
#single.oshihamo h3.area {
font-size: clamp(15px, 4.3vw, 17px);
}
#single.oshihamo .addBox .flex .rightBox {
position: static;
width: 100%;;
top: 5%;
right: 2em;
}
}
/*==============recipe===============*/
#category.recipe #largeImgWrap .txtBox h2 {
width: 100%;
margin: 0 auto;
}
/*==============recipe===============*/
#single.recipe {
}
/*#single.recipe #introBox .flex {
max-width: 500px;
margin: 0 auto;
}
#single.recipe #titBox #introBox p.name {
font-size: 28px;
padding-bottom: 0;
text-align: left;
font-weight: 400;
line-height: 1.2;
}
#single.recipe #titBox #introBox .flex dd span,
#single.recipe #profile .flex dd span {
font-size: 75%;
font-weight: 400;
display: block;
padding-bottom: 0.5em;
}*/
#single.recipe #titBox #introBox .flex dd span.desc {
padding-top: 0.5em;
}
#single.recipe #secRecipe {}
#single.recipe #secRecipe .material {
background-color: #eaeae2;
padding: 30px;
justify-content: center;
align-items: center;
margin: 30px 0;
}
#single.recipe #secRecipe .material dt {
padding: 0 2em;
font-size: 22px;
font-weight: 400;
}
#single.recipe #secRecipe .material dd {
border-left: #777 solid 1px;
padding: 0 2em;
font-size: 18px;
}
#single.recipe #secRecipe .itemBox {
padding: 30px 0;
}
#single.recipe #secRecipe .itemBox dl {}
#single.recipe #secRecipe .itemBox dt {
font-weight: 400;
font-size: 26px;
border-top: #c9caca solid 3px;
display: inline-block;
padding: 0.5em 1em 0.5em;
}
#single.recipe #secRecipe .itemBox dt span {
color: #e9546b;
border-right: #e9546b solid 4px;
display: inline-block;
padding-right: 0.8em;
margin-right: 0.8em;
}
#single.recipe #secRecipe .itemBox dd {
font-size: 18px;
padding: 0.5em 0;
}
#single.recipe #secRecipe .itemBox dd dl {
padding: 0;
margin: 0.6em 0;;
padding-right: 1em;
border:#ccc solid 1px;
background-color: #fafafa;
}
#single.recipe #secRecipe .itemBox dd dl dt {
border: #ccc solid 1px;
display: flex;
justify-content: center;
align-items: center;
background-color: #999;
color: #fff;
margin-right: 1em;
font-size: 90%;
}
#single.recipe #secRecipe .itemBox dd dl dd {
flex: 1;
font-size: 90%;
}
#single.recipe #secRecipe .pointBox {
border: #ee8593 solid 2px;
padding: 30px;
position: relative;
margin: 0px 0 30px;
}
#single.recipe #secRecipe .pointBox h4 {
position: absolute;
width: 15%;
left: 30px;
top: -1px;
}
#single.recipe #secRecipe .pointBox .flex {
display: flex;
align-items: center;
}
#single.recipe #secRecipe .pointBox .flex p {
width: 50%;
font-size: 18px;
padding-top: 1em;
}
#single.recipe #secRecipe .pointBox .flex .imgBox {
width: 45%;
}
#single.recipe #owner {
margin: 30px auto;
}
@media screen and (max-width: 959px) {}
@media screen and (max-width: 599px) {
#single.recipe #titBox #introBox p.name {
font-size: clamp(23px, 6.4vw, 25px);
text-align: center;
}
#single.recipe #titBox #introBox .flex dd span, #single.recipe #profile .flex dd span {
font-size: clamp(13px, 3.7vw, 15px);
text-align: justify;
}
#single.recipe #secRecipe .material dt {
width: 100%;
font-size: clamp(18px, 5.1vw, 20px);
padding: 0 0 0.3em 0;;
text-align: center;
}
#single.recipe #secRecipe .material dd {
width: 100%;
border: none;
font-size: clamp(13px, 3.7vw, 15px);
border: none;
border-top: #777 solid 1px;
padding: 0.5em 0 0 0;
}
#single.recipe #secRecipe .itemBox dt {
font-size: clamp(19px, 5.3vw, 21px);
}
#single.recipe #secRecipe .itemBox dd {
font-size: clamp(15px, 4.3vw, 17px);
}
#single.recipe #secRecipe .pointBox {
border: #ee8593 solid 2px;
padding: 0 30px 30px;
position: relative;
margin: 0px 0 30px;
}
#single.recipe #secRecipe .pointBox h4 {
position: static;
width: 30%;
}
#single.recipe #secRecipe .pointBox .flex {
display: flex;
align-items: center;
}
#single.recipe #secRecipe .pointBox .flex p {
width: 100%;
font-size: clamp(15px, 4.3vw, 17px);
padding: 0.5em 0;
}
#single.recipe #secRecipe .pointBox .flex .imgBox {
width: 100%;
}
}
/*===============About Us===============*/
#aboutus {}
#aboutus article {
padding-bottom: 80px;
}
#aboutus #mainwrap {
max-width: 1200px;
padding: 50px 0;
align-items: center;
}
#aboutus #mainwrap .imgBox {
width: 50%;
}
#aboutus #mainwrap .txtBox {
width: 45%;
}
#aboutus #mainwrap .txtBox h3 {
font-size: 32px;
padding: 0.5em 0
}
#aboutus #mainwrap .txtBox p {
font-size: 20px;
padding: 0.5em 0;
line-height: 1.6;
letter-spacing: 0.1em;
}
#aboutus #membersWrap {
max-width: 800px;
padding: 30px 0;
}
#aboutus #membersWrap h2 {
font-size: 32px;
font-weight: 700;
padding: 0.8em 0;
line-height: 1.3;
border-top: #c8c9ca solid 2px;
border-bottom: #c8c9ca solid 2px;
margin-bottom: 0.5em;
}
#aboutus #membersWrap .members {
padding: 30px 0;
}
#aboutus #membersWrap .members .imgBox {
padding: 0.5em 0;
}
#aboutus #membersWrap .members p {
font-size: 20px;
padding: 0.5em 0;
}
#aboutus #membersWrap .memberBox {
border-top: #c8c9ca solid 2px;
padding: 50px 0;
align-items: center;
}
#aboutus #membersWrap .memberBox:nth-child(2n) {
flex-direction: row-reverse;
}
#aboutus #membersWrap .memberBox .imgBox {
width: 34%;
/*border-radius: 50%;
overflow: hidden;*/
}
#aboutus #membersWrap .memberBox .imgBox p {
text-align: center;
font-size: 24px;
padding-top: 0.3em;
}
#aboutus #membersWrap .memberBox dl,
#aboutus #membersWrap .memberBox .txtBox{
width: 60%;
}
#aboutus #membersWrap .memberBox dt {
font-size: 30px;
padding: 0.5em 0;
}
#aboutus #membersWrap .memberBox dd,
#aboutus #membersWrap .memberBox .txtBox p {
font-size: 16px;
padding: 0.5em 0;
line-height: 2.2;
}
#aboutus .ilstrator {
max-width: 800px;
background-color: #e9e9e1;
padding: 30px;
}
#aboutus .ilstrator .flex {
max-width: 520px;
margin: 0 auto;
padding: 20px 0;
align-items: center;
}
#aboutus .ilstrator .flex .iconBox {
width: 30%;
border-radius: 50%;
overflow: hidden;
}
#aboutus .ilstrator .flex dl {
width: 60%;
}
#aboutus .ilstrator .flex dt {
font-size: 16px;
}
#aboutus .ilstrator .flex dd {
font-size: 28px;
}
#aboutus .ilstrator p {
font-size: 18px;
padding: 1em;
}
#aboutus .ilstrator .imgBox {
max-width: 350px;
margin: 20px auto;
border-radius: 20px;
overflow: hidden;
}
#aboutus .ilstrator .imgBox.comesoon {
position: relative;
}
#aboutus .ilstrator .imgBox.comesoon::after {
content: 'COMING SOON';
color: #fff;
font-size: 24px;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.5);
}
@media screen and (max-width: 959px) {
#aboutus #mainwrap {
max-width: 600px;
margin: 0 auto;
}
#aboutus #mainwrap .imgBox {
width: 100%;
}
#aboutus #mainwrap .txtBox {
width: 100%;
}
#aboutus #mainwrap .txtBox h3 {
font-size: clamp(28px, 3.8vw, 30px);
padding: 0.5em 0;
text-align: center;
}
#aboutus #mainwrap .txtBox p {
font-size: clamp(18px, 2.5vw, 20px);
letter-spacing: 0.1em;
text-align: center;
}
}
@media screen and (max-width: 599px) {
#aboutus #membersWrap h2 {
font-size: clamp(27px, 7.5vw, 29px);
}
#aboutus #mainwrap .txtBox h3 {
font-size: clamp(31px, 8.5vw, 33px);
}
#aboutus #mainwrap .txtBox p {
font-size: clamp(13px, 4.3vw, 17px);
letter-spacing: 0em;
text-align: center;
line-height: 2.4;
}
#aboutus #membersWrap .members p {
font-size: clamp(13px, 4.3vw, 17px);
}
#aboutus #membersWrap .memberBox .imgBox {
margin: 0 auto;
}
#aboutus #membersWrap .memberBox dl,
#aboutus #membersWrap .memberBox .txtBox {
width: 100%;
}
#aboutus #membersWrap .memberBox dt,
#aboutus #membersWrap .memberBox .imgBox p {
font-size: clamp(17px, 4.8vw, 19px);
text-align: center;
padding-bottom: 0.5em;
}
#aboutus #membersWrap .memberBox dd,
#aboutus #membersWrap .memberBox .txtBox p {
font-size: clamp(13px, 4.3vw, 17px);
line-height: 1.6;
}
#aboutus .ilstrator {
width: 100%;
padding: 3%;
}
#aboutus .ilstrator .flex .iconBox {
width: 50%;
margin: 0 auto;
}
#aboutus .ilstrator .flex dl {
width: 100%;
padding-top: 1em;
}
#aboutus .ilstrator .flex dt {
text-align: center;
font-size: clamp(13px, 3.7vw, 15px);
}
#aboutus .ilstrator .flex dd {
text-align: center;
font-size: clamp(27px, 7.5vw, 29px);
}
#aboutus .ilstrator p {
font-size: clamp(13px, 4.3vw, 17px);
}
}
/*===============present===============*/
#present {}
#present article {
padding-bottom: 80px;
}
#present #mainwrap {
padding: 50px 0;
max-width: 900px;
}
#present #mainwrap p {
background-color: #fceaea;
position: relative;
padding: 3% 6%;
border-radius: 15px;
font-size: 20px;
}
#present #mainwrap p::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
right: auto;
left: 50%;
top: 100%;
transform: translateX(-50%);
border-top: #fceaea solid 40px;
border-left: transparent solid 20px;
border-right: transparent solid 20px;
}
#present #mainwrap .imgBox {
max-width: 450px;
padding: 50px 0 0;
margin: 0 auto;
}
#present #clubWrap {
max-width: 500px;
padding-bottom: 30px;
}
#present #clubWrap a {
max-width: 280px;
margin: 30px auto;
font-size: 24px;
padding: 0.3em 0;
}
@media screen and (max-width: 959px) {
#present #mainwrap p {
font-size: clamp(16px, 2.2vw, 18px);
padding: 5% 10%;
}
}
@media screen and (max-width: 599px) {
#present #mainwrap p {
font-size: clamp(15px, 4.3vw, 17px);
padding: 8% 8%;
}
}
/*===============membership resist===============*/
#membership .btnAld{text-align: center;}
#membership .btnAld a{
background-color: #fff;
color: rgba(234,92,113,1);
font-size: 18px;
border:rgba(234,92,113,1) solid 1px;
padding: 0.2em 1.5em;
border-radius: 999px;
}
#membership .btnAld a:hover {
background-color: rgba(234,92,113,1);
color: #fff;
}
#membership #bosyuWrap,
#membership #registWrap,
#membership #note,
#membership #already {
max-width: 860px;
padding: 30px 0;
}
#membership #bosyuWrap h4 {
color: rgba(234,92,113,1);
text-align: center;
font-size: 32px;
font-weight: 500;
}
#membership #bosyuWrap p {
font-size: 20px;
padding: 0.5em 0;
text-align: center;
}
#membership #bosyuWrap .iconWrap {
padding-top: 30px;
}
#membership #bosyuWrap .iconWrap .btnIcon {
width: 30%;
text-align: center;
}
#membership #bosyuWrap .iconWrap .btnIcon dt {
width: 50%;
margin: 0 auto;
}
#membership #bosyuWrap .iconWrap .btnIcon dd {
width: 100%;
text-align: center;
font-size: 16px;
}
#membership #bosyuWrap .iconWrap .btnIcon dd p {
font-size: 24px;
padding-bottom: 0;
font-weight: 500;
}
#membership #registWrap {
}
#membership #registWrap h4 {
background-color: rgba(234,92,113,0.8);
color: #fff;
text-align: center;
font-size: 30px;
font-weight: 500;
padding: 0.2em;
border-radius: 10px;
}
#membership #registWrap p {
font-size: 20px;
padding: 1em 0;
}
#membership #registWrap .flex {
padding: 20px 0;
}
#membership #registWrap .flex dl {
width: 32%;
}
#membership #registWrap .flex dt {
padding: 15% 5%;
color: #fff;
font-size: 24px;
line-height: 1.2;
position: relative;
}
#membership #registWrap .flex .dl01 dt::after,
#membership #registWrap .flex .dl02 dt::after{
content: '';
position: absolute;
width: 30%;
height: 102%;
top: -1%;
right: -1px;
background-image:url("../../membership/img/w-wrap.svg");
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
}
#membership #registWrap .flex .dl01 dt {
background-color: rgba(234,92,113,0.8);
}
#membership #registWrap .flex .dl02 dt {
background-color: rgba(234,92,113,0.4);
color: #000;
}
#membership #registWrap .flex .dl03 dt {
background-color: #ddd;
color: #000;
}
#membership #registWrap .flex dt span {
font-size: 75%;
display: block;
}
#membership #registWrap .flex dd {
width: 80%;
font-size: 15px;
padding: 0.5em 0;
}
#membership #registWrap {}
#membership #note {}
#membership #note {
margin-bottom: 0px;
/*background-color: rgba(234,92,113,0.8);*/
border-radius: 15px;
color: #fff;
padding: 0px 0;
}
#membership #note h4 {
font-size: 16px;
background: none;
color: #C10609;
border-top: #C10609 solid 1px;
border-bottom: #C10609 solid 1px;
border-radius: 0;
text-align: center;
font-weight: 500;
padding: 0.2em;
}
#membership #note p {
font-size: 15px;
line-height: 2;
padding: 1.5em 0;
text-align: center;
color: #C10609;
}
#membership #about {
max-width: 860px;
padding: 30px 0;
margin-bottom: 60px;
}
#membership #about h4 {
background-color: #eaeae2;
color: #000;
margin-bottom: 30px;
text-align: center;
font-size: 30px;
font-weight: 500;
padding: 0.2em;
border-radius: 10px;
}
#membership #about .terms {
width: 100%;
height: 200px;
margin-bottom: 10px;
padding: 2em;
overflow-y: scroll;
box-sizing: border-box;
border: 1px solid #ccc;
font-size: 17px;
}
#membership #about .terms ul {
padding-left: 1em;
}
#membership #about .terms li {
padding: 0.5em 0;
list-style: disc;
}
#membership #about #agr {
opacity: 0.5;
font-size: 18px;
text-align: center;
padding: 1em 0;
pointer-events: none;
}
#membership #about #agr.active {
opacity: 1;
pointer-events:auto;
}
.deco-check { font-size: 18px; display: block;}
.deco-check:hover { cursor: pointer; }
.deco-check input { display: none; }
.deco-check .dummy {
width: 1.5em;
height: 1.5em;
border: 2px solid #f50057;
border-radius: 15%;
display: inline-flex;
vertical-align: text-top;
}
.deco-check input:checked+.dummy:after {
content: '';
width: 75%;
height: 60%;
border-left: 2px solid #f50057;
border-bottom: 2px solid #f50057;
transform: rotate(-45deg);
}
#membership a.btnRegist {
width: 400px;
margin: 0 auto;
margin-top: 30px;
}
#membership a.btnRegist:hover {
opacity: 0.6;
}
#membership a.btnRegist {
display: block;
width: 400px;
font-size: 28px;
background-color: rgba(234,92,113,0.8);
color: #fff;
text-align: center;
padding: 0.6em 0;
}
#membership #memberwrap a:hover {
opacity: 0.6;
}
#membership #already {
border: rgba(234,92,113,0.5) solid 2px;
padding: 30px;
margin-bottom: 100px;
}
#membership #already h3 {
text-align: center;
font-size: 24px;
font-weight: 500;
}
#membership #already h3::before,#membership #already h3::after {
content: ' ──── ';
color: rgba(234,92,113,0.5);
}
#membership #already ul {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding-top: 30px;
gap: 0 3em;
}
#membership #already ul li {
}
#membership #already ul li a {
font-size: 20px;
}
#membership #already ul li a:hover {
opacity: 0.5;
}
@media screen and (max-width: 959px) {
#membership #bosyuWrap .iconWrap .btnIcon dd p {
font-size: clamp(20px, 2.7vw, 22px);
}
#membership #bosyuWrap .iconWrap .btnIcon dd {
font-size: clamp(14px, 2vw, 16px);
}
#membership #already h3 {
font-size: clamp(20px, 2.7vw, 22px);
}
#membership #already ul li a {
font-size: clamp(16px, 2.2vw, 18px);
}
}
@media screen and (max-width: 599px) {
#membership #bosyuWrap h4 {
font-size: clamp(21px, 5.9vw, 23px);
padding: 0.5em 0;
}
#membership #bosyuWrap p {
font-size: clamp(13px, 3.7vw, 15px);
padding-bottom: 1em;
}
#membership .btnAld a {
font-size: clamp(15px, 4.3vw, 17px);
}
#membership #bosyuWrap .iconWrap {
gap:30px 0;
}
#membership #bosyuWrap .iconWrap .btnIcon {
width: 80%;
margin: 0 auto;
text-align: center;
}
#membership #bosyuWrap .iconWrap .btnIcon dd {
font-size: clamp(13px, 3.7vw, 15px);
}
#membership #bosyuWrap .iconWrap .btnIcon dd p {
font-size: 180%;
}
#membership #step p {
font-size: clamp(15px, 4.3vw, 17px);
}
#membership #registWrap h4 {
font-size: clamp(20px, 2.7vw, 22px);
padding: 0.5em 0;
}
#membership #registWrap p {
font-size: clamp(15px, 4.3vw, 17px);
}
#membership #registWrap .flex dl {
width: 100%;
padding-bottom: 20px;
}
#membership #registWrap .flex dt {
/*padding: 7% 5%;*/
text-align: center;
font-size: clamp(21px, 5.9vw, 23px);
line-height: 1.2;
position: relative;
padding: 10% 5%;
}
#membership #registWrap .flex dd {
width: 100%;
text-align: center;
}
#membership #registWrap .terms {
width: 100%;
height: 200px;
margin-bottom: 10px;
padding: 1em;font-size: clamp(15px, 4.3vw, 17px);
}
#membership #registWrap a.btnRegist {
width: inherit;
}
#membership #registWrap .flex .dl01 dt::after,
#membership #registWrap .flex .dl02 dt::after{
content: '';
position: absolute;
width: calc(100% + 4px);
height: 50%;
top: auto;
bottom: -1px;
left: -2px;
background-image:url("../../membership/img/w-wrap_sp.svg");
background-size: 100%;
background-position: left bottom;
background-repeat: no-repeat;
}
#membership #note {
margin-bottom: 30px;
}
#membership #note p {
text-align: justify;
padding: 1em;
line-height: 1.8;
}
#membership #note p br {
display: none;
}
#membership #about h4 {
font-size: clamp(20px, 2.7vw, 22px);
padding: 0.5em 0;
}
#membership #about .terms {
width: 100%;
height: 200px;
margin-bottom: 10px;
padding: 1em;
font-size: clamp(15px, 4.3vw, 17px);
}
#membership #about .terms li {
font-size: clamp(15px, 4.3vw, 17px);
}
#membership a.btnRegist {
width: inherit;
}
#membership a.btnRegist {
font-size: clamp(19px, 5.3vw, 21px);
}
#membership #already {
padding: 3%;
}
#membership #already h3 {
text-align: center;
font-size: clamp(19px, 5.3vw, 21px);
padding-top: 0.3em;
}
#membership #already h3::before,#membership #already h3::after {
display: none;
}
#membership #already ul {
display: block;
padding: 0.6em 0;
padding-left: 20%;
}
#membership #already li {
padding: 0.3em 0;
}
}
/*===============energy misumi===============*/
#single.misumi #secSisetu h3 {
font-size: 30px;
}
#single.misumi .editer {
padding: 50px 0 0px;
align-items: center;
}
#single.misumi .addBox .flex .flex100 {
width: 100%;
font-size: 15px;
}
@media screen and (max-width: 959px) {
#single.misumi #secSisetu h3 {
font-size: clamp(24px, 3.3vw, 26px);
}
}
@media screen and (max-width: 599px) {
#single.misumi #secSisetu h3 {
font-size: clamp(18px, 5.1vw, 20px);
padding: 0.5em 1em;
}
}
/*===============motoshige===============*/
#single .yelWrap {
background-color: #fffbcb;
padding: 1em 2em;
}
#single .yelWrap p.desc {
padding: 0;
line-height: 1.6;
overflow-wrap:break-word;
}
/*===============recommend===============*/
#catWrap.recommend {
padding: 50px 0;
}
#catWrap.recommend h2 {
padding: 30px 0 0px;
font-size: 18px;
max-width: 900px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
#catWrap.recommend h2 img {
width: 50%;
max-width: 300px;
margin-right: 0.5em;
}
#catWrap.recommend #catBox {
max-width: 900px;
}
#catWrap.recommend .itemBox {
width: 22.5%;
}
#catWrap.recommend .itemBox .imgBox {
border-radius: 8px;
overflow: hidden;
}
#catWrap.recommend .itemBox a .imgBox img {
transition: 0.5s;
}
#catWrap.recommend .itemBox a:hover .imgBox img {
transform: scale(1.1);
}
#catWrap.recommend .itemBox p {
font-size: 15px;
font-weight: 500;
line-height: 1.4;
padding-top: 0;
margin-top: 0.7em;
letter-spacing: -0.05em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
#catWrap.recommend .itemBox p.cat {
font-size: 11px;
padding: 0 0 0 2em;
font-weight: 400;
text-align: left;
}
#catWrap.recommend .itemBox p.cat a {
}
#catWrap.recommend .itemBox p.cat a::before {
content: '';
position: absolute;
width: 1.5em;
height: 100%;
right: 103%;
top: 0%;
}
@media screen and (max-width: 599px) {
#catWrap.recommend h2 {
font-size: clamp(15px, 4.3vw, 17px);
display: block;
text-align: center;
margin-bottom: 1em;
}
#catWrap.recommend h2 img {
width: 70%;
max-width: 300px;
display: block;
margin: 0 auto;
}
#catWrap.recommend .itemBox {
width: 47%;
padding-bottom: 20px;
}
#catWrap.recommend .itemBox p.cat {
}
}
ul.iconBox {
}
ul.iconBox li {
display: inline-block;
width: 120px;
margin: 1px;
}
#single .mv-Wrap {
padding-top: 3%;
padding-bottom: 5%;
/* padding: 15px 30px;
box-shadow: 0px 1px 10px rgba(0,0,0,0.2) inset;
border-radius: 16px;*/
max-width: 800px;
margin: 0 auto;
}
#single .mv-Wrap h4 {
margin: 0 auto;
padding-bottom: 10px;
}
#single .mv-Wrap .ytBox {
width: 100%;
height: 0;
padding-top: 56.25%;
position: relative;
background-color: #ddd;
}
.eqp-thumbnail-modal .eqp-water-mark {
display: none;
}
#single .mv-Wrap .ytBox::after {
content:'';
position: absolute;
width: 15%;
height: 30%;
left: 50%;
top: 50%;
background-image: url("../img/icon-move.svg");
background-size: 90%;
background-repeat: no-repeat;
background-position: center center;
transform: translate(-50%,-50%);
pointer-events: none;
opacity: 0.8;
transition: 0.5s;
}
#single .mv-Wrap .ytBox:hover::after,
#single .mv-Wrap a:hover {
opacity: 0.5;
}
#single .mv-Wrap .btMvList a {
width: 60%;
max-width: 250px;
margin: 0 auto;
margin-top: 30px;
}
#single .mv-Wrap .btMvList a {
display: block;
background-color: #ee8593;
width: 100%;
height: 100%;
border-radius: 8px;
padding: 1% 3%;
}
#single #addBox {
background-color: #FFFCD3;
padding: 3%;
}
#single #addBox .flex {
align-items: center;
}
#single #addBox .flex .imgBox {
max-width: 380px;
}
#single #addBox .flex .txtBox {
flex: 1;
padding-left: 2em;
}
#single #addBox .flex .txtBox p {
font-size: 18px;
line-height: 2;
}
.itemBox.ud-r::after {
background-image: url("../../img/ud-r.svg");
}
.itemBox.ud-y::after {
background-image: url("../../img/ud-y.svg");
}
.itemBox.ud-g::after {
background-image: url("../../img/ud-g.svg");
}
#btnPage a {
font-size: 20px;
height: 2.5em;
}
@media screen and (max-width: 959px) {
#single #addBox .flex .txtBox p {
font-size: clamp(14px, 2vw, 16px);
}
}
@media screen and (max-width: 599px) {
#single #addBox {
padding: 5%;
}
#single #addBox .flex .imgBox {
max-width: 100%;
width: 100%;
}
#single #addBox .flex .txtBox {
flex: none;;
width: 100%;
padding-left: 0;
padding-top: 1em;
}
#single #addBox .flex .txtBox p {
font-size: 3.7vw;
font-size: clamp(13px, 3.7vw, 15px);
line-height: 1.6;
}
#btnPage a {
font-size: 5.1vw;
font-size: clamp(18px, 5.1vw, 20px);
height: 3em;
}
}
/*================= present ICON ===============*/
/*
.icon_a:nth-of-type(2)::after,
#toppage #clubWrap .flex .rightBox a dt.presetnt::after {
background-color:#FF9596;
animation:1s infinite btnAni;
z-index: -2;
}
@keyframes btnAni{
0%{
}
100%{
transform: scale(1.4);
opacity: 0;
}
}
.icon_a:nth-of-type(2),
#toppage #clubWrap .flex .rightBox a dt.presetnt{
animation:2s infinite boxAni;
}
#toppage #clubWrap .flex .rightBox a dt.presetnt
{
pointer-events: auto;
}
@keyframes boxAni{
0%{
}
50%{
transform: rotatey(360deg);
}
100%{
transform: rotatey(360deg);
}
}
*/
/*================= toppage RANKING ===============*/
#toppage #ranking {
padding: 50px 0;
}
#toppage #ranking #rankBox h2 {
width: 90%;
max-width: 320px;
padding-bottom: 20px;
}
#toppage #ranking #rankBox {}
#toppage #ranking #rankBox .rank {
border-bottom: #9fa0a0 dotted 2px;
padding: 15px 0;
align-items: center;
background-color: #fff;
}
#toppage #ranking #rankBox .rank .num {
width: 7%;
padding: 0 1%;
}
#toppage #ranking #rankBox .rank .imgThumb {
width: 25%;
max-width: 210px;
border-radius: 12px;
overflow: hidden;
}
#toppage #ranking #rankBox .rank:hover {
/*background-color: rgb(255 248 254);*/
box-shadow: 4px 4px 15px rgba(230,30,115,0.5);
transform: translate(-0px,-3px);
}
#toppage #ranking #rankBox .rank .imgThumb img {
transition: 0.3s;
/*width: 110%;
margin-left: -5%;*/
}
#toppage #ranking #rankBox .rank:hover .imgThumb img {
transform: scale(1.1);
}
#toppage #ranking #rankBox .rank p {
flex: 1;
padding-left: 1em;
padding-right: 1em;
font-size: 24px;
font-weight: 600;
line-height: 1.3;
}
@media screen and (max-width: 959px) {
#toppage #ranking #rankBox .rank p {
font-size: clamp(18px, 2.5vw, 20px);
}
}
@media screen and (max-width: 599px) {
#toppage #ranking #rankBox .rank .num {
width: 10%;
padding: 0 2% 0 0;
}
#toppage #ranking #rankBox .rank .imgThumb {
width: 35%;
border-radius: 9px;
}
#toppage #ranking #rankBox .rank p {
/* flex: none;
width: 100%;*/
padding: 0.5em 1em;
font-size: clamp(14px, 4vw, 16px);
}
}
/*================= 記事を読むバナー ===============*/
#single #bnKiji {
padding: 30px 0;
}
#single #bnKiji a {
display: block;
}
#single #bnKiji a:hover {
box-shadow: 4px 4px 15px rgba(230,30,115,0.5);
transform: translate(-0px,-3px);
filter: contrast(110%) saturate(130%);
}
a.kirari {
overflow: hidden;
position: relative;
display: block;
}
a.kirari::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
a.kirari::before {
animation: shine 4s infinite;
}
@keyframes shine {
30% {
left: 125%;
}
100% {
left: 125%;
}
}
a.kirari:hover {
filter: saturate(150%);
opacity: 0.8;
transform: scale(1.02);
}