/* 共通部分のcss */
html {
font-size: 62.5%;
height: 100%;
}
body {
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'ZenKakuGothicNew' , Meiryo, serif,
メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.6;
letter-spacing: 1px;
height: 100%;
min-width: 320px;
}
.spDisp {
display: none;
}
.pcDisp {
display: block;
}
@media screen and (max-width: 480px) {
/* スマホのみ改行(
) */
.spDisp {
display: block;
}
/* PCのみ改行(
) */
.pcDisp {
display: none;
}
}
/*-------------header-------------*/
.header {
width: 100%;
/* overflow: hidden;*/
/* padding: 20px;*/
position: fixed;
top: 0;
padding: 10px 20px;/*初期値上下0px*/
z-index: 100;
transition: 0.6s;
}
@media screen and (max-width: 768px) {
.header {
width: 100%;
position: fixed;
top: 0;
padding: 0px 20px ;/*初期値上下0px*/
z-index: 100;
transition: 0.6s;
}
}
.header_logo {
width: 20%;
float: left;
}
.header_rightBox {
float: right;
width: 67%;
}
/*--TOPだけのロゴ--*/
.header_logoTop {
display: none;
padding-bottom: -20px ;
}
/*--中面だけのロゴ--*/
.header_logoNakamen {
display: block;
padding: 25px 0;/*当初上下20px*/
margin-bottom: 0px ;
}
.pc-nav {
width: 100%;
text-align: right;
}
@media screen and (max-width: 980px) {
.pc-nav {
display: none;
}
}
.pc-nav li {
display: inline-block;
text-align: center;
position: relative;
transition: 0.4s;
}
.pc-nav li::after {
content: "";
position: absolute;
display: block;
background-color: #fff;
width: 0;
height: 8px;
bottom: 0;
left: 24px;
transition: 0.4s ease 0s;
}
.pc-nav li::after {
background-color: #000;
}
.pc-nav li:hover::after {
width: 100%;
}
.pc-nav li a.drawer-brand {
display: block;
height: 100%;
width: 100%;
color: #000;
font-family: futura-pt, sans-serif;
font-weight: 400;
padding: 20px 30px;/*元は20px 25px*/
text-align: center;
font-style: normal;
font-size: 18px;/*元は16かな*/
letter-spacing: 3px;
cursor: pointer;
cursor: hand;
}
.pc-nav .header_slideDownPcInner {
display: none;
position: absolute;
background: #ffff4b;
top: 77px;
z-index: 100;
left: 0;
width: 200px;
padding: 30px 0;
}
.pc-nav .header_slideDownPcInner li {
display: inline-block;
width: 100%;
padding: 0;
}
.pc-nav .header_slideDownPcInner li:hover::after {
display: none;
}
.pc-nav .header_slideDownPcInner li a {
font-size: 14px;
color: #000;
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: normal;
padding: 10px 20px;
display: block;
text-align: left;
height: 100%;
transition: 0.4s;
}
.pc-nav .header_slideDownPcInner li a:hover {
color: #ffff4b;
background: #000;
}
/*-----header縮小時-----*/
.header {
background: #fff;
box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.1);
}
/*--⬇︎これはTOPのみの黒ロゴ---*/
.header_logoAfterSlide {
display: none;
}
/*--------------------------------------------------------------------------------------------------------ここから中面のヘッダーデザインに切り替え-----------------------------------*/
.header__nakamen .header_logo {
width: 300px;
margin-bottom: 10px ;
}
@media screen and (max-width: 480px) {
.header__nakamen .header_logo {
width: 100px;
}
}
.header__nakamen .header_logoNakamen {
display: none;
width: 100%;
margin-top: 30px;
}
@media screen and (max-width: 480px) {
.header__nakamen .header_logoNakamen {
margin-top: 0;
padding: 15px 0;
}
}
.header__nakamen .header_logoTop {
display: none;
}
.smaller .header__nakamen.header .header_logoNakamen {
margin-top: 0;
display: none;
}
.header__nakamen.header .header_logo {
width: 20%;
position: absolute;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.header__nakamen.header .header_logo {
position: relative;
}
}
.header__nakamen .pc-nav {
vertical-align: top;
}
.header__nakamen .pc-nav li a.drawer-brand {
color: #000;
}
.header__nakamen .pc-nav li::after {
background: #000;
}
/*--------------------------------------------------------------------------------------------------------ここまで中面のヘッダーデザインに切り替え-----------------------------------*/
/*--⬆︎これはTOPのみの黒ロゴ---*/
/*--ドロワーの中--*/
.drawer--top .drawer-nav {
height: 100% !important;
}
.drawer-overlay {
display: none !important;
}
.drawer-hamburger {
background: #000 !important;
margin-top: 20px ;/*初期値記載なし*/
}
.header_slideDown ul {
display: none;
}
.drawer-menu li {
margin-top: 11px;/*元は20px*/
text-align: center;
}
.drawer-menu li:first-child {
margin-top: 0;
}
.drawer-menu li a {
font-size: 30px;/*元は40px*/
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: normal;
display: inline-block;
position: relative;
padding: 0;
}
.drawer-menu li a::before {
content: "";
position: absolute;
display: block;
background-color: #191919;
width: 0;
top: 0;
bottom: 0;
transition: 0.4s ease 0s;
z-index: -1;
}
.drawer-menu li a:hover {
color: #fff;
text-decoration: none;
}
.drawer-menu li a:hover::before {
width: 100%;
}
/*-------------ドロワー中をスクロールする-------------*/
.drawer--top.drawer-open .drawer-nav {
top: 0;
overflow: auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
right: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*-------------ドロワー中をスクロールする-------------*/
.header_slideDownInner {
margin-top: 20px;
}
.header_slideDownInner li {
margin-top: 15px;
}
.header_slideDownInner li a {
font-family: futura-pt, sans-serif;
font-weight: 400;
line-height: 0;
color: #000;
transition: 0.4s;
font-size: 22px;
letter-spacing: 1.5px;
}
.header_snsSp {
width: 100%;
max-width: 600px;
margin: 30px auto;
text-align: center;
}
.header_snsSp li {
display: inline-block;
width: 12%;
padding: 0 10px;
}
.header_slideDownInner li a:hover {
color: #575757;
}
.header_snsSp__listOff {
display: block;
}
/*
.header_snsSp__listOn {
display: none;
}
*/
/*
.header_snsSp li:hover .header_snsSp__listOff {
display: none;
}
.header_snsSp li:hover .header_snsSp__listOn {
display: block;
}
*/
/*---------------footer----------------*/
.footer {
background: #000000;
width: 100%;
}
@media screen and (max-width: 768px) {
.footer {
padding-bottom: 50px;
}
}
.footeInner {
padding: 100px 20px;
}
@media screen and (max-width: 480px) {
.footeInner {
padding: 50px 20px;
}
}
.footeInner,
.footer__copyRightBox {
overflow: hidden;
max-width: 1008px;
width: 100%;
margin: 0 auto;
}
.footerInner__L {
float: left;
width: 30%;
}
@media screen and (max-width: 768px) {
.footerInner__L {
float: none;
width: 100%;
text-align: center;
}
}
.footerInner__R {
float: right;
width: 70%;
text-align: right;
}
@media screen and (max-width: 768px) {
.footerInner__R {
float: none;
width: 100%;
text-align: center;
margin-top: 50px;
}
}
@media screen and (max-width: 480px) {
.footerInner__R {
margin-top: 30px;
}
}
.footerInnerR__list {
margin: 0 -10px;
font-size: 0;
}
@media screen and (max-width: 480px) {
.footerInnerR__list {
margin: 0 -3px;
}
}
.footerInnerR__list li {
transition: 0.4s;
display: inline-block;
/* padding: 0 10px;
width: 15%; */
}
@media screen and (max-width: 768px) {
.footerInnerR__list li {
/* margin-top: 10px;
width: 16.6%; */
}
}
@media screen and (max-width: 480px) {
.footerInnerR__list li {
/* padding: 0 3px; */
}
}
/*
.footerInnerR__listOn {
display: none;
}
.footerInnerR__list li:hover .footerInnerR__listOn {
display: block;
}
.footerInnerR__list li:hover .footerInnerR__listOff {
display: none;
}
*/
.footer__copyRightBox {
padding: 20px;
}
.footer__copyRightBoxR,
.footer__copyRightBoxL span a {
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #fff;
}
.footer__copyRightBoxL {
float: left;
width: 50%;
}
.footer__copyRightBoxL span a {
}
@media screen and (max-width: 768px) {
.footer__copyRightBoxL {
float: none;
width: 100%;
text-align: center;
}
}
.footer__copyRightBoxR {
float: right;
width: 50%;
}
@media screen and (max-width: 768px) {
.footer__copyRightBoxR {
float: none;
width: 100%;
text-align: center;
margin-top: 10px;
}
}
#pageTop {
position: fixed;
right: 10px;
bottom: 10px;
transition: 0.4s;
z-index: 10;
}
@media screen and (max-width: 480px) {
#pageTop {
width: 100%;
left: 0;
bottom: 0;
}
}
.pageTop__pc {
display: block;
}
.pageTop__sp {
display: none;
}
@media screen and (max-width: 480px) {
.pageTop__sp {
display: block;
width: 100%;
background: #000;
color: #fff;
padding: 15px 0;
text-align: center;
letter-spacing: 2px;
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: italic;
}
.pageTop__pc {
display: none;
}
}
#pageTop:hover {
opacity: 0.8;
}
/*******---------------共通パーツ----------------********/
.container {
max-width: 1296px;
width: 100%;
margin: 0 auto;
position: relative;
}
.arrow__round {
display: none;
}
@media screen and (max-width: 768px) {
.arrow__round {
display: block;
width: 40px;
bottom: 10px;
right: 10px;
position: absolute;
}
}
@media screen and (max-width: 480px) {
.arrow__round {
width: 25px;
}
}
/*---------------△△△△head01△△△△----------------*/
/*---------------head02----------------*/
.head02__right {
position: absolute;
right: 50px;
top: 0;
font-size: 159px;
z-index: 4;
color: transparent;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: normal;
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1.5px;
}
/* IE11 */
_:-ms-lang(x)::-ms-backdrop,
.head02__right {
color: #000;
}
@media screen and (max-width: 480px) {
.head02__right {
font-size: 56px;
right: -55px !important;
/*margin-bottom: -30px ;
top: 20px;
right: 20px;*/
top: -45px !important;
}
}
.head02__right__fadeIn {
color: #ffff4b;
display: none;
font-family: futura-pt, sans-serif;
font-weight: 600;
position: absolute;
right: 40px;
top: -175px;
font-size: 159px;
z-index: 2;
}
@media screen and (max-width: 480px) {
.head02__right__fadeIn {
font-size: 56px;
top: -50px;
right: 0;
/*margin-bottom: -30px ;*/
}
}
@media all and (-ms-high-contrast: none) {
-webkit-filter: dropshadow(color=#000000, offX=0, offY=-1)
dropshadow(color=#000000, offX=1, offY=0)
dropshadow(color=#000000, offX=0, offY=1)
dropshadow(color=#000000, offX=-1, offY=0);
filter: dropshadow(color=#000000, offX=0, offY=-1)
dropshadow(color=#000000, offX=1, offY=0)
dropshadow(color=#000000, offX=0, offY=1)
dropshadow(color=#000000, offX=-1, offY=0);
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;
text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px 0px,
black -1px -1px 0px;
}
.head02__left {
position: absolute;
font-size: 110px;
z-index: 4;
color: 000;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: normal;
}
.head02__center {
text-align: center;
/*ここ追記*/
text-align: center;
font-family: futura-pt, sans-serif;
font-size: 72px ;
font-weight: 600 ;
}
@media screen and (max-width: 768px) {
.head02__center {
text-align: center;
font-family: futura-pt, sans-serif;
font-size: 42px ;
}
}
.garellyBox__subTitle_csr {
text-align: center;
/*ここ追記*/
font-family: futura-pt, sans-serif;
font-size: 25px ;
margin-top: -20px ;
font-weight: 400 ;
}
@media screen and (max-width: 768px) {
.garellyBox__subTitle_csr {
text-align: center;
font-family: futura-pt, sans-serif;
font-size: 18px ;
margin-top: -10px ;
align-content: center ;
}
}
/*------------△△△△head02△△△△-----------*/
.btn_round {
width: 100%;
max-width: 290px;
margin: 88px auto 0;
}
@media screen and (max-width: 768px) {
.btn_round {
margin: 60px auto 0;
}
}
@media screen and (max-width: 480px) {
.btn_round {
max-width: 230px;
margin: 40px auto -30px;
}
}
.btn_round a {
display: block;
border: 2px solid #000;
height: 100%;
width: 100%;
padding: 20px 0;
position: relative;
border-radius: 50px;
text-align: center;
font-size: 18px;
font-family: futura-pt-bold, sans-serif;
font-weight: 700;
font-style: normal;
background-color: #fff;
color: #000 !important;
background-size: 200% 100%;
background-image: linear-gradient(
to right,
transparent 50%,
rgba(255, 255, 75, 1) 50%
);
transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
color 0.5s ease 0s, background-color 0.5s ease;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.btn_round a {
font-size: 16px;
padding: 15px 0;
}
}
.btn_round a:hover {
background-position: -100% 100%;
letter-spacing: 2px;
}
.btn_round a::after {
content: "";
background-image: url(../../common/img/img_arrow.svg);
position: absolute;
background-size: contain;
right: 20px;
width: 6px;
height: 11px;
top: 50%;
transform: translateY(-50%);
}
.btn_loadMore {
margin: 0 auto;
max-width: 470px;
width: 100%;
}
@media screen and (max-width: 480px) {
.btn_loadMore {
max-width: 300px;
}
}
.btn_loadMore a {
display: block;
background: #000;
border: 2px solid #000;
color: #fff;
font-size: 18px;
padding: 30px 0;
width: 100%;
text-align: center;
border-radius: 50px;
position: relative;
font-family: futura-pt-bold, sans-serif;
font-weight: 700;
font-style: normal;
background-size: 200% 100%;
background-image: linear-gradient(
to right,
transparent 50%,
rgba(255, 255, 255, 1) 50%
);
transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
color 0.5s ease 0s, background-color 0.5s ease;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.btn_loadMore a {
padding: 20px 0;
}
}
.btn_loadMore a::after {
content: "";
background-image: url(../../common/img/img_arrow_plus.svg);
position: absolute;
background-size: contain;
right: 20px;
width: 23px;
height: 23px;
top: 50%;
transform: translateY(-50%);
}
.btn_loadMore a:hover::after {
background-image: url(../../common/img/img_arrow_plus_on.svg);
}
.btn_loadMore a:hover {
background-position: -100% 100%;
letter-spacing: 2px;
color: #000;
}
.loadMore__bg {
width: 100%;
position: relative;
margin-top: -48px;
background: #f8f8f8;
padding: 127px 0;
z-index: -1;
}
@media screen and (max-width: 480px) {
.loadMore__bg {
padding: 60px 0;
}
}
.fadein {
opacity: 0;
transform: translate(0, 100px);
transition: all 1s;
}
.fadein.active {
opacity: 1;
transform: translate(0, 0);
}
/* 動く背景 (mask_fadeIn) の定義 */
@-webkit-keyframes mask_fadeIn {
0% {
/* x方向の倍率を0に */
transform: scaleX(0);
/* 変換の原点を(0, 0)に指定 */
transform-origin: 0 0;
}
45% {
/* x方向の倍率を初期値(1倍)に */
transform: none;
transform-origin: 0 0;
}
50% {
transform: none;
transform-origin: 100% 0;
}
100% {
transform: scaleX(0);
transform-origin: 100% 0;
}
}
@keyframes mask_fadeIn {
0% {
/* x方向の倍率を0に */
transform: scaleX(0);
/* 変換の原点を(0, 0)に指定 */
transform-origin: 0 0;
}
45% {
/* x方向の倍率を初期値(1倍)に */
transform: none;
transform-origin: 0 0;
}
50% {
transform: none;
transform-origin: 100% 0;
}
100% {
transform: scaleX(0);
transform-origin: 100% 0;
}
}
.is-fadeIn {
/*
position: relative;
overflow: hidden;
*/
display: block;
}
.is-fadeIn::after {
content: "";
position: absolute;
left: 0;
top: 0;
transform: translateY(-50%);
width: 100%;
height: 100%;
background: #000;
/* 固定値のx方向の倍率を0に。アニメーション後の横幅が0になる。 */
transform: scaleX(0);
/* キーフレームで定義した「mask_fadeIn」を動かす。 */
-webkit-animation: mask_fadeIn 1s cubic-bezier(0.77, 0, 0.175, 1) 0s;
animation: mask_fadeIn 1s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
/*******------------△△△△共通パーツ△△△△-----------*******/
/* topicBanners */
.topicBanners .slick-dots {
bottom: 1vmax;
padding-right: 1vmax;
text-align: right;
}
.topicBanners .slick-dots li {
background: rgba(255, 255, 255, 0.55);
border-radius: 50%;
height: 1vmax;
margin: 0 0.5vmax;
width: 1vmax;
}
/*---------------topicsBox----------------*/
.topicsBox__list {
/* display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; */
padding: 0 -15px;
position: relative;
z-index: 2;
margin-top: 40px;
display: -ms-grid;/*-ms-*/
display: grid;
-ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;/*-ms-*/
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 4rem;
}
.topicsBox__list li {
/* width: 25%; */
/* padding: 0 15px; */
}
/* .topicsBox__list li:first-of-type {
padding-left: 0;
}
.topicsBox__list li:last-of-type {
padding-right: 0;
} */
@media screen and (max-width: 768px) {
.topicsBox__list {
margin-bottom: 50px;
-ms-grid-columns: 1fr 1fr 1fr;/*-ms-*/
grid-template-columns: 1fr 1fr 1fr;
}
.topicsBox__list li {
/* width: 33.33%; */
}
}
@media screen and (max-width: 480px) {
.topicsBox__list {
display: block;
}
.topicsBox__list li {
width: 100%;
margin-bottom: 20px;
padding: 0 0 20px 0;
overflow: hidden;
/**/border-bottom: 1px solid #000;
}
}
.topicsBox__list li div {
overflow: hidden;
/*background: #000;*/
}
.topicsBox__list li div figure {
transition: 0.4s;
}
.topicsBox__list li div figure:hover {
transform: scale(1.1);
opacity: 0.8;
}
@media screen and (max-width: 480px) {
.topicsBox__list li div {
float: left;
width: 30%;
}
}
.topicsBox__list li div figure img {
-o-object-fit: cover;
object-fit: cover;
}
.topicsBox__list li article {
overflow: hidden;
}
@media screen and (max-width: 480px) {
.topicsBox__list li article {
float: right;
width: 65%;
}
}
.topicsBox__list li article time {
display: inline-block;
padding: 4px 10px;
background: #000;
color: #fff;
font-size: 14px;
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: italic;
margin-top: 30px;
letter-spacing: 2px;
}
@media screen and (max-width: 480px) {
.topicsBox__list li article time {
margin-top: 0;
font-size: 12px;
}
}
.topicsBox__list li article p {
font-size: 14px;
color: #000;
letter-spacing: 1.3px;
text-align: left;
margin-top: 20px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
width: 100%;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media screen and (max-width: 480px) {
.topicsBox__list li article p {
font-size: 12px;
margin-top: 10px;
}
}
.topicsBox__list li article p span {
font-size: 18px;
white-space: pre-wrap;
display: block;
margin: 0 0 20px 0;
letter-spacing: 1.3px;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.topicsBox__list li article p span {
font-size: 14px;
margin: 0 0 10px 0;
}
}
.topicsBox__list li article p #text {
display: none;
}
.topicsBox__list li article p em {
display: none !important;
}
/*------------△△△△topicsBox△△△△-----------*/
/*---------------newsBox----------------*/
.newsBox {
width: 100%;
padding: 226px 0 0;
}
.newsBox__list {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.newsBox__list li {
width: 25%;
padding: 0 15px;
position: relative;
}
@media screen and (max-width: 768px) {
.newsBox__list li {
width: 50%;
margin-bottom: 40px;
}
}
@media screen and (max-width: 480px) {
.newsBox__list li {
width: 100%;
}
}
.newsBox__list li div {
overflow: hidden;
/*background: #000;*/
}
.newsBox__list li div figure {
transition: 0.4s;
}
.newsBox__list li div figure:hover {
transform: scale(1.1);
opacity: 0.8;
}
.newsBox__list li figure img {
width: 100%;
height: 200px;/*200px;*/;
-o-object-fit: cover;/**/
object-fit: cover;
-o-object-position: 0% 0%;/**/
object-position: 0% 0%;
}
.newsBox__list li time {
position: absolute;
display: inline-block;
padding: 4px 10px;
background: #000;
color: #fff;
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: italic;
left: 15px;
top: 183px;
letter-spacing: 2px;
}
.newsBox__list li p {
font-size: 14px;
text-align: left;
margin-top: 30px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
letter-spacing: 1.3px;
color: #000;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.newsBox__list li p span {
font-size: 18px;
text-align: left;
display: block;
margin-bottom: 16px;
letter-spacing: 1.3px;
font-weight: 600;
color: #000;
white-space: pre-wrap;
}
.newsBox__list li p #text {
display: none;
}
logo .newsBox__list li p em {
display: none !important;
}
/*-------△△△△newsBox△△△△-------*/
/*---------------------------------------------------------TOP UNIQ CSS--------------------------------------------------------*/
/*--TOPだけのheader--*/
.header_logoTop {
display: block;
padding: 0px 10px;
margin-bottom: -10px ;
}
@media screen and (max-width: 480px) {
.header_logoTop {
padding: 20px 0;
}
}
.smaller .header_logoNakamen {
display: none;
}
.pc-nav li a.drawer-brand {
color: #000;
}
/*
.header_logoNakamen {
display: none;
}
*/
/*--⬇︎これはTOPのみの黒ロゴ---*/
.header_logoAfterScroll {
display: none;
}
.header .header_logoAfterScroll {
display: block;
padding: 20px 0;
}
/*--⬆︎これはTOPのみの黒ロゴ---*/
.header .header_logoTop {
display: none;
}
.header.pc-nav li a.drawer-brand {
color: #000;
}
/*------------MV--------------*/
.mv {
height: 100vh;
position: relative;
/* background: url(/img/img_top_mv.jpg);*/
background-position: center;
/* background-size: cover;*/
}
@media screen and (max-width: 480px) {
.mv {
height: 42%;
}
}
/*------VIDEO-------*/
#video {
overflow: hidden;
text-align: center;
top: 0;
left: 0;
width: calc(100% - 200px);
height: 100%;
z-index: -1;
position: fixed;
/* margin-top: -50px !important;*/
padding-top: 78px !important;
}
@media screen and (max-width: 480px) {
#video {
height: 42% !important;
/*padding-top: 60px !important;*/
}
}
.video-stream {
width: 100% !important;
}
/*------VIDEO-------*/
.mv__copy {
position: absolute;
top: 50%;
font-size: 30px;
transform: translateY(-50%);
padding-left: 100px;
color: #fff;
font-family: futura-pt, sans-serif;
font-style: italic;
line-height: 18.8px;
letter-spacing: 4px;
}
@media screen and (max-width: 768px) {
.mv__copy {
width: 95%;
margin: 0 auto;
text-align: center;
padding: 0 20px;
left: 50%;
letter-spacing: 2px;
font-size: 20px;
top: 50%;
transform: translate(-50%, -50%);
}
}
@media screen and (max-width: 480px) {
.mv__copy {
line-height: 0.3;
text-align: left;
font-size: 16px;
top: 60%;
}
}
.mv__copy01 {
font-weight: 800;
}
.mv__copy02,
.mv__copy03 {
display: block;
margin-top: 15px;
font-weight: 800;
}
.mv__copy03 {
-webkit-text-stroke-color: #fff;
-webkit-text-stroke-width: 1px;
color: transparent;
}
/*
/ IE11 / _:-ms-lang(x)::-ms-backdrop,
.mv__copy03 {
color: #fff;
}*/
/*IE10以降に適用されるCSSハック（一応）*/
@media all and (-ms-high-contrast: none) {
.mv__copy03 {
color: #fff;
}
}
/*IE11だけに適用されるCSSハック*/
@media all and (-ms-high-contrast: none) {
.mv__copy03 {
color: #fff;
}
}
@media screen and (max-width: 480px) {
.mv__copy01 img {
width: 60%;
}
.mv__copy03 img {
width: 85%;
}
}
.mv__sns {
position: absolute;
right: 60px;
top: 50%;
transform: translateY(-50%);
}
@media screen and (max-width: 980px) {
.mv__sns {
display: none;
}
}
.mv__sns li {
display: block;
margin-top: 30px;
text-align: center;
transition: 0.4s;
}
.mv__sns li:hover {
opacity: 0.6;
}
.mv__sns li:first-child {
margin-top: 0;
}
/*---スクロールダウン---*/
/* アニメーション設定 */
.arrowWrap {
position: absolute;
left: 0;
bottom: 50px;
height: 200px;
}
@media screen and (max-width: 480px) {
.arrowWrap {
display: none;
}
}
.arrowInner p {
font-size: 14px;
text-align: end;
transform: rotate(90deg);
color: #fff;
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: normal;
}
.arrow {
width: 1px;
height: 70px;
margin: 50px auto 0;
background-color: rgba(255, 255, 255, 0);
position: relative;
overflow: hidden;
}
.arrow::before {
content: "";
width: 1px;
height: 100px;
margin: 50px auto 0;
background-color: #fff;
position: absolute;
top: -150px;
left: 0;
-webkit-animation: arrow 2.5s ease 0s infinite normal;
animation: arrow 2.5s ease 0s infinite normal;
}
@-webkit-keyframes arrow {
0% {
transform: translate3d(-50%, 0, 0);
}
60% {
transform: translate3d(-50%, 100px, 0);
}
100% {
transform: translate3d(-50%, 100px, 0);
}
}
@keyframes arrow {
0% {
transform: translate3d(-50%, 0, 0);
}
60% {
transform: translate3d(-50%, 100px, 0);
}
100% {
transform: translate3d(-50%, 100px, 0);
}
}
/*---------------topics----------------*/
.topicsBox {
width: 100%;
padding: 230px 20px 50px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), #fff 30%);
position: relative;
}
@media screen and (max-width: 480px) {
.topicsBox {
padding: 70px 20px 60px /*元はtop120px bottom60*/;
}
}
.topicsBox::before {
content: "";
background: #ffff4b;
position: absolute;
left: 0;
top: 0;
width: 111px;
height: 507px;
}
@media screen and (max-width: 480px) {
.topicsBox::before {
width: 50px;
height: 200px;
}
}
.topicsBoxInner {
position: relative;
}
.ashirai01 {
position: absolute;
top: -230px;
right: 0;
z-index: 1;
}
@media screen and (max-width: 480px) {
.ashirai01 {
display: none;
}
}
.topicsBox .head02__right {
top: -80px;
line-height: 0;
}
@media screen and (max-width: 480px) {
.topicsBox .head02__right {
top: -97px;
width: 70%;
right: -12px;
}
}
/*------------△△△△topics△△△△-----------*/
/*---------------collectionBox----------------*/
.collectionBox {
width: 100%;
padding: 177px 0 100px;
background: #fff;
transition: 0.4s;
}
/**/
@media screen and (max-width: 768px) {
.collectionBox {
padding: 60px 0 100px;
}
}
@media screen and (max-width: 480px) {
.collectionBox {
padding: 60px 0 60px;
}
}
.collection__ashiraiBox {
position: relative;
}
.collectionBox .head02__left {
top: -80px;
padding: 0 20px;
}
@media screen and (max-width: 480px) {
.collectionBox .head02__left {
top: -36px;
left: 0;
font-size: 48px;
}
}
.collectionBox__list {
font-size: 0;
width: 100%;
margin: -15px 0;
}
@media screen and (max-width: 768px) {
.collectionBox__list {
margin: 0;
}
}
.collectionBox__list li {
width: 33.33%;
position: relative;
display: inline-block;
overflow: hidden;
transition: 0.4s;
padding: 15px;
}
@media screen and (max-width: 768px) {
.collectionBox__list li {
width: 50%;
padding: 0;
}
}
.collectionBox__list li a {
padding: 200px 0;
transition: 0.4s;
display: block;
}
.collectionBox__list li a {
position: relative;
overflow: hidden;
}
.style_closeUp {
transform: scale(1.05);
}
@media screen and (max-width: 768px) {
.style_closeUp {
transform: scale(1);
}
}
.bg01 {
transition: 0.4s;
background-image: url(../../img/top_collection_bg01_hover.jpg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
-webkit-animation: bg-slider 23s linear infinite;
animation: bg-slider 23 infinite;
-webkit-animation: bg-slider 23 infinite;
animation: bg-slider 23 infinite;
/* 23sの部分背景画像の約数だとスムーズ */
}
.bg02 {
transition: 0.4s;
background-image: url(../../img/top_collection_bg02_hover.jpg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
-webkit-animation: bg-slider 23s linear infinite;
animation: bg-slider 23s linear infinite;
/* 23sの部分背景画像の約数だとスムーズ */
}
.bg03 {
transition: 0.4s;
background-image: url(../../img/top_collection_bg03_hover.jpg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
-webkit-animation: bg-slider 23s linear infinite;
animation: bg-slider 23s linear infinite;
/* 23sの部分背景画像の約数だとスムーズ */
}
.bg04 {
transition: 0.4s;
background-image: url(../../img/top_collection_bg04_hover.jpg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
-webkit-animation: bg-slider 23s linear infinite;
animation: bg-slider 23s linear infinite;
/* 23sの部分背景画像の約数だとスムーズ */
}
.bg05 {
transition: 0.4s;
background: url(../../img/top_collection_bg05_hover.jpg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
-webkit-animation: bg-slider 23s linear infinite;
animation: bg-slider 23s linear infinite;
/* 23sの部分背景画像の約数だとスムーズ */
}
.bg06 {
transition: 0.4s;
background: #fff url(../../img/top_collection_bg06_hover.jpg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
-webkit-animation: bg-slider 23s linear infinite;
animation: bg-slider 23s linear infinite;
/* 23sの部分背景画像の約数だとスムーズ */
}
/*-----bg追加サンリオ・ディズニー・PLANTICA------*/
.bg07 {
transition: 0.4s;
background: #fff url(../../img/top_collection_bg07_hover.jpg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
-webkit-animation: bg-slider 23s linear infinite;
animation: bg-slider 23s linear infinite;
/* 23sの部分背景画像の約数だとスムーズ */
}
.bg08 {
transition: 0.4s;
background: #fff url(../../img/top_collection_bg08_hover.jpg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
-webkit-animation: bg-slider 23s linear infinite;
animation: bg-slider 23s linear infinite;
/* 23sの部分背景画像の約数だとスムーズ */
}
.bg09 {
transition: 0.4s;
background: #fff url(../../img/top_collection_bg09_hover.jpg);
background-repeat: repeat-x;
background-size: cover;
background-position: center;
-webkit-animation: bg-slider 23s linear infinite;
animation: bg-slider 23s linear infinite;
/* 23sの部分背景画像の約数だとスムーズ */
}
@media screen and (max-width: 768px) {
.bg01,
.bg02,
.bg03,
.bg04,
.bg05,
.bg06,
.bg07,
.bg08,
.bg09 {
background: #fff;
}
}
@-webkit-keyframes bg-slider {
0% {
background-position: 0 0;
opacity: 0;
}
10% {
background-position: 0 0;
opacity: 1;
}
100% {
background-position: -1518px 0;
opacity: 0.4;
}
/* 1518pxとは使用した背景画像の長さ */
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes bg-slider {
from {
background-position: 0 0;
}
to {
background-position: -1518px 0;
}
/* 1518pxとは使用した背景画像の長さ */
}
@media screen and (max-width: 768px) {
.collectionBox__list li a {
padding: 160px 0;
}
}
@media screen and (max-width: 480px) {
.collectionBox__list li a {
padding: 100px 0;
}
}
.collectionBox__list01 a {
background-image: url(../../img/collection-umbrella.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list02 a {
background-image: url(../../img/collection-parasol.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list03 a {
background-image: url(../../img/collection-rain-wear.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list04 a {
background-image: url(../../img/collection-rain-bag.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list05 a {
background-image: url(../../img/collection-footwear.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list06 a {
background-image: url(../../img/collection-plantica.jpg);
background-size: cover;
background-position: center;
}
/*---*/
.collectionBox__list07 a {
background-image: url(../../img/collection-disney.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list08 a {
background-image: url(../../img/collection-kitty.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list09 a {
background-image: url(../../img/collection-rain-wear-unisex.jpg);
background-size: cover;
background-position: center;
}
/*---------*/
.collectionBox__list10 a {
background-image: url(../../img/collection-smiley.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list11 a {
background-image: url(../../img/collection-handkerchief.jpg);
background-size: cover;
background-position: center;
}
/*---------*/
.collectionBox__list01_21ss a {
background-image: url(../../img/collection-umbrella_25ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list02_21ss a {
background-image: url(../../img/collection-parasol_25ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list03_21ss a {
background-image: url(../../img/collection-rain-wear_25ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list04_21ss a {
background-image: url(../../img/collection-men-umbrella_25ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list05_21ss a {
background-image: url(../../img/collection-parasol-unisex_24ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list06_21ss a {
background-image: url(../../img/collection-rain-wear-unisex_21ss.jpg);
background-size: cover;
background-position: center;
}
/*----*/
.collectionBox__list07_21ss a {
background-image: url(../../img/collection-goods_23fw.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list08_21ss a {
background-image: url(../../img/collection-uv-goods_25ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list09_21ss a {
background-image: url(../../img/collection-footwear_21ss.jpg);
background-size: cover;
background-position: center;
}
/*---------*/
.collectionBox__list10_21ss a {
background-image: url(../../img/collection-plantica_25ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list11_21ss a {
background-image: url(../../img/collection-disney_22ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list12_21ss a {
background-image: url(../../img/collection-smiley_21fw.jpg);
background-size: cover;
background-position: center;
}
/*---------*/
.collectionBox__list13_21ss a {
background-image: url(../../img/collection-sanrio_25ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list14_21ss a {
background-image: url(../../img/collection-nintendo_24ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list15_21ss a {
background-image: url(../../img/collection-doraemon_24ss.jpg);
background-size: cover;
background-position: center;
}
/*---------*/
.collectionBox__list16_21ss a {
background-image: url(../../img/collection-kids_24ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list17_21ss a {
background-image: url(../../img/collection-unnurella_23ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list18_21ss a {
background-image: url(../../img/collection-peko_22ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list19_21ss a {
background-image: url(../../img/collection-okicat_25ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list20_21ss a {
background-image: url(../../img/collection-chiikawa_25ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list21_21ss a {
background-image: url(../../img/collection-hikouken_25ss.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list22_21ss a {
background-image: url(../../img/tamagotchi_750x750.jpg);
background-size: cover;
background-position: center;
}
.collectionBox__list23_21ss a {
background-image: url(../../img/collection-pokemon_25ss.jpg);
background-size: cover;
background-position: center;
}
/*---------*/
.collectionBoxList__title_21ss {
opacity: 1;
transition: 0.7s ease;
position: absolute;
font-size: 20px;
position: absolute;
left: 20px;
bottom: 20px;
color: #000;
font-family: futura-pt, sans-serif;
font-weight: 700;
letter-spacing: 2px;
/* 文字バックの白シャドウ
text-shadow: 1px 1px 1px #ffffff28, -1px 1px 1px #ffffff28, 1px -1px 1px #ffffff28, -1px -1px 1px #ffffff28;*/
}
.collectionBox__list li:hover .collectionBoxList__title_21ss {
transition: 0.7s ease;
opacity: 1;
}
@media screen and (max-width: 768px) {
.collectionBoxList__title_21ss {
display: block;
font-size: 20px;
position: absolute;
left: 20px;
bottom: 20px;
color: #000;
font-family: futura-pt, sans-serif;
font-weight: 700;
letter-spacing: 2px;
opacity: 1;
}
}
@media screen and (max-width: 480px) {
.collectionBoxList__title_21ss {
bottom: 10px;
left: 10px;
line-height: 1.4;
font-size: 10px;
}
}
.collectionBoxList__title_21ss span {
display: block;
font-size: 30px;
font-family: futura-pt, sans-serif;
font-weight: 700;
letter-spacing: 4px;
}
@media screen and (max-width: 480px) {
.collectionBoxList__title_21ss span {
font-size: 18px;
}
}
/*---------*/
.collectionBoxList__title {
opacity: 1;
transition: 0.7s ease;
position: absolute;
font-size: 20px;
position: absolute;
left: 20px;
bottom: 20px;
color: #fff;
font-family: futura-pt, sans-serif;
font-weight: 700;
letter-spacing: 2px;
}
.collectionBox__list li:hover .collectionBoxList__title {
transition: 0.7s ease;
opacity: 1;
}
@media screen and (max-width: 768px) {
.collectionBoxList__title {
display: block;
font-size: 20px;
position: absolute;
left: 20px;
bottom: 20px;
color: #fff;
font-family: futura-pt, sans-serif;
font-weight: 700;
letter-spacing: 2px;
opacity: 1;
}
}
@media screen and (max-width: 480px) {
.collectionBoxList__title {
bottom: 10px;
left: 10px;
line-height: 1.4;
font-size: 10px;
}
}
.collectionBoxList__title span {
display: block;
font-size: 30px;
font-family: futura-pt, sans-serif;
font-weight: 700;
letter-spacing: 4px;
}
@media screen and (max-width: 480px) {
.collectionBoxList__title span {
font-size: 18px;
}
}
.arrow__round {
opacity: 0;
display: block;
position: absolute;
right: 40px;
bottom: 40px;
transition: 0.4s ease;
}
.collectionBox__list li:hover .arrow__round {
display: block;
position: absolute;
right: 40px;
bottom: 40px;
opacity: 1;
-webkit-animation: arrowroundhover 0.4s ease infinite;
animation: arrowroundhover 0.8s ease infinite;
}
@-webkit-keyframes arrowroundhover {
0% {
right: 40px;
}
50% {
right: 30px;
}
100% {
right: 40px;
}
}
@media screen and (max-width: 768px) {
.arrow__round {
opacity: 1;
right: 10px;
bottom: 10px;
}
.collectionBox__list li:hover .arrow__round {
opacity: 1;
right: 10px;
bottom: 10px;
}
@-webkit-keyframes arrowroundhover {
0% {
right: 10px;
}
50% {
right: 15px;
}
100% {
right: 10px;
}
}
}
/*------------△△△△collectionBox△△△△-----------*/
/*---------------othersBox----------------*/
.othersBox {
width: 100%;
background: #fff;
padding: 50px 20px 100px;
}
@media screen and (max-width: 768px) {
.othersBox {
padding: 60px 20px;
}
}
.othersBox .head02__left{
top: -95px;
padding: 0px 5px;
}
@media screen and (max-width: 768px){
.othersBox .head02__left {
font-size: 65px; /*元は90px*/
top: -85px;
}
}
@media screen and (max-width: 480px) {
.othersBox .head02__left {
top: -36px;
left: 0;
font-size: 40px;
}
}
@media screen and (max-width: 480px){
.TopShopBox .head02__left {
line-height: 0.9;
}
}
.othersBox__list {
margin: 0 -15px;
text-align: center;
}
.othersBox__list li {
width: 33.33%;
padding: 0 15px;
display: inline-block;
}
@media screen and (max-width: 768px) {
.othersBox__list li {
width: 50%;
}
.othersBox__list li:nth-child(3n) {
margin-top: 30px;
}
}
@media screen and (max-width: 480px) {
.othersBox__list li {
width: 100%;
}
.othersBox__list li:nth-child(2n) {
margin-top: 30px;
}
}
.othersBox__photo {
overflow: hidden;
}
.othersBox__photo a {
padding: 202px 0;
display: block;
transition: 0.4s;
}
.othersBox__photo a:hover {
transform: scale(1.09);
}
@media screen and (max-width: 768px) {
.othersBox__photo a {
padding: 90px 0;
}
}
@media screen and (max-width: 480px) {
.othersBox__photo a {
padding: 120px 0;
}
}
.othersBox__photo01 a {
background-image: url(../../img/collection-unisex.jpg);
background-size: cover;
background-position: center top;
}
.othersBox__photo02 a {
background-image: url(../../img/collection-kids.jpg);
background-size: cover;
background-position: center;
}
.othersBox__photo03 a {
background-image: url(../../img/collection-unnurella.jpg);
background-size: cover;
background-position: center;
}
/*コラボシリーズ*/
.othersBox__photo01_23 a {
background-image: url(../../img/collabo_top25ss01.jpg);
background-size: cover;
background-position: center top;
}
.othersBox__photo02_23 a {
background-image: url(../../img/collabo_top25ss02.jpg);
background-size: cover;
background-position: top center;
}
/*
.othersBox__photo01_21ss a {
background-image: url(../../img/collection-concept_23ss01.jpg);
background-size: cover;
background-position: center top;
}
.othersBox__photo02_21ss a {
background-image: url(../../img/collection-concept_23ss02.jpg);
background-size: cover;
background-position: top center;
}
.othersBox__photo03_21ss a {
background-image: url(../../img/collection-concept_23ss03.jpg);
background-size: cover;
background-position: center;
}
*/
.othersBox__photo04_21ss a {
background-image: url(../../img/collection-uvo1_22ss.jpg?0201);
background-size: cover;
background-position: center;
}
.othersBox__photo05_21ss a {
background-image: url(../../img/collection-uvo2_22ss.jpg?0201);
background-size: cover;
background-position: center;
}
.othersBox__photo10_21ss a {
background-image: url(../../img/collection-wp_22fw01.jpg);
background-size: cover;
background-position: center;
}
.othersBox__photo11_21ss a {
background-image: url(../../img/collection-wp_22fw03.jpg);
background-size: cover;
background-position: center;
}
.othersBox__photo12_21ss a {
background-image: url(../../img/collection-wp_22fw02.jpg);
background-size: cover;
background-position: center;
}
.othersBox__photo06_21ss a {
background-image: url(../../img/collection-uvo3_22ss.jpg?0201);
background-size: cover;
background-position: center;
}
.othersBox__photo07_23ss a {
background-image: url(../../img/collection-uvo_23ss01-1796.jpg);
background-size: cover;
background-position: center;
}
.othersBox__photo07_21ss a {
background-image: url(../../img/flagship_shinsaibashi_top.jpg);
background-size: cover;
background-position: center;
}
.othersBox .TopShopBox__photo{
width: 100%;
}
/*-----CSRフッター下部-----*/
.csrothersBox {
width: 100%;
background: #fff;
padding: 150px 20px 100px; /* padding: 50px 20px 100px;*/
}
@media screen and (max-width: 768px) {
.csrothersBox {
padding: 150px 20px 60px;
}
}
.csrothersBox .head02__left{
top: -95px;
padding:0 5px;
}
@media screen and (max-width: 768px){
.csrothersBox .head02__left {
font-size: 90px;
/*top: -85px;*/
}
}
@media screen and (max-width: 480px) {
.csrothersBox .head02__left {
/* top: -36px;
left: 0;
*/
margin-top: -50px ;
font-size: 48px;
}
}
/*
@media screen and (max-width: 480px){
.TopShopBox .head02__left {
line-height: 1.1;
}
}
*/
.csrothersBox__list {
margin: 0 -15px;
/*text-align: center;*/
}
.csrothersBox__list li {
width: 33.33%;
padding: 0 15px;
display: inline-block;
object-fit : none ;
}
@media screen and (max-width: 768px) {
.csrothersBox__list li {
width: 50%;
}
.csrothersBox__list li:nth-child(3n) {
margin-top: 30px;
}
}
@media screen and (max-width: 480px) {
.csrothersBox__list li {
width: 100%;
}
.csrothersBox__list li:nth-child(2n) {
margin-top: 30px;
}
}
.csrothersBox__photo {
/**/overflow: hidden;
object-fit:cover ;
}
.csrothersBox__photo a {
padding: 202px 0;
display: block;
transition: 0.4s;
object-fit:cover ;
}
/*.ocsrthersBox__photo a:hover {
transform: scale(1.09);
}*/
@media screen and (max-width: 768px) {
.csrothersBox__photo a {
padding: 90px 0;
}
}
@media screen and (max-width: 480px) {
.csrothersBox__photo a {
padding: 120px 0;
}
}
.csrothersBox__csr {
width: 100%;
background: #fff;
/*margin-bottom: 20px ;*/
}
@media screen and (max-width: 768px) {
.csrothersBox__csr {
}
}
@media screen and (max-width: 480px) {
.csrothersBox__csr {
margin-top: -20px -30px ;
}
}
.csrothersBox__csrlist {
/*margin: 0 -15px;*/
text-align: center;
margin-top: 20px ;
margin-bottom: 30px ;
}
.csrothersBox__csrlist li {
width: 33.33%;
padding: 0 15px;
display: inline-block;
}
@media screen and (max-width: 768px) {
.csrothersBox__csrlist li {
width: 50%;
height: 50% ;
padding: -20px 0px ;
}
.csrothersBox__csrlist li:nth-child(3n) {
margin-top: -10px;
}
}
@media screen and (max-width: 480px) {
.csrothersBox__csrlist li {
width: 50%;
/* margin-bottom: -100px ;
align-items: center ;*/
padding: -50px -20px ;
/*display:flex;*/
flex-start;
}
.csrothersBox__csrlist li:nth-child(2n) {
margin-top: -20px;
}
/*最期のコンテンツ左寄せ*/
.csrothersBox__csrlist li:after {
content: "";
display: block;
width: 50%; /* .boxに指定したwidthと同じ幅を指定する */
height: 0;
}
}
/*UVO用切れないcss--使用していないテストタグ*/
@media screen and (max-width: 480px){
.TopShopBox02 .head02__left {
line-height: 1.1;
margin-top: -30px;
}
}
@media screen and (max-width: 480px){
.TopShopBox02 .head02__left {
line-height: 1.1;
font-size: 42px ;
}
}
.othersBox02 .TopShopBox02__photo{
width: 100%;
}
@media screen and (max-width: 768px){
.TopShopBox02__photo {
margin-bottom: -30px ;
}
}
@media screen and (max-width: 480px){
.TopShopBox02__photo {
margin-bottom: -30px ;
}
}
/*-----50px 20px 100px------*/
.othersBox02 {
width: 100%;
background: #fff;
padding: 50px 20px 100px;
margin-bottom: -130px ;
}
@media screen and (max-width: 768px) {
.othersBox02 {
padding: 60px 20px;
margin-bottom: -100px ;
}
}
.othersBox02 .head02__left{
top: -95px;
padding:0 5px;
}
@media screen and (max-width: 768px){
.othersBox02 .head02__left {
font-size: 90px;
top: -85px;
}
}
@media screen and (max-width: 480px) {
.othersBox02 .head02__left {
top: 26px;
left: 0;
font-size: 42px;
/*↑これもとはtop-36*/
}
}
@media screen and (max-width: 480px){
.TopShopBox .head02__left {
line-height: 1.1;
}
}
.othersBox02__list {
margin: 0 -5px; /*元は-15px*/
text-align: center;
}
.othersBox02__list li {
width: 33.33%;
padding: 0 15px;
display: inline-block;
}
/*↑これ33.33*/
@media screen and (max-width: 768px) {
.othersBox02__list li {
width: 50%;
}
/*↑これ50*/
.othersBox02__list li:nth-child(3n) {
margin-top: 0px; /*margin-top: 30px;*/
}
}
@media screen and (max-width: 480px) {
.othersBox02__list li {
width: 100%;
}
.othersBox02__list li:nth-child(2n) {
margin-top: 0px;
}
}
.othersBox02__photo {
overflow: hidden;
}
.othersBox02__photo a {
width: 100% ;
padding: 199px 0;/*padding: 199px-202 0;*/
display: block;
transition: 0.4s;
}
/**/
.othersBox02__photo a:hover {
transform: scale(1.09);
}
/*UV0*/
@media screen and (max-width: 768px) {
.othersBox02__photo a {
width: 100% ;
/*padding: 90px 0;*/
padding: 40% 0 50%;/*padding: 40% 0 50%;*/
margin-bottom: 0px ;
}
.othersBox02__photo07_23ss__pc { display: block !important; }
.othersBox02__photo07_23ss__sp { display: none !important; }
}
@media screen and (max-width: 480px) {
.othersBox02__photo a {
padding: 30% 0 40%;/**/ /*padding: 60% 0 10% */ /*padding: 40% 0 50%;*/
/*120px 0 95px*//*top 130px bottom 140px*/
/**/ margin: 0px 0px ;
}
.othersBox02__photo07_23ss__pc { display: none !important; }
.othersBox02__photo07_23ss__sp { display: block !important; }
}
/*UVO画像の中身*/
.othersBox02__photo07_23ss__pc a {
background-image: url(../../img/collection-uvo_25ss-1796.jpg?0127);
background-position: center;
background-size: cover;
/*background-size: cover;*/
}
.othersBox02__photo07_23ss__sp a {
background-image: url(../../img/collection-uvo_25ss-sp01.jpg?0127);
background-position: center;
background-size: cover;
}
/*IZA
@media screen and (min-width: 768px) {
.othersBox02__photo08 a {
padding: 90px 0;
}*/
.othersBox02__photo08_23ss__pc { display: block !important; }
.othersBox02__photo08_23ss__sp { display: none !important; }
/*ここ08つけてなかった*/
@media screen and (max-width: 480px) {
.othersBox02__photo08 a {
padding: 120px 0;
}
.othersBox02__photo08_23ss__pc { display: none !important; }
.othersBox02__photo08_23ss__sp { display: block !important; }
}
/*ここ08つけてなかった*/
/*IZA画像の中身*/
.othersBox02__photo08_23ss__pc a {
background-image: url(../../img/collection-iza_25ss-pc01.jpg?0205);
background-position: center;
background-size: cover;
}
.othersBox02__photo08_23ss__sp a {
background-image: url(../../img/collection-iza_25ss-sp01.jpg?0205);
background-position: center;
background-size: cover;
/*padding-bottom: -60px;*/
}
/*SiNCA*/
.othersBox02__photo10_23ss__pc { display: block !important; }
.othersBox02__photo10_23ss__sp { display: none !important; }
@media screen and (max-width: 480px) {
.othersBox02__photo10 a {
padding: 20px 0px -60px 0px;
marigin-bottom: -60px ;
}
.othersBox02__photo10_23ss__pc { display: none !important; }
.othersBox02__photo10_23ss__sp { display: block !important; }
}
/*SINCA画像の中身*/
.othersBox02__photo10_23ss__pc a {
background-image: url(../../img/collection-sinca_25ss-pc.jpg?0203);
background-position: center;
background-size: cover;
}
.othersBox02__photo10_23ss__sp a {
background-image: url(../../img/collection-sinca_25ss-sp.jpg?0203);
background-position: center;
background-size: cover;
/*padding-bottom: -60px;*/
}
/* ショップリスト_直営店中身 */
.othersBox02__photo12_23ss__pc { display: block !important; }
.othersBox02__photo12_23ss__sp { display: none !important; }
@media screen and (max-width: 480px) {
.othersBox02__photo12 a {
padding: 0px 0px 0px 0px;
marigin-bottom: 0px ;
}
.othersBox02__photo12_23ss__pc { display: none !important; }
.othersBox02__photo12_23ss__sp { display: block !important; }
}
.othersBox02__photo12_23ss__pc a {
background-image: url(../../img/collection-shop_24fw-pc01.jpg);
background-position: center;
background-size: cover;
height: auto ;
/*../../img/collection-wpc20th_1796x560_C.jpg?0202*/
}
.othersBox02__photo12_23ss__sp a {
background-image: url(../../img/collection-shop_24fw-sp01.jpg?0202);
background-position: center;
background-size: cover;
height: auto ;
/*padding-bottom: -60px;*/
}
/*20th_lp
.othersBox02__photo11_23ss__pc { display: block !important; }
.othersBox02__photo11_23ss__sp { display: none !important; }
@media screen and (max-width: 480px) {
.othersBox02__photo10 a {
padding: 0px 0px 0px 0px;
marigin-bottom: 0px ;
}
.othersBox02__photo11_23ss__pc { display: none !important; }
.othersBox02__photo11_23ss__sp { display: block !important; }
}*/
/*20th_lpバナーの中身
.othersBox02__photo11_23ss__pc a {
background-image: url(../../img/collection-wpc20th_1295cm1796x560.jpg);
background-position: center;
background-size: cover;
height: auto ;
}
.othersBox02__photo11_23ss__sp a {
background-image: url(../../img/collection-wpc20th_820x560cm.jpg?0202);
background-position: center;
background-size: cover;
height: auto ;
}
*/
/*SINCA画像の中身*/
.othersBox02__photo10_23ss__pc a {
background-image: url(../../img/collection-sinca_25ss-pc01.jpg?1);
background-position: center;
background-size: cover;
}
.othersBox02__photo10_23ss__sp a {
background-image: url(../../img/collection-sinca_25ss-sp01.jpg?1);
background-position: center;
background-size: cover;
/*padding-bottom: -60px;*/
}
/*patterns*/
.othersBox02__photo09_23ss__pc { display: block !important; }
.othersBox02__photo09_23ss__sp { display: none !important; }
@media screen and (max-width: 480px) {
.othersBox02__photo09 a {
padding: 120px 0;
}
.othersBox02__photo09_23ss__pc { display: none !important; }
.othersBox02__photo09_23ss__sp { display: block !important; }
}
/*patterns画像の中身*/
.othersBox02__photo09_23ss__pc a {
background-image: url(../../img/collection-patterns_25ss.jpg?1);
background-position: center;
background-size: cover;
}
.othersBox02__photo09_23ss__sp a {
background-image: url(../../img/collection-patterns_25ss-sp.jpg?1);
background-position: center;
background-size: cover;
}
/*gokoh*/
.othersBox02__photo14_23ss__pc { display: block !important; }
.othersBox02__photo14_23ss__sp { display: none !important; }
@media screen and (max-width: 480px) {
.othersBox02__photo09 a {
padding: 120px 0;
}
.othersBox02__photo14_23ss__pc { display: none !important; }
.othersBox02__photo14_23ss__sp { display: block !important; }
}
/*gokoh画像の中身*/
.othersBox02__photo14_23ss__pc a {
background-image: url(../../img/collection-gokoh_25ss-pc.jpg?1);
background-position: center;
background-size: cover;
}
.othersBox02__photo14_23ss__sp a {
background-image: url(../../img/collection-gokoh_25ss-sp.jpg?1);
background-position: center;
background-size: cover;
}
/*ONDOO*/
.othersBox02__photo13_23ss__pc { display: block !important; }
.othersBox02__photo13_23ss__sp { display: none !important; }
@media screen and (max-width: 480px) {
.othersBox02__photo13 a {
padding: 120px 0;
}
.othersBox02__photo13_23ss__pc { display: none !important; }
.othersBox02__photo13_23ss__sp { display: block !important; }
}
/*ONDOO画像の中身*/
.othersBox02__photo13_23ss__pc a {
background-image: url(../../img/collection-ondoo_25ss-pc.jpg?1);
background-position: center;
background-size: cover;
}
.othersBox02__photo13_23ss__sp a {
background-image: url(../../img/collection-ondoo_25ss-sp.jpg?1);
background-position: center;
background-size: cover;
}
/*これ使用してないテストコード*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
@media screen and (min-width: 768px) {
.othersBox02__photo07_23ss__pc { display: block !important; }
.othersBox02__photo07_23ss__sp { display: none !important; }
}
/**/
.top_blank {
margin-top: 100px;
}
/*ここからショップ2つ並び220809追記*/
.othersBox__photo2 {
overflow: hidden;
}
.othersBox__photo2 a {
padding: 202px 0;
display: block;
transition: 0.4s;
}
.othersBox__photo2 a:hover {
transform: scale(1.09);
}
@media screen and (max-width: 768px) {
.othersBox__photo2 a {
padding: 90px 0;
}
}
@media screen and (max-width: 480px) {
.othersBox__photo2 a {
padding: 120px 0;
}
}
.othersBox__photo2_shop01 a {
background-image: url(../../img/flagship_shinsaibashi_top23ss2.jpg);
background-size: cover;
}
.othersBox__photo2_shop02 a {
background-image: url(../../img/flagship_lucua1100_top2.jpg);
background-size: cover;
}
.othersBox__list2 {
margin: 0 -15px;
text-align: center;
}
.othersBox__list2 li {
width: 50.00%;
padding: 0 15px;
display: inline-block;
}
@media screen and (max-width: 768px) {
.othersBox__list2 li {
width: 50%;
}
.othersBox__list2 li:nth-child(3n) {
margin-top: 30px;
}
}
@media screen and (max-width: 480px) {
.othersBox__list2 li {
width: 100%;
}
.othersBox__list2 li:nth-child(2n) {
margin-top: 30px;
}
}
/*ここまでショップ2つ並び220809追記*/
/* .othersBoxlist__title {
font-size: 16px;
color: #000;
text-align: left;
margin-top: 30px;
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: italic;
letter-spacing: 3px;
}
@media screen and (max-width: 480px) {
.othersBoxlist__title {
text-align: center;
}
}
@media screen and (max-width: 768px) {
.othersBoxlist__title {
margin-top: 20px;
}
} */
.othersBox__photo a::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: "";
background: #000;
transform: scale(0, 1);
}
.othersBox__photo a:hover {
-webkit-animation: hover 0.4s forwards;
animation: hover 0.4s forwards;
}
.othersBox__photo a:hover::before {
-webkit-animation: hover-in 0.2s forwards alternate,
hover-out 0.2s 0.2s forwards alternate;
animation: hover-in 0.2s forwards alternate,
hover-out 0.2s 0.2s forwards alternate;
}
@-webkit-keyframes hover {
0%,
100% {
color: #000;
}
50% {
color: #fff;
}
}
@-webkit-keyframes hover-in {
0% {
transform-origin: left top;
transform: scale(0, 1);
}
100% {
transform-origin: left top;
transform: scale(1, 1);
}
}
@keyframes hover-in {
0% {
transform-origin: left top;
transform: scale(0, 1);
}
100% {
transform-origin: left top;
transform: scale(1, 1);
}
}
@-webkit-keyframes hover-out {
0% {
transform-origin: right top;
transform: scale(1, 1);
}
100% {
transform-origin: right top;
transform: scale(0, 1);
}
}
@keyframes hover-out {
0% {
transform-origin: right top;
transform: scale(1, 1);
}
100% {
transform-origin: right top;
transform: scale(0, 1);
}
}
/*------------△△△△othersBox△△△△-----------*/
/*---------------newsBox----------------*/
.newsBox {
width: 100%;
padding: 230px 20px 0;
position: relative;
background: #fff;
}
@media screen and (max-width: 480px) {
.newsBox {
padding: 100px 20px 0;
}
}
.newsBox::before {
content: "";
background: #ffff4b;
position: absolute;
left: 0;
top: 0;
width: 111px;
height: 300px;
}
@media screen and (max-width: 480px) {
.newsBox::before {
width: 50px;
height: 200px;
}
}
.newsBoxInner {
position: relative;
}
.newsBox .head02__right {
position: absolute;
top: -26px;
line-height: 0;
}
@media screen and (max-width: 480px) {
.newsBox .head02__right {
top: 5px !important;
right: 10px !important;
}
}
/*------------△△△△newsBox△△△△-----------*/
/*---------------garellyBox----------------*/
.garellyBox {
padding: 140px 0;
background: #fff;
}
@media screen and (max-width: 480px) {
.garellyBox {
padding: 100px 0;
}
}
@media screen and (max-width: 480px) {
.garellyBox .head02__center {
width: 80%;
margin: 0 auto;
/*ここ追記*/
text-align: center;
font-family: futura-pt, sans-serif;
font-size: 25px ;
}
}
.garellyBox__subTitle {
text-align: center;
font-family: futura-pt, sans-serif;
font-weight: 300;
letter-spacing: 2px;
margin-top: 30px;
text-align: center;
}
.garellyBox__list {
overflow: hidden;
width: 100%;
margin-top: 100px;
}
@media screen and (max-width: 480px) {
.garellyBox__list {
margin-top: 50px;
}
}
.garellyBox__list li {
display: inline-block;
width: 25%;
}
@media screen and (max-width: 480px) {
.garellyBox__list li {
width: 50%;
}
}
/*------------△△△△garellyBox△△△△-----------*/
/*-------------------------------------------------------------中面 css-------------------------*
/*------------中面のMV-------------*/
.mv_nakamen {
height: 40vh; /*初期値 40vh;*/
position: relative;
margin-top: 77px; /*初期値 77vh;*/
}
@media screen and (max-width: 480px) {
.mv_nakamen {
height: 40vh; /*初期値 40vh;*/
margin-top: 53px;
}
}
.mv_news {
background: url(../../news/img/news_mv.jpg) no-repeat;
background-size: cover;
background-position: center;
}
@media screen and (max-width: 1024px) {
.mv_news {
background-size: cover;
background-position: -240px;
}
}
@media screen and (max-width: 480px) {
.mv_news {
background-size: cover;
background-position: -210px;
}
}
.mv_storelist {
background: url(https://wpc-worldparty.jp/wp-content/themes/wpc/storelist/img/xstorelist_mv.jpg.pagespeed.ic.FB9SVngq7A.jpg) no-repeat;
background-size: cover;
background-position: center;
}
@media screen and (max-width: 1024px) {
.mv_storelist {
background-size: cover;
background-position: -409px;
}
}
@media screen and (max-width: 768px) {
.mv_storelist {
background-size: cover;
background-position: -350px;
}
}
@media screen and (max-width: 480px) {
.mv_storelist {
background-size: cover;
background-position: -330px;
}
}
.mv_topics {
background: url(../../topics/img/mv.jpg) no-repeat;
background-size: cover;
background-position: center;
}
@media screen and (max-width: 768px) {
.mv_topics {
background-size: cover;
background-position: -370px;
}
}
@media screen and (max-width: 480px) {
.mv_topics {
background-size: cover;
background-position: -258px;
}
}
.mv__nakamenTitle {
position: absolute;
/* top: 50%; */
transform: translateY(-50%);
right: 70px;
font-size: 36px;
font-family: futura-pt, sans-serif;
font-weight: 700;
font-style: italic;
color: #000;
line-height: 1;
bottom: 0;
}
@media screen and (max-width: 480px) {
.mv__nakamenTitle {
font-size: 28px;
right: 30px;
top: unset;
bottom: 0;
}
}
.mv__nakamenTitle .mv__nakamenSubTitle {
background: #000;
color: #000;
display: block;
font-size: 18px;
padding: 5px 20px;
font-family: "Noto Sans JP", sans-serif;
font-style: normal;
font-weight: 300;
margin-top: 10px;
}
@media screen and (max-width: 480px) {
.mv__nakamenTitle .mv__nakamenSubTitle {
display: none;
}
}
.breadcrumb {
background: #000;
position: absolute;
left: 0;
bottom: -33px;
z-index: 20;
padding: 20px 0 25px 70px;
}
@media screen and (max-width: 480px) {
.breadcrumb {
position: absolute;
bottom: unset;
top: 40vh;
display: block;
width: 100%;
padding-left: 20px;
padding: 7px 15px;
}
}
.breadcrumb li {
display: inline-block;
padding-right: 22px;
position: relative;
}
.breadcrumb li a {
color: #fff;
font-size: 14px;
font-family: futura-pt, sans-serif;
font-weight: 300;
display: block;
letter-spacing: 2px;
}
.breadcrumb__news li::after {
content: "";
background: url(../../common/img/bread_arrow_news.svg) no-repeat;
width: 4px;
height: 3px;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background-size: cover;
background-position: center;
}
.breadcrumb li:last-child::after {
display: none;
}
/*------------news uniq css-------------*/
.mv_news .mv__nakamenTitle .mv__nakamenSubTitle {
background: #0058ff;
}
.news__newsBox {
padding: 70px 0 130px;
z-index: 10;
position: relative;
}
@media screen and (max-width: 480px) {
.news__newsBox {
padding: 50px 0 100px;
}
}
.newsBox.news__newsBox::before {
display: none;
}
.news__newsBox::after {
content: "";
background: #0058ff;
position: absolute;
left: 0;
top: 0;
width: 111px;
height: 247px;
}
@media screen and (max-width: 480px) {
.news__newsBox::after {
width: 60px;
}
}
.news__newsBox .newsBoxInner {
width: 100%;
max-width: 1008px;
margin: 0 auto;
position: relative;
z-index: 10;
}
.news__newsBox .newsBox__list {
padding: 0 20px;
}
.news__newsBox .newsBox__list li {
width: 33.33%;
margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
.news__newsBox .newsBox__list li {
width: 100%;
}
}
/*-------storelist uniq css---------*/
.breadcrumb__storelist li::after {
content: "";
background: url(../../common/img/bread_arrow_storelist.svg) no-repeat;
width: 4px;
height: 3px;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background-size: cover;
background-position: center;
}
.storelistBox {
position: relative;
}
.mv_storelist .mv__nakamenSubTitle {
background: #ffffff;
color: #000;
/*元はbackground: #c8c1ff*/
}
.storelistBox::after {
content: "";
background: #ffffff;
position: absolute;
left: 0;
top: 0;
width: 111px;
height: 247px;
/*元はbackground: #c8c1ff*/
}
@media screen and (max-width: 480px) {
.storelistBox::after {
width: 60px;
}
}
.storelistBox__list {
padding: 80px 20px 180px;
position: relative;
z-index: 10;
}
@media screen and (max-width: 480px) {
.storelistBox__list {
padding: 20px 20px 70px;
/*元はpadding: 50px */
}
}
.storelistBox__list li {
display: inline-block;
width: 25%;
padding: 5px;
transition: 0.4s;
/*元はpadd20px*/
}
@media screen and (max-width: 768px) {
.storelistBox__list li {
padding: 5px;
}
}
@media screen and (max-width: 480px) {
.storelistBox__list li {
width: 50%;
padding: 5px;
}
}
.storelistBox__list li:hover {
opacity: 0.5;
}
/*------------topics uniq css-------------*/
.breadcrumb__topics li::after {
content: "";
background: url(../../common/img/bread_arrow_topics.svg) no-repeat;
width: 4px;
height: 3px;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background-size: cover;
background-position: center;
}
.mv_topics .mv__nakamenSubTitle {
background: #ffff4b;
color: #000;
}
.topics__topicsBox {
padding: 130px 20px 130px;
}
.topics__topicsBox::after {
content: "";
background: #ffff4b;
position: absolute;
left: 0;
top: 0;
width: 111px;
height: 247px;
}
@media screen and (max-width: 480px) {
.topics__topicsBox::after {
width: 60px;
}
}
.ashirai_topics01 {
position: absolute;
top: 72px;
left: 220px;
z-index: 5;
}
@media screen and (max-width: 768px) {
.ashirai_topics01 {
left: 30px;
}
}
@media screen and (max-width: 480px) {
.ashirai_topics01 {
width: 70%;
}
}
/*-----新着3件目までのスタイル-------*/
.topicsBoxInner__listPickUpBox {
position: relative;
margin-top: 170px;
}
@media screen and (max-width: 768px) {
.topicsBoxInner__listPickUpBox {
margin-top: 68px;
}
}
.topicsBoxInner__listPickUpBox::after {
content: "";
width: 100%;
max-width: 1129px;
height: 670px;
position: absolute;
background: #f8f8f8;
left: 50%;
top: -100px;
transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
.topicsBoxInner__listPickUpBox::after {
display: none;
}
}
.topicsBox__listPickUp {
max-width: 1008px;
width: 100%;
margin: 0 auto;
/* margin: 0 -15px 80px 0;*/
position: relative;
z-index: 10;
display: flex;
}
@media screen and (max-width: 768px) {
.topicsBox__listPickUp {
display: block;
}
}
.topicsBox__listPickUp li {
width: 33.33%;
padding: 0 15px;
position: relative;
}
@media screen and (max-width: 768px) {
.topicsBox__listPickUp li {
width: 100%;
overflow: hidden;
}
}
@media screen and (max-width: 460px) {
.topicsBox__listPickUp li {
padding: 0;
}
}
@media screen and (max-width: 480px) {
.topicsBox__listPickUp li:nth-child(2n) {
margin-top: 30px;
}
.topicsBox__listPickUp li:nth-child(2n) article {
bottom: auto;
}
}
@media screen and (max-width: 480px) {
.topicsBox__listPickUp li:nth-child(3n) {
margin-top: 40px;
}
.topicsBox__listPickUp li:nth-child(3n) article {
bottom: auto;
}
}
.topicsBox__listPickUp li div {
overflow: hidden;
/*background: #000;*/
}
@media screen and (max-width: 480px) {
.topicsBox__listPickUp li:nth-child(2n) {
margin-top: 40px;
}
}
@media screen and (max-width: 768px) {
.topicsBox__listPickUp li div {
float: left;
width: 30%;
}
}
.topicsBox__listPickUp li div figure {
transition: 0.4s;
}
.topicsBox__listPickUp li div figure img {
width: 100%;
}
.topicsBox__listPickUp li div figure:hover {
transform: scale(1.1);
opacity: 0.8;
}
@media screen and (max-width: 768px) {
.topicsBox__listPickUp li div {
float: left;
width: 30%;
}
}
.topicsBox__listPickUp li div figure img {
object-fit: cover;
object-fit: cover;
}
.topicsBox__listPickUp li article {
position: absolute;
background: #fff;
left: 15px;
width: 84%;
padding: 40px 20px;
margin-top:20px;
}
@media screen and (max-width: 768px) {
.topicsBox__listPickUp li article {
position: relative;
width: 70%;
float: right;
top: 0;
}
}
@media screen and (max-width: 480px) {
.topicsBox__listPickUp li article {
padding: 25px 20px 0 0;
}
}
.topicsBox__listPickUp li article time {
display: inline-block;
padding: 4px 10px;
background: #000;
color: #fff;
font-size: 14px;
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: italic;
position: absolute;
letter-spacing: 2px;
top: -10px;
left: 0;
}
@media screen and (max-width: 768px) {
.topicsBox__listPickUp li article time {
top: 0;
}
}
@media screen and (max-width: 480px) {
.topicsBox__listPickUp li article time {
margin-top: 0;
font-size: 12px;
}
}
.topicsBox__listPickUp li article p {
font-size: 14px;
/**/color: #000;
letter-spacing: 1.3px;
text-align: left;
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
width: 100%;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media screen and (max-width: 480px) {
.topicsBox__listPickUp li article p {
font-size: 12px;
margin-top: 10px;
}
}
.topicsBox__listPickUp li article p span {
font-size: 18px;
white-space: pre-wrap;
display: block;
/* margin: 0 0 50px 0; */
letter-spacing: 1.3px;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.topicsBox__listPickUp li article p span {
font-size: 14px;
margin: 0 0 10px 0;
}
.topicsBox__listPickUp li article p span::after {
display: none;
}
}
.topicsBox__listPickUp li article p em {
font-size: 14px;
display: none;
}
.topicsBox__listNormal {
margin-top: 370px;
}
@media screen and (max-width: 480px) {
.topicsBox__listNormal {
margin-top: 70px;
background: #f8f8f8;
padding: 15px;
}
}
.pager {
width: 100%;
text-align: center;
margin-top: 150px;
}
@media screen and (max-width: 480px) {
.pager {
margin-top: 80px;
}
}
.pager li {
display: inline-block;
margin: 0 10px;
}
.pager li a {
text-align: center;
padding: 20px;
background: #000;
color: #fff;
display: block;
height: 100%;
border: 1px solid #000;
}
.pager li a:hover {
background: #fff;
border: 1px solid #000;
color: #000;
}
.pager li a.current {
background: #fff;
border: 1px solid #000;
color: #000;
}
/*------------topics detail uniq css-------------*/
.topicDetailArticleBox {
max-width: 1008px;
width: 100%;
margin: 60px auto 0;
padding: 0 20px;
}
@media screen and (max-width: 480px) {
.topicDetailArticleBox {
margin: 40px auto 0;
}
}
.head02__topicDetail01 {
font-size: 38px;
font-weight: 600;
color: #000;
text-align: left;
position: relative;
font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 480px) {
.head02__topicDetail01 {
font-size: 22px;
}
}
.head02__topicDetail01 time {
display: block;
font-weight: 300;
font-size: 26px;
margin-bottom: 20px;
font-family: futura-pt, sans-serif;
font-style: italic;
}
@media screen and (max-width: 480px) {
.head02__topicDetail01 time {
font-size: 14px;
}
}
.head02__topicDetail01::after {
content: "";
background: #000;
width: 100px;
height: 6px;
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 480px) {
.head02__topicDetail01::after {
width: 50px;
height: 3px;
bottom: -18px;
}
}
.topicDetailArticleBox p {
margin-top: 50px;
line-height: 1.8;
}
@media screen and (max-width: 480px) {
.topicDetailArticleBox p {
margin-top: 30px;
}
}
.topicDetailArticleBox figure {
width: 100%;
margin-top: 50px;
}
@media screen and (max-width: 480px) {
.topicDetailArticleBox figure {
margin-top: 30px;
}
}
.topicDetailArticleBox figure img {
width: 100%;
}
.head03__topicDetail01 {
display: block;
text-align: left;
padding: 20px 0;
border-top: 1px dotted #000;
border-bottom: 1px dotted #000;
margin-top: 50px;
}
@media screen and (max-width: 480px) {
.head03__topicDetail01 {
margin-top: 30px;
}
}
.head03__topicDetail02 {
text-align: left;
font-family: "Noto Sans JP", sans-serif;
font-weight: 600;
font-size: 24px;
}
@media screen and (max-width: 480px) {
.head03__topicDetail02 {
margin-top: 30px;
}
}
.head03__topicDetail02 span {
font-size: 16px;
text-align: left;
font-family: futura-pt, sans-serif;
font-weight: 300;
font-style: normal;
display: block;
margin-top: 10px;
letter-spacing: 3px;
}
.topicDetail__link {
display: block;
margin-top: 30px;
}
.topicDetail__link a {
color: #000;
font-family: futura-pt, sans-serif;
font-weight: 300;
display: inline-block;
position: relative;
letter-spacing: 2px;
}
.topicDetail__link a::after {
content: "";
background: url(../../topics/img/img_topicdetail_linkarrow.svg) no-repeat;
background-size: contain;
background-position: center;
width: 7.2px;
height: 7px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -10px;
}
.topicDetail__twoColomPhotoBox {
display: flex;
flex-wrap: wrap;
margin: 50px -15px 0;
}
@media screen and (max-width: 480px) {
.topicDetail__twoColomPhotoBox {
margin: 50px -8px 0;
}
}
@media screen and (max-width: 480px) {
.topicDetail__twoColomPhotoBox {
margin-top: 30px;
}
}
.topicDetail__twoColomPhotoBox li {
padding: 0 15px;
width: 50%;
}
@media screen and (max-width: 480px) {
.topicDetail__twoColomPhotoBox li {
padding: 0 8px;
}
}
.topicDetail__twoColomPhotoBox li img {
width: 100%;
}
.topicDetail__txtPhotoBox {
display: flex;
flex-wrap: wrap;
margin: 50px -15px 0;
}
.topicDetail__txtPhotoBox p {
margin-top: 40px;
}
@media screen and (max-width: 480px) {
.topicDetail__txtPhotoBox p {
margin-top: 30px;
}
}
.topicDetail__txtPhotoBox li {
padding: 0 15px;
width: 50%;
}
@media screen and (max-width: 480px) {
.topicDetail__txtPhotoBox li {
width: 100%;
}
}
.topicDetail__txtPhotoBox li img {
width: 100%;
}
.pager__prevNext {
text-align: center;
padding: 100px 0;
width: 100%;
}
@media screen and (max-width: 480px) {
.pager__prevNext {
padding: 50px 0;
}
}
.pager__prevNext li {
display: inline-block;
padding: 0 25px;
transition: 0.4s;
}
.pager__prevNext li:hover {
opacity: 0.7;
}
#video02 {
height: 200px;
width: 200px;
}
.pager__txt {
display: block;
font-size: 14px;
color: #000;
font-family: futura-pt, sans-serif;
font-weight: 600;
}
.detail__backToIndex {
background: #fff;
padding: 0px 0 80px /*元は上下80px*/;
}
@media screen and (max-width: 480px) {
.detail__backToIndex {
padding: 0px 0 30px /*元は上下30px*/;
margin-bottom: 80px /*元は指定なし*/;
}
}
.detail__backToIndex .btn_round {
max-width: 470px;
margin-top: 0;
padding: 0 20px;
}
.detail__backToIndex .btn_round a {
background: #000;
color: #fff !important;
}
/*------------△△△topics uniq css△△△-------------*/
/*---------------item----------------*/
.mv_item__parentBox {
padding: 0 20px;
}
.mv_item {
max-width: 1296px;
width: 100%;
margin: 149px auto 0;
height: 40vh;
}
@media screen and (max-width: 480px) {
.mv_item {
margin-top: 80px;
height: 30vh;
}
}
.mv_itemUmbrella {
background: url(../../item/umbrella/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemParasol {
background: url(../../item/parasol/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemSanrio {
background: url(../../item/sanrio/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemDisney {
background: url(../../item/disney/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemPlantica {
background: url(../../item/plantica/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemRainwear {
background: url(../../item/rainwear/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemRainbag {
background: url(../../item/rainbag/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemRainwearwomen {
background: url(../../item/rainwear/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemRainwearunisex {
background: url(../../item/plantica/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemUnisex {
background: url(../../item/unisex/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemKids {
background: url(../../item/kids/img/item_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemRainwearunisex {
background: url(../../item/rainwearunisex/img/item_mens_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_itemRainboots {
background: url(../../item/rainboots/all/img/item_rainboots_mv.jpg);
background-size: cover;
background-position: center;
}
.item__introductionBox {
max-width: 1008px;
width: 100%;
margin: 0 auto;
padding: 70px 20px 0;
}
@media screen and (max-width: 480px) {
.item__introductionBox {
padding: 40px 20px 0;
}
}
.item__introductionBox .btn_round {
margin-top: 50px;
}
.head01__item__twoRow {
line-height: 1.2;
font-size: 58px;
}
.head01__item {
font-size: 80px;
z-index: 4;
color: transparent;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: italic;
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 2px;
text-align: center;
position: relative;
letter-spacing: 4px;
}
@media screen and (max-width: 480px) {
.head01__item {
font-size: 50px;
-webkit-text-stroke-width: 1.5px;
}
}
.head01__item span {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-48.5%);
font-weight: 600;
color: #ffff4b;
-webkit-text-stroke: 0;
z-index: -1;
width: 100%;
}
.itemIntroductionBox__text {
text-align: center;
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 3.5;
color: #000000;
}
@media screen and (max-width: 480px) {
.itemIntroductionBox__text {
line-height: 2;
font-size: 16px;
}
}
/*item__pickup*/
.item__pickupBox {
max-width: 1008px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0 20px;
}
.item__pickupBoxInner {
overflow: hidden;
position: relative;
margin-top: 137px;
}
@media screen and (max-width: 768px) {
.item__pickupBoxInner {
margin-top: 60px;
}
}
.itemPickupBox__left {
float: left;
width: 50%;
position: absolute;
left: 0;
padding-left: 60px;
}
@media screen and (max-width: 768px) {
.itemPickupBox__left {
float: none;
width: 100%;
position: relative;
padding-left: 0;
}
}
.itemPickupBox__right {
float: right;
width: 60%;
}
@media screen and (max-width: 768px) {
.itemPickupBox__right {
float: none;
width: 100%;
margin-top: 30px;
}
}
.itemPickup__title {
font-size: 90px;
font-family: futura-pt, sans-serif;
font-weight: 600;
text-align: left;
line-height: 1;
font-style: italic;
color: #000;
margin-top: 80px;
position: relative;
z-index: 3;
letter-spacing: 5px;
}
@media screen and (max-width: 768px) {
.itemPickup__title {
text-align: center;
font-size: 50px;
}
}
.itemPickup__txt {
margin-top: 50px;
text-align: left;
font-size: 14px;
width: 70%;
line-height: 2;
font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 768px) {
.itemPickup__txt {
margin-top: 30px;
width: 100%;
text-align: center;
}
}
.itemPickup__ashirai01 {
font-family: futura-pt, sans-serif;
font-weight: 600;
font-size: 215px;
color: #ffff4b;
letter-spacing: -20px;
position: absolute;
top: 0;
line-height: 1;
left: 0;
}
@media screen and (max-width: 768px) {
.itemPickup__ashirai01 {
font-size: 70px;
top: -80px;
left: 50%;
transform: translateX(-50%);
letter-spacing: 0;
}
}
.itemPickup__ashirai02 {
position: absolute;
left: -50px;
top: 100px;
}
@media screen and (max-width: 768px) {
.itemPickup__ashirai02 {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -25px;
}
}
.itemPickup__ashirai03 {
position: absolute;
left: -220px;
top: 302px;
transform: rotate(90deg);
font-size: 20px;
font-family: futura-pt, sans-serif;
font-style: italic;
letter-spacing: 5px;
}
@media screen and (max-width: 768px) {
.itemPickup__ashirai03 {
display: none;
}
}
@media screen and (max-width: 1024px) {
.itemPickup__ashirai03 {
top: 250px;
}
}
.itemPickup__ashirai03 span {
width: 170px;
height: 2px;
display: inline-block;
background: #000;
top: 0;
vertical-align: middle;
margin-right: 20px;
}
.item__photoBox {
max-width: 1008px;
width: 100%;
margin: 30px auto 0;
padding: 0 20px 170px;
}
@media screen and (max-width: 480px) {
.item__photoBox {
margin: 10px auto 0;
padding: 0 20px 100px;
}
}
.item__photoBox .btn_round {
margin-top: 105px;
}
@media screen and (max-width: 480px) {
.item__photoBox .btn_round {
margin-top: 80px;
}
}
.itemPhotoBox__01 {
margin: 0 -10px;
display: flex;
}
@media screen and (max-width: 480px) {
.itemPhotoBox__01 {
margin: 0 -5px;
}
}
.itemPhotoBox__01 .itemPhotoBox01__L,
.itemPhotoBox__01 .itemPhotoBox01__R {
width: 50%;
padding: 0 10px;
}
@media screen and (max-width: 480px) {
.itemPhotoBox__01 .itemPhotoBox01__L,
.itemPhotoBox__01 .itemPhotoBox01__R {
padding: 0 5px;
}
}
.itemPhotoBox__02 {
margin-top: 20px;
}
@media screen and (max-width: 480px) {
.itemPhotoBox__02 {
margin-top: 10px;
}
}
.itemPhotoBox__03 {
overflow: hidden;
margin: 20px -10px 0;
display: flex;
}
@media screen and (max-width: 480px) {
.itemPhotoBox__03 {
overflow: hidden;
margin: 10px -5px 0;
}
}
.itemPhotoBox__03 .itemPhotoBox01__L,
.itemPhotoBox__03 .itemPhotoBox01__R {
padding: 0 10px;
}
@media screen and (max-width: 480px) {
.itemPhotoBox__03 .itemPhotoBox01__L,
.itemPhotoBox__03 .itemPhotoBox01__R {
padding: 0 5px;
}
}
.itemPhotoBox__03 .itemPhotoBox01__L {
width: 35%;
-o-object-fit: cover;
object-fit: cover;
}
.itemPhotoBox__03 .itemPhotoBox01__R {
width: 65%;
-o-object-fit: cover;
object-fit: cover;
}
.itemPhotoBox__04 {
overflow: hidden;
margin: 20px -10px 0;
display: flex;
}
.itemPhotoBox__04 .itemPhotoBox04__L,
.itemPhotoBox__04 .itemPhotoBox04__R {
padding: 0 10px !important;
}
.itemPhotoBox__04 .itemPhotoBox04__L {
width: 65%;
-o-object-fit: cover;
object-fit: cover;
}
.itemPhotoBox__04 .itemPhotoBox04__R {
width: 35%;
-o-object-fit: cover;
object-fit: cover;
}
/*---------------△△△△item△△△△----------------*/
/*---------------item all----------------*/
/***itemAllのアンカーの位置***/
/***TOP UMBRELLA MV***/
.mv_umbrellaAll {
background: url(../../item/umbrella/all/img/img_umbrella_mv.jpg);
background-size: cover;
background-position: center;
}
/***TOP ディズニー MV***/
.mv_disneyAll {
background: url(../../item/disney/all/img/img_disney_mv.jpg);
background-size: cover;
background-position: center;
}
@media screen and (max-width: 480px) {
.mv_disneyAll {
background-position: -439px;
}
}
.mv_parasolAll {
background: url(../../item/parasol/all/img/img_parasol_mv.jpg);
background-size: cover;
background-position: right;
}
@media screen and (max-width: 480px) {
.mv_parasolAll {
background-position: -800px;
}
}
.mv_planticaAll {
background: url(../../item/plantica/all/img/img_plantica_mv.jpg);
background-size: cover;
background-position: center;
}
@media screen and (max-width: 480px) {
.mv_planticaAll {
background-position: -800px;
}
}
.mv_rainbagAll {
background: url(../../item/rainbag/all/img/img_rainbag_mv.jpg);
background-size: cover;
background-position: center;
}
@media screen and (max-width: 480px) {
.mv_rainbagAll {
background-position: -500px;
}
}
.mv_umbrellaAll {
background: url(../../item/umbrella/all/img/img_umbrella_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_rainwearAll {
background: url(../../item/rainwear/all/img/img_rainwear_mv.jpg);
background-size: cover;
background-position: 1000px;
}
@media screen and (max-width: 480px) {
.mv_rainwearAll {
background-position: -500px;
}
}
.mv_sanrioAll {
background: url(../../item/sanrio/all/img/img_sanrio_mv.jpg);
background-size: cover;
background-position: center;
}
@media screen and (max-width: 480px) {
.mv_sanrioAll {
background-position: -526px;
}
}
.mv_rainbootsAll {
background: url(../../item/rainboots/all/img/item_rainboots_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_rainwearunisexAll {
background: url(../../item/rainwearunisex/all/img/img_rainwearunisex_mv.jpg);
background-size: cover;
background-position: center;
}
.mv_unisexAll {
background: url(../../item/unisex/all/img/img_unisex_mv.jpg);
background-size: cover;
background-position: right;
}
.mv_kidsAll {
background: url(../../item/kids/all/img/img_kids_mv.jpg);
background-size: cover;
background-position: right;
}
.mv_umbrellaAll .mv__nakamenSubTitle {
background: #ffff4b;
color: #000;
}
.head__02ItemAll {
text-align: center;
margin-top: 100px;
}
.head__02ItemAll span {
font-size: 32px;
color: #000;
display: inline-block;
font-family: futura-pt, sans-serif;
padding: 10px 0;
letter-spacing: 2px;
font-weight: 600;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
@media screen and (max-width: 480px) {
.head__02ItemAll span {
font-size: 16px;
}
}
.itemAllAnchorBox {
width: 100%;
max-width: 1008px;
margin: 125px auto 0;
padding: 0 20px;
}
.itemAllAnchorBoxInner {
letter-spacing: 0;
/* resetの打消し */
display: flex;
flex-wrap: wrap;
margin-right: -12px;
/*
↑
ボーダー3px * 4 = 12px（25%だから4）
widthが33.33333%だと ボーダー3px * 3 = 9px
*/
}
.itemAllAnchorBoxInner li {
position: relative;
display: flex;
/* 天地中央用 */
width: 25%;
margin: -3px 0 0 -3px;
/* これでボーダーを重ねてる */
border: 3px solid #000;
}
.itemAllAnchorBoxInner li a {
display: flex;
/* 天地中央用 */
width: 100%;
/* リンクエリアをliいっぱいに */
padding: 20px 10px 20px 40px;
color: #000;
font-weight: 600;
font-size: 18px;
font-family: futura-pt, sans-serif;
letter-spacing: 1.5px;
align-items: center;
}
.itemAllAnchorBoxInner li:nth-child(4n) {
/* border-right: none; 削除 */
/* 他にnth-child使っているところがあれば削除 */
}
.itemAllAnchorBoxInner li:hover::after {
content: "";
position: absolute;
width: 96%;
height: 90%;
top: 10px;
left: 10px;
background: #ffff4b;
z-index: -1;
}
.itemAllAnchorBoxInner li a {
position: relative;
}
.itemAllAnchorBoxInner li a::before {
content: "";
background: url(../img/itemall_img_anchor.svg);
width: 12px;
height: 12px;
top: 50%;
transform: translateY(-50%);
background-size: contain;
position: absolute;
left: 15px;
}
@media screen and (max-width: 768px) {
.itemAllAnchorBoxInner li {
width: 50%;
}
}
@media screen and (max-width: 340px) {
.itemAllAnchorBoxInner li {
width: 100%;
}
}
/*---------------△△△△item all△△△△----------------*/
/*---------------itemall----------------*/
.itemAllBox {
margin-top: 40px;
}
.itemAllBoxInner {
max-width: 1008px;
width: 100%;
margin: 0 auto;
}
.itemAllBox_list {
display: flex;
flex-wrap: wrap;
padding: 60px 0 100px;
border-bottom: 1px dotted #000;
}
@media screen and (max-width: 480px) {
.itemAllBox_list {
padding: 40px 0 40px;
}
}
.itemAllBox_list li {
width: 25%;
padding: 0 20px 20px;
transition: 0.4s;
}
@media screen and (max-width: 768px) {
.itemAllBox_list li {
width: 33.33%;
}
}
@media screen and (max-width: 480px) {
.itemAllBox_list li {
width: 50%;
padding: 0 10px 10px;
}
}
.itemAllBox_list li:hover {
transform: scale(1.1);
}
.itemAllBox__txt {
display: block;
text-align: center;
font-size: 18px;
color: #000;
text-align: center;
font-family: futura-pt, sans-serif;
font-weight: 300;
letter-spacing: 2px;
margin-top: 20px;
}
/*---------------△△△△itemall△△△△----------------*/
/*---------------itemdetail----------------*/
.head02__itemDetail.center {
text-align: center;
}
.itemDetailIntroBoxInner {
max-width: 1008px;
width: 100%;
margin: 0 auto;
}
.itemDetailIntroBox {
overflow: hidden;
margin-top: 194px;
padding: 0 20px;
}
@media screen and (max-width: 480px) {
.itemDetailIntroBox {
margin-top: 100px;
}
}
.itemDetailIntroBox__L {
float: left;
width: 50%;
}
@media screen and (max-width: 480px) {
.itemDetailIntroBox__L {
float: none;
width: 100%;
}
}
.itemDetailIntroBox__R {
float: right;
width: 45%;
}
@media screen and (max-width: 480px) {
.itemDetailIntroBox__R {
float: none;
width: 100%;
}
}
.itemDetailIntroBox__L .itemDetailIntroBox__slick .slick-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -10px !important;
}
.itemDetailIntroBox__L .itemDetailIntroBox__slick .slick-next::before {
content: "";
background: url(../img/item_detail_slider01_arrow.svg) no-repeat;
background-size: contain;
width: 15px;
height: 30px;
position: absolute;
transform: rotate(180deg);
}
.itemDetailIntroBox__L .itemDetailIntroBox__slick .slick-prev {
position: absolute;
left: -10px !important;
top: 50%;
transform: translateY(-50%);
}
.itemDetailIntroBox__L .itemDetailIntroBox__slick .slick-prev::before {
content: "";
background: url(../img/item_detail_slider01_arrow.svg) no-repeat;
background-size: contain;
width: 15px;
height: 30px;
position: absolute;
}
.head02__itemDetail {
text-align: center;
font-weight: 600;
font-size: 50px;
font-family: futura-pt, sans-serif;
color: #000;
font-style: normal;
position: relative;
line-height: 1.2;
z-index: 4;
text-align: left;
letter-spacing: 3px;
padding-top: 60px;
}
@media screen and (max-width: 480px) {
.head02__itemDetail {
padding-top: 30px;
font-size: 26px;
}
}
.head02__itemDetailCate {
font-size: 20px;
font-weight: 300;
font-family: futura-pt, sans-serif;
display: block;
font-style: normal;
}
.head02__itemDetailJapName {
font-size: 14px;
font-weight: 400;
font-family: "Noto Sans JP", sans-serif;
display: block;
font-style: normal;
}
.itemDetail__subTitle {
text-align: center;
font-size: 18px;
font-family: "Noto Sans JP", sans-serif;
position: relative;
z-index: 4;
}
.itemDetailIntroBoxCateList {
margin-top: 20px;
}
.itemDetailIntroBoxCateList li {
font-family: futura-pt, sans-serif;
font-weight: 300;
font-size: 14px;
letter-spacing: 3px;
line-height: 1.8;
}
.itemDetailIntroBoxCateList li span {
font-weight: 400;
}
.coordinateBox {
position: relative;
margin-top: 100px;
padding: 0 20px;
width: 100%;
max-width: 1296px;
margin: 100px auto 0;
}
@media screen and (max-width: 480px) {
.coordinateBox {
margin-top: 60px;
}
}
.coordinateBoxInner {
max-width: 1008px;
margin: 0 auto;
width: 100%;
}
.coordinateBoxList {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 60px -15px 0;
position: relative;
z-index: 4;
}
@media screen and (max-width: 480px) {
.coordinateBoxList {
margin: 40px -5px 0;
}
}
.coordinateBoxList li {
width: 25%;
padding: 0 15px;
position: relative;
}
@media screen and (max-width: 480px) {
.coordinateBoxList li {
width: 50%;
padding: 0 5px 10px;
}
}
.coordinateBoxList__num {
position: absolute;
padding-left: 18px;
left: 15px;
font-size: 50px;
font-family: futura-pt, sans-serif;
font-weight: 600;
color: #fff;
bottom: 20px;
border-bottom: 5px solid #fff;
}
@media screen and (max-width: 480px) {
.coordinateBoxList__num {
padding-left: 10px;
left: 0;
font-size: 30px;
}
}
.coordinateBox::after {
content: "";
background: #ffff4b;
padding: 210px 0;
width: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.moreItemsBox {
position: relative;
margin-top: 100px;
padding-bottom: 150px;
}
@media screen and (max-width: 480px) {
.moreItemsBox {
margin-top: 60px;
padding-bottom: 80px;
}
}
.moreItemsBoxBg {
position: absolute;
width: 100%;
background: #f8f8f8;
height: 100%;
}
.moreItemsBox__slider {
max-width: 1008px;
width: 100%;
margin: 60px auto 0;
position: relative;
padding: 0 20px;
}
@media screen and (max-width: 480px) {
.moreItemsBox__slider {
margin: 40px auto 0;
}
}
.moreItemsBox__slider li {
position: relative;
width: 25%;
}
.moreItemsBox__photo {
padding: 117px 0;
}
.moreItemsBox__photo01 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_05.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo02 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_06.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo03 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_07.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo04 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_08.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo05 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_09.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo06 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_10.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo07 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_12.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo08 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_11.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo09 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_13.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo10 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_14.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo11 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_15.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo12 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_16.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__photo3 {
background: url(../../item/umbrella/all/img/img_umbrella_detail_16.jpg);
background-size: cover;
background-position: center;
}
.moreItemsBox__txt {
position: absolute;
z-index: 5;
bottom: 20px;
left: 15px;
text-align: left;
font-size: 20px;
color: #fff;
font-family: futura-pt, sans-serif;
font-weight: 600;
line-height: 1.4;
letter-spacing: 2px;
}
.moreItemsBox__txtTop {
display: block;
font-size: 11px;
color: #fff;
font-weight: 400;
}
.moreItemsBox__txtBottom {
font-weight: 300;
display: block;
font-size: 11px;
}
.btn__itemDetailIntroBox {
display: block;
margin-top: 20px;
}
.btn__itemDetailIntroBox a {
padding: 24px 0;
display: block;
height: 100%;
width: 100%;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-size: 18px;
text-align: center;
letter-spacing: 2px;
max-width: 440px;
}
.btn__itemDetailIntroBox.black a {
background: #000;
color: #fff;
position: relative;
border: 2px solid #000;
transition: 0.4s;
}
.btn__itemDetailIntroBox.black a:hover {
background: #fff;
color: #000;
}
.btn__itemDetailIntroBox.black a:hover::before {
background: url(../img/img_itemdetail_carticon_black.svg);
}
.btn__itemDetailIntroBox.black a::before {
content: "";
position: absolute;
background: url(../img/img_itemdetail_carticon_white.svg);
background-size: contain;
background-position: center;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 17px;
left: 84px;
}
@media screen and (max-width: 768px) {
.btn__itemDetailIntroBox.black a::before {
left: 20px;
}
}
.btn__itemDetailIntroBox.black a::after {
content: "";
position: absolute;
background: url(../img/img_itemdetail_cartiarrow_white.svg);
background-size: contain;
background-position: center;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 12px;
right: 20px;
}
.btn__itemDetailIntroBox.black a:hover::after {
background: url(../img/img_itemdetail_cartiarrow_black.svg);
background-size: contain;
}
.btn__itemDetailIntroBox.white a {
background: #fff;
color: #000;
position: relative;
border: 2px solid #000;
transition: 0.4s;
}
.btn__itemDetailIntroBox.white a::before {
content: "";
position: absolute;
background: url(../img/img_itemdetail_carticon_black.svg);
background-size: contain;
background-position: center;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 17px;
left: 84px;
}
@media screen and (max-width: 768px) {
.btn__itemDetailIntroBox.white a::before {
left: 20px;
}
}
.btn__itemDetailIntroBox.white a:hover {
background: #000;
color: #fff;
}
.btn__itemDetailIntroBox.white a:hover::before {
background: url(../img/img_itemdetail_carticon_white.svg);
}
.btn__itemDetailIntroBox.white a::after {
content: "";
position: absolute;
background: url(../img/img_itemdetail_cartiarrow_black.svg);
background-size: contain;
background-position: center;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 12px;
right: 20px;
}
.btn__itemDetailIntroBox.white a:hover::after {
background: url(../img/img_itemdetail_cartiarrow_white.svg);
background-size: contain;
}
.itemDetailBtnRBox {
max-width: 1008px;
width: 100%;
margin: 90px auto 0;
padding: 0 20px;
}
@media screen and (max-width: 480px) {
.itemDetailBtnRBox {
margin-top: 50px;
}
}
.btn_round.right {
margin: 0 0 0 auto;
}
@media screen and (max-width: 480px) {
.btn_round.right {
margin: 0 auto;
}
}
.moreItemsBox__slider .slick-next {
position: absolute;
right: 0;
right: -110px;
top: 50%;
transform: translateY(-50%);
}
.moreItemsBox__slider .slick-next::before {
content: "";
background: url(../img/img_itemdetail_sliderarrow.svg);
background-position: center;
background-size: contain;
position: absolute;
left: -50px;
top: -23px;
width: 53px;
height: 53px;
transform: rotate(180deg);
}
.moreItemsBox__slider .slick-prev {
position: absolute;
left: -94px;
top: 50%;
transform: translateY(-50%);
}
.moreItemsBox__slider .slick-prev::before {
content: "";
background: url(../img/img_itemdetail_sliderarrow.svg);
background-position: center;
background-size: contain;
position: absolute;
left: 0;
top: 0;
width: 53px;
height: 53px;
}
@media screen and (max-width: 768px) {
.slick-arrow {
display: none !important;
}
}
/*---------------△△△△itemdetail△△△△----------------*/
/*---------------画像ノイズ----------------*/
/*---------------△△△△itemdetail△△△△----------------*/
.topicsMovie {
position: relative;
width: 100%;
height: 0 !important;
padding-top: 550px;
}
@media screen and (max-width: 768px) {
.topicsMovie {
padding-top: 350px !important;
}
}
.topicsMovie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px !important;
}
@media screen and (max-width: 768px) {
.topicsMovie iframe {
height: 300px !important;
}
}
.topicsVideo {
width: 100%;
position: relative;
z-index: 1;
}
.newsDetail__mv {
background: url(../../news/img/img_newsdetail_mv.jpg);
background-size: cover;
background-position: center;
height: 40vh;
width: 100%;
}
.newsDetailArticleBox {
/* max-width: 1152px;*/
width: 100%;
margin: 100px auto 0;
background: #fff;
position: relative;
padding: 0px 100px 0 /*元はtop80px*/ ;
}
@media screen and (max-width: 768px) {
.newsDetailArticleBox {
padding: 40px 40px 0 /*元はtop80px*/;
}
}
@media screen and (max-width: 480px) {
.newsDetailArticleBox {
margin-top: 0 !important;
padding: 40px 20px 0 /*元はtop80px*/;
}
}
.topicsDetailArticleBoxPt01 {
background: url(../../common/img/img_topics_bgpt01.jpg) repeat;
}
.topicsDetailArticleBoxPt02 {
background: #ffff4b;
}
.newsDetailArticleBoxInner {
max-width: 1152px;
width: 100%;
background: #fff;
margin: 0 auto;
padding: 60px 70px;
}
@media screen and (max-width: 480px) {
.newsDetailArticleBoxInner {
padding: 40px 30px;
}
}
.newsDetailArticleBoxInner h1 {
font-size: 30px;
font-family: "Noto Sans JP", sans-serif;
color: #000;
text-align: center;/*元はcenter*/
position: relative;
padding-bottom: 50px;
}
@media screen and (max-width: 480px) {
.newsDetailArticleBoxInner h1 {
font-size: 18px;
}
}
.newsDetailArticleBoxInner h1::after {
content: "";
background: url("https://wpc-worldparty.jp/wp-content/themes/wpc/news/img/ximg_newsdetail_titleBg.png.pagespeed.ic.e7rOc5zKQ6.png") no-repeat;
background-size: cover;
height: 14px;
width: 100%;
left: 50%;
transform: translateX(-50%);
position: absolute;
bottom: 10px;
}
.newsDetailArticleBoxInner h1 time {
font-family: futura-pt, sans-serif;
font-weight: 200;
font-style: normal;
font-size: 20px;
color: #000;
display: block;
margin-bottom: 10px;
text-align: center;
}
.newsDetailArticleBoxInner h2 {
text-align: center;
font-family: "Noto Sans JP", sans-serif;
font-weight: 600;
color: #000;
font-size: 22px;
margin: 70px 0;
}
@media screen and (max-width: 480px) {
.newsDetailArticleBoxInner h2 {
margin: 40px 0;
}
}
.newsDetailArticleBoxInner {
text-align: left;
}
.newsDetailArticleBoxInner img {
height: auto;
}
.newsDetailArticle__twocolom {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
@media screen and (max-width: 768px) {
.newsDetailArticle__twocolom {
display: block;
margin: 0;
}
}
.newsDetailArticle__twocolom li {
width: 50%;
padding: 0 15px;
}
@media screen and (max-width: 768px) {
.newsDetailArticle__twocolom li {
width: 100%;
padding: 0;
}
}
.newsDetailArticle__twocolom__L img {
width: 100%;
}
@media screen and (max-width: 768px) {
.newsDetailArticle__twocolom__R {
margin-top: 30px;
}
}
.newsDetailArticleBoxInner figure {
width: 100%;
margin-top: 40px;
}
.newsDetailArticleBoxInner figure img {
width: 100%;
}
.newsDetailArticle__twocolom {
margin-top: 50px;
}
.newsDetailArticleBoxInner p {
margin-top: 30px;
}
/* -------------2022_itemページ---------------- */
.item__TopMv{
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding: 150px 20px 0px;
text-align: center;
}
@media screen and (max-width: 480px) {
.item__TopMv{
padding: 70px 0px 0px 0px;
}
}
.item__TopMv h3{
font-size: 60px;
font-family: futura-pt, sans-serif;
font-weight: 600;
margin-top: 50px;
line-height: 1.2;
}
@media screen and (max-width: 480px) {
.item__TopMv h3{
font-size: 35px;
font-family: futura-pt, sans-serif;
font-weight: 600;
margin: 25px 10px 0 10px;
}
}
.item__TopMv p{
margin-top: 50px;
line-height: 2;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.item__TopMv p{
margin: 40px 20px 10px 20px;
text-align: left;
line-height: 1.7;
}
}
.parasolGarelly__fltBoxTxt p{
font-size: 16px;
font-family: futura-pt, sans-serif;
font-weight: 600;
text-align: center;
margin-left: 20px;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxTxt p{
margin-left: 0;
}
}
.parasolGarelly__fltBoxTxt .item_name{
font-size: 27px;
font-family: futura-pt, sans-serif;
font-weight: 600;
line-height: 1.4;
letter-spacing: 1.5px;
margin-bottom: 10px;
display: block;
}
.parasolGarelly__fltBoxTxt .item_size{
font-size: 14px;
font-weight: 500;
/* margin: -4px 0 -13px 0;*/
display: block;
}
/*サイズフルスクリーン*/
.parasolGarelly__fltBoxTxtfull p{
font-size: 18px;
font-family: futura-pt, sans-serif;
font-weight: 600;
text-align: center;
margin-bottom: 15px ;
margin-top: -20px ;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxTxttfull p{
margin-left: 0;
font-size: 12px;
margin-bottom: 15px ;
margin-top: -20px ;
}
}
.parasolGarelly__fltBoxTxtfull .item_name{
font-size: 25px;
font-family: futura-pt, sans-serif;
font-weight: 800;
line-height: 1.4;
letter-spacing: 1.5px;
margin-top: 12px;
margin-bottom: -10px;
display: block;
text-align: center ;
}
@media screen and (min-width: 480px) {
.parasolGarelly__fltBoxTxttfull .item_name{
font-size: 14px;
margin-top: -15px;
margin-bottom: -25px;
line-height: 1.1;
}
}
.parasolGarelly__fltBoxTxtfull .item_size{
font-size: 14px;
font-weight: 500;
/* margin: -4px 0 -13px 0;*/
display: block;
}
/*------テスト中23fwここから-------*/
.um23fwBox {
background: #fdfcfc;
padding-bottom: 100px;
}
@media screen and (max-width: 480px) {
.um23fwBox {
margin-top: -60px;
padding-top: -100px;
}
}
.um23fwBox .btn_roundCateBtm {
margin-bottom: 0;
}
.um23fwBox {
background: #ffffff;
padding-bottom: 10px;
}
.um23fwBoxTopMv {
position: relative;
width: 100%;
background: url(../../item/parasol/img/img_parasol01.jpg);
padding: 350px 0;
max-width: 1200px;
margin: 100px auto 0;
background-size: cover;
}
.um23fwBoxTopMv {
position: relative;
width: 100%;
background: url(../../item/parasol/img/img_parasol_21ss_01.jpg);
padding: 350px 0;
max-width: 1200px;
margin: 100px auto 0;
background-size: cover;
}
@media screen and (max-width: 480px) {
.um23fwBoxTopMv {
background-position: 24%;
margin-top: -100px ;
}
}
@media screen and (max-width: 480px) {
.um23fwBoxTopMv {
background-position: 14%;
margin-top: -100px ;
}
}
.um23fwBoxTopMv {
transition: 0.4s;
}
.um23fwBoxTopMv:hover {
opacity: 0.7;
}
.um23fwBoxTopMv__txtBox {
position: absolute;
right: 1%;
top: 10%;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.um23fwBoxTopMv__txtBox {
bottom: 10%;
top: auto;
}
}
.um23fwBoxTopMv__txtBox {
position: absolute;
right: 8%;
top: 67%;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.um23fwBoxTopMv__txtBox {
bottom: 5%;
top: auto;
}
}
.um23fwBoxTopMv__title {
text-align: left;
font-family: 'sans-serif', Serif;
font-weight: 600;
font-size: 27px;
color: #000;
}
@media screen and (max-width: 480px) {
.um23fwBoxTopMv__title {
font-size: 22px;
}
}
.um23fwBoxTopMv__title {
text-align: left;
font-family: 'sans-serif', Serif;
font-weight: 600;
font-size: 40px;
color: #000;
}
@media screen and (max-width: 480px) {
.um23fwBoxTopMv__title {
font-size: 22px;
}
}
.um23fwBoxTopMv__txt {
text-align: left;
line-height: 2;
color: #000;
font-size: 16px;
margin-top: 18px;
}
@media screen and (max-width: 480px) {
.um23fwBoxTopMv__txt {
font-size: 14px;
}
}
.um23fwBoxGarellyBox {
max-width: 1200px;
width: 100%;
margin: 76px auto 0;
background: #fff;
padding: 10px;
position: relative;
}
.um23fwBoxGarellyBoxInner {
border: 1px solid #c6cfdf;
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarellyBoxInner {
padding: 0px 0px;
margin-top: -30px;
margin-right: 0;
margin-bottom: 0;
}
}
/*↑*/
.um23fwBox {
background: #ffffff;
padding-bottom: 10px;
}
.um23fwBoxGarellyBox {
max-width: 1200px;
width: 100%;
margin: 76px auto 0;
background: #fff;
padding: 10px;
position: relative;
}
.um23fwBoxGarellyBoxInner {
border: 0px solid #ffffff;
/* border: 1px solid #c6cfdf;*/
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
.um23fwBox__item__TopMv h3{
font-size: 60px;
font-family: 'sans-serif', Serif;
/*'Poppins', */
/*これはシンカの"serif", "futura-pt", "sans-serif";*/
font-weight: 600;
margin-top: 50px;
line-height: 1.2;
}
@media screen and (max-width: 480px) {
.um23fwBox__item__TopMv h3{
font-size: 35px;
font-family: 'sans-serif', Serif;
font-weight: 600;
margin: 25px 0px 0 0px;
}
}
/*これはsincaのフォント
.brandBox__container_Serif {
font-family: 'Poppins', Serif;
font-size: 19px;
}
*/
@media screen and (max-width: 480px) {
.um23fwBoxGarellyBoxInner {
padding: 0px 0px;
margin-right: 0;
margin-bottom: 0;
}
}
.head02__um23fwBoxGarelly {
font-size: 30px;
text-align: left;
font-family: 'sans-serif', Serif;
font-weight: 600;
/* font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;*/
}
@media screen and (max-width: 480px) {
.head02__um23fwBoxGarelly {
font-size: 20px;
}
}
.txt__um23fwBoxGarelly {
text-align: left;
font-size: 14px;
line-height: 2;
margin-top: 20px;
}
.um23fwBoxGarelly__fltBox {
display: block;
margin-top: 30px;
position: relative;/*相対配置*/
margin-bottom: 150px;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBox {
display: block;
position: relative;/*相対配置*/
margin-bottom: 50px
}
}
.um23fwBoxGarelly__fltBoxPhoto {
width: 100%;
padding: 0% -10% ;
/*margin-bottom: 40px ;*/
}
.um23fwBoxGarelly__fltBoxPhoto a {
transition: 0.4s;
}
.um23fwBoxarelly__fltBoxPhoto a:hover {
opacity: 0.7;
}
.um23fwBoxGarelly__fltBoxPhoto img {
width: 100%;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxPhoto {
width: 100%;
margin-bottom: 0px ;
}
}
.h3 um23fwBox {
width: 30%;
display: block;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Serif", sans-serif;
/* font-family: sans-serif;*/
/* font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;*/
font-weight: 600;
text-align: center;
}
/*商品名センタ*/
.um23fwBoxGarelly__fltBoxTxt {
width: 70%;
display: block;
position: absolute;
top: 10%;
left: 3%;/**/
justify-content: center;
align-items: center;
font-size: 23px;
font-family: 'sans-serif', Serif;
font-weight: 500;
text-align: left;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxt {
width: 100%;
display: block;
position: absolute;
top: 0%;
left: -3%;/**/
text-align: left;
margin-top: 25px;
font-family: 'sans-serif', Serif;
}
}
.um23fwBoxGarelly__fltBoxTxt p{
font-size: 16px;
font-family: "Serif", sans-serif;
font-weight: 600;
text-align: center;
margin-left: 20px;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxt p{
margin-left: 0;
}
}
/*商品名テキスト郡ひだり*/
.um23fwBoxGarelly__fltBoxTxtL {
width: 70%;
display: block;
position: absolute;
top: 42%;
left: 3%;/**/
justify-content: center;
align-items: center;
font-size: 23px;
font-family: 'sans-serif', Serif;
font-weight: 400;
text-align: left;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtL {
width: 100%;
display: block;
position: absolute;
top: 30%;
left: -3%;/**/
text-align: left;
margin-top: 25px;
font-family: 'sans-serif', Serif;
}
}
.um23fwBoxGarelly__fltBoxTxtL p{
font-size: 18px;
font-family: 'sans-serif', Serif;
position: absolute;
top: 25%;
left: 0%;
font-weight: 400;
text-align: left;
margin-left: 20px;
}
/**/@media screen and (max-width: 480px) {
.um23fwGarelly__fltBoxTxtL p{
margin-left: 0;
position: absolute;
top: 0%;
left: 7%;
}
}
/*商品名センター左*/
.um23fwBoxGarelly__fltBoxTxtL .item_name {
font-size: 39px;
font-family: 'sans-serif', Serif;
font-weight: 400;
line-height: 1.4;
letter-spacing: 1.5px;
margin-bottom: -5px;
display: block;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtL .item_name {
margin-left: 0;
font-size: 17px;
margin-bottom: -7px;
}
}
/*---itemsize---*/
.um23fwBoxGarelly__fltBoxTxtL .item_size {
font-family: 'sans-serif', Serif;
font-size: 20px;
font-weight: 400;
margin: -24px 0 -13px 0;
display: block;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtL .item_size {
font-size: 10px;
line-height: 3;
margin: -4px 0 ;
}
}
/*商品名テキスト郡みぎ*/
.um23fwBoxGarelly__fltBoxTxtR {
width: 70%;
display: block;
position: absolute;
top: 42%;
left: 70%;/*left: 70%;right: 10%;*/
justify-content: center;
align-items: center;
font-size: 23px;
font-family: 'sans-serif', Serif;
font-weight: 400;
text-align: right;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtR {
width: 45%;
display: block;
position: absolute;
top: 25%;
left: 64%;/*left: 64%;*right: -1%*/
text-align: left;
margin-top: 25px;
font-family: 'sans-serif', Serif;
padding-right: -5px
}
}
.um23fwBoxGarelly__fltBoxTxtR p{
font-size: 17px;
font-family: 'sans-serif', Serif;
position: absolute;
top: 25%;
left: 0%;
font-weight: 400;
text-align: left;
margin-right: 20px;
}
/**/@media screen and (max-width: 480px) {
.um23fwGarelly__fltBoxTxtR p{
margin-left: 0;
position: absolute;
top: 0%;
left: 7%;
margin-right: 0px;
}
}
/*商品名センター右*/
.um23fwBoxGarelly__fltBoxTxtR .item_name {
font-size: 39px;
font-family: 'sans-serif', Serif;
font-weight: 400;
line-height: 1.4;
letter-spacing: 1.5px;
margin-bottom: -5px;
display: block;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtR .item_name {
margin-left: 0;
font-size: 18px;
margin-bottom: -7px;
}
}
/*---itemsize---*/
.um23fwBoxGarelly__fltBoxTxtR .item_size {
font-family: 'sans-serif', Serif;
font-size: 20px;
font-weight: 400;
margin: -24px 0 -13px 0;
display: block;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtR .item_size{
font-size: 10px;
line-height: 3;
margin: -4px 0 ;
}
}
/*商品名センタhidari2これ使ってるよ*/
.um23fwBoxGarelly__fltBoxTxtL2 {
width: 70%;
display: block;
position: absolute;
top: 10%;
left: 3%;/**/
justify-content: center;
align-items: center;
font-size: 23px;
font-family: 'sans-serif', Serif;
font-weight: 400;
text-align: left;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtL2 {
width: 100%;
display: block;
position: absolute;
top: 0%;
left: -3%;/**/
text-align: left;
margin-top: 25px;
font-family: 'sans-serif', Serif;
}
}
.um23fwBoxGarelly__fltBoxTxtL2 p{
font-size: 18px;
font-family: 'sans-serif', Serif;
position: absolute;
top: 25%;
left: 0%;
font-weight: 400;
text-align: left;
margin-left: 20px;
}
/**/@media screen and (max-width: 480px) {
.um23fwGarelly__fltBoxTxtL2 p{
margin-left: 0;
position: absolute;
top: 0%;
left: 7%;
}
}
/*商品名センター左*/
.um23fwBoxGarelly__fltBoxTxtL2 .item_name{
font-size: 39px;
font-family: 'sans-serif', Serif;
font-weight: 400;
line-height: 1.4;
letter-spacing: 1.5px;
margin-bottom: -5px;
display: block;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtL2 .item_name{
margin-left: 0;
font-size: 13px;
margin-bottom: -7px;
}
}
/*---ちょっと大きめname---*/
.um23fwBoxGarelly__fltBoxTxtL2 .item_namebig{
font-size: 52px;
font-family: 'sans-serif', Serif;
font-weight: 400;
line-height: 1.4;
letter-spacing: 1.5px;
margin-bottom: -5px;
display: block;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtL2 .item_namebig{
margin-left: 0;
font-size: 17px;
margin-bottom: -18px;
}
}
/*---itemsize---*/
.um23fwBoxGarelly__fltBoxTxtL2 .item_size{
font-family: 'sans-serif', Serif;
font-size: 20px;
font-weight: 400;
margin: -24px 0 -13px 0;
display: block;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtL2 .item_size{
font-size: 10px;
line-height: 3;
margin: -4px 0 ;
}
}
/*---ちょっと大きめname---*/
.um23fwBoxGarelly__fltBoxTxtL2 .item_sizebig{
font-family: 'sans-serif', Serif;
font-size: 30px;
font-weight: 400;
margin: -5px 0 -13px 0;
display: block;
line-height: -300;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtL2 .item_sizebig{
font-size: 13px;
line-height: 18px;
margin: -10px 0 10px 0 ;
}
}
/*ここからR2*/
.um23fwBoxGarelly__fltBoxTxtR2 {
width: 70%;
display: block;
position: absolute;
bottom: 30%;
right: 3%;/**/
justify-content: center;
align-items: center;
font-size: 23px;
font-family: 'sans-serif', Serif;
font-weight: 400;
text-align: left;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtR2 {
width: 100%;
display: block;
position: absolute;
bottom: 35%;
right: 1%;/**/
text-align: left;
margin-top: 25px;
font-family: 'sans-serif', Serif;
}
}
.um23fwBoxGarelly__fltBoxTxtR2 p{
font-size: 18px;
font-family: 'sans-serif', Serif;
position: absolute;
top: 25%;
right: 0%;
font-weight: 400;
margin-left: 20px;
}
/**/@media screen and (max-width: 480px) {
.um23fwGarelly__fltBoxTxtR2 p{
margin-left: 0;
position: absolute;
top: 0%;
right: 7%;
}
}
.um23fwBoxGarelly__fltBoxTxtR2 .item_name{
font-size: 39px;
font-family: 'sans-serif', Serif;
font-weight: 400;
line-height: 1.4;
letter-spacing: 1.5px;
margin-bottom: -5px;
display: block;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtR2 .item_name{
margin-left: 0;
font-size: 13px;
margin-bottom: -7px;
}
}
.um23fwBoxGarelly__fltBoxTxtR2 .item_size{
font-family: 'sans-serif', Serif;
font-size: 20px;
font-weight: 400;
margin: -24px 0 -13px 0;
display: block;
}
@media screen and (max-width: 480px) {
.um23fwBoxGarelly__fltBoxTxtR2 .item_size{
font-size: 10px;
line-height: 3;
margin: -4px 0 ;
}
}
/*商品名センター右
.um23fwBGarelly__fltBoxTxtR .item_name{
font-size: 27px;
font-family: "Serif", sans-serif;
font-family: futura-pt, sans-serif;
font-weight: 600;
line-height: 1.4;
letter-spacing: 1.5px;
margin-bottom: 10px;
display: block;
}
.um23fwGarelly__fltBoxTxtR .item_size{
font-size: 14px;
font-weight: 500;
margin: -24px 0 -13px 0;
display: block;
}
*/
/*sincaのページから抜粋追記*/
.um23fw__background{
margin: 50px 0px 125px 0px;
font-family: Serif;
/*元は左右50px*/
font-size: 18px;
line-height: 1.8;
text-align: center;
}
@media screen and (max-width: 768px){
.um23fw__background{
margin: 40px 20px 60px 20px;
font-family: Serif;
/*元は左右33px*/
text-align: left;
}
}
/*見出し*/
.brandBox__container_Serif {
font-family: 'Poppins', Serif;
font-size: 19px;
}
.um23fw_title{
font-family: Serif;
font-weight: 600;
font-style: normal;
font-size: 60px;
padding: 20px 10px;
font-size: 45px ;
text-align: center;
line-height: 60px;
margin : -15px 0px;
}
@media screen and (max-width: 768px){
.um23fw_title{
font-size: 24px;
line-height: 35px;
margin : -100px -20px -20px ;
padding: 0px 20px;
}
}
/*コンセプトシリーズの明朝見出し0727*/
.consept23fw_title{
font-family: Serif;
font-weight: 400;
font-style: normal;
padding: 50px 10px -20px;
font-size: 35px ;
text-align: center;
line-height: 42px;
margin : 35px 0px -15px;
}
@media screen and (max-width: 768px){
.consept23fw_title{
font-size: 25px;
line-height: 28px;
margin : 0px -20px 0px ;
padding: 0px 20px;
}
}
.consept23fw_titlemini{
font-family: Serif;
font-weight: 400;
font-style: normal;
font-size: 25px;
padding: 10px 10px 0px;
text-align: center;
line-height: 40px;
margin : 15px 0px 20px;
}
@media screen and (max-width: 768px){
.consept23fw_titlemini{
font-size: 18px;
line-height: 25px;
margin : 10px -20px -20px ;
padding: 0px 20px 50px;
}
}
.consept23fw__fltBoxTxt {
width: 100%;
display: flex;
justify-content: center;
font-size: 16px;
font-family: "futura-pt", "メイリオ", sans-serif;
align-items: center;
font-weight: 600;
text-align: center;
margin-top: 20px;
}
@media screen and (max-width: 480px) {
.consept23fw__fltBoxTxt {
width: 100%;
font-size: 16px;
display: block;
text-align: center;
font-family: "futura-pt", "メイリオ", sans-serif;
margin-top: 10px;
}
}
.consept23fw__fltBoxTxt p{
width: 100%;
display: flex;
justify-content: center;
font-size: 13px;
font-family: "futura-pt", "メイリオ", sans-serif;
align-items: center;
font-weight: 600;
text-align: center;
margin-top: -20px;
}
@media screen and (max-width: 480px) {
.consept23fw__fltBoxTxt p{
width: 100%;
display: block;
text-align: center;
font-size: 10px;
font-family: "futura-pt", "メイリオ", sans-serif;
margin-top: -20px;
}
}
.img_concept_responsive {
width: 60%;
margin: auto;
display: block;
}
@media screen and (max-width: 480px) {
.img_concept_responsive{
width: 100%;
align-items: center;
}
}
/*雨傘23fwページ*/
.um23fw__background03{
margin: 150px 0px 0px 0px;
}
.um23fw__background h3{
font-size: 23px;
font-family: Serif;
font-weight: 600;
font-style: normal;
padding: 20px 10px;
letter-spacing: 1pt;
background-color: #5A564D;
color: #ffffff;
}
@media screen and (max-width: 768px){
.um23fw__background h3{
font-size: 20px;
margin : 0px -20px;
padding: 10px 20px;
}
}
.um23fw__background h4{
font-size: 23px;
font-family: Serif;
font-weight: 600;
font-style: normal;
padding: 10px 10px;
letter-spacing: 1pt;
border: 1px solid #5A564D;
color: #5A564D;
}
@media screen and (max-width: 768px){
.um23fw__background h4{
font-size: 20px;
text-align: center;
}
}
/*写真2つ並び/um23fw追記*/
.um23fwGarellyBox {
max-width: 1400px;
width: 100%;
margin: 30px auto 0;
background: #fff;
padding: 0px;
position: relative;
}
.um23fwGarellyBoxInner {
border: 1px solid #c6cfdf;
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
@media screen and (max-width: 480px) {
.um23fwGarellyBoxInner {
padding: 50px 10px;
margin-right: 0;
margin-bottom: 0;
}
}
/* sincaをum23fwBoxに変更*/
.h3 um23fwBox_Title {
width: 100%;
max-width: 290px;
margin: 88px auto 0;
}
@media screen and (max-width: 768px) {
.h3 um23fwBox_Title {
margin: 60px auto 0;
}
}
@media screen and (max-width: 480px) {
.h3 um23fwBox_Title {
max-width: 230px;
margin: 40px auto 0;
}
}
.h3 um23fwBox_Title a {
display: block;
/* border: 2px solid #59564d;*/
height: 100%;
width: 100%;
padding: 20px 0;
position: relative;
border-radius: 50px;
text-align: center;
font-size: 18px;
font-family: 'sans-Serif', Serif;
font-weight: 700;
font-style: normal;
font-color: #59564d;
background-color: #fff;
color: #000 !important;
}
@media screen and (max-width: 480px) {
.h3 um23fwBox_Title a {
font-size: 16px;
padding: 15px 0;
}
}
/*------ボタン-----*/
.btn_round_um23fwBox {
width: 100%;
max-width: 290px;
margin: 88px auto 68px;
}
@media screen and (max-width: 768px) {
.btn_round_um23fwBox {
margin: 0px auto -20px;
}
}
@media screen and (max-width: 480px) {
.btn_round_um23fwBox {
max-width: 230px;
margin: 40px auto 0px;
}
}
.btn_round_um23fwBox a {
display: block;
border: 2px solid #59564d;
height: 100%;
width: 100%;
padding: 20px 0;
position: relative;
border-radius: 50px;
text-align: center;
font-size: 18px;
font-family: serif;
font-weight: 700;
font-style: normal;
font-color: #59564d;
background-color: #fff;
color: #000 !important;
background-size: 200% 100%;
background-image: linear-gradient(
to right,
transparent 50%,
rgba(89, 86, 77, 1) 40%
/*
rgba(255, 255, 75, 1) 50%*/
);
transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
color 0.5s ease 0s, background-color 0.5s ease;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.btn_round_um23fwBox a {
font-size: 16px;
padding: 15px 0px -40px 0px ;
}
}
.btn_round_um23fwBox a:hover {
background-position: -100% 100%;
letter-spacing: 2px;
}
.btn_round_um23fwBox a::after {
content: "";
background-image: url(../../common/img/img_arrow.svg);
position: absolute;
background-size: contain;
right: 20px;
width: 6px;
height: 11px;
top: 50%;
transform: translateY(-50%);
}
/*------ここまでボタン-----*/
.head02__um23fwGarelly {
font-size: 30px;
text-align: left;
font-family: 'Poppins', Serif;
/*"Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;*/
font-weight: 600;
}
@media screen and (max-width: 480px) {
.head02__um23fwGarelly {
font-size: 18px;
}
}
.txt__um23fwGarelly {
text-align: center;
font-size: 14px;
line-height: 2;
margin-top: 20px;
}
.um23fwGarelly__fltBox {
display: flex;
margin-top: -10px;
}
@media screen and (max-width: 480px) {
.um23fwGarelly__fltBox {
display: block;
margin-top: -30px;
width: 100%;
}
}
.um23fwGarelly__fltBoxPhoto {
width: 50%;
}
.um23fwGarelly__fltBoxPhoto a {
transition: 0.4s;
}
.um23fwGarelly__fltBoxPhoto a:hover {
opacity: 0.7;
}
.um23fwGarelly__fltBoxPhoto img {
width: 100%;
}
@media screen and (max-width: 480px) {
.um23fwGarelly__fltBoxPhoto {
width: 100%;
}
}
.um23fwGarelly__fltBoxTxt {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "sans-serif";
/*"Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;*/
font-weight: 600;
text-align: center;
}
@media screen and (max-width: 480px) {
.um23fwGarelly__fltBoxTxt {
width: 112%;
display: block;
text-align: center;
margin: -10px -20px;
}
}
/*左*/
.um23fwGarelly__fltBoxTxtL {
width: 100%;
display: flex;
position: absolute;
top: 2%;
left: 7%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
/**/justify-content: center;
align-items: center;
font-size: 18px;
font-family: 'sans-Serif', Serif;
text-align: left;
}
@media screen and (max-width: 480px) {
.um23fwGarelly__fltBoxTxtL {
width: 112%;
display: block;
position: absolute;
top: 2%;
left: 4%;
text-align: left;
margin: -10px -20px;
font-size: 13px;
}
}
/*右*/
.um23fwGarelly__fltBoxTxtR {
width: 50%;
display: flex;
position: absolute;
top: 2%;
right: 8%;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
text-align: right;
}
@media screen and (max-width: 480px) {
.um23fwGarelly__fltBoxTxtR {
width: 112%;
display: block;
position: absolute;
top: 2%;
right: 8%;
text-align: right;
margin: -10px -20px;
}
}
/* -------------2023_itemページテスト中0130に削除および編集---------------- */
.parasolGarelly__fltBoxTxtonfont {
width: 30%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
text-align: center;
position: relative;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxTxtonfont {
width: 100%;
display: block;
text-align: center;
margin-top: 20px;
}
}
.parasolGarelly__fltBoxTxtonfont p{
font-size: 16px;
font-family: futura-pt, sans-serif;
font-weight: 600;
text-align: center;
margin-left: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 60%);
/*元は transform: translate(-50%, -50%);*/
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxTxtonfont p{
margin-left: 0;
/*ここから追加
!important;
*/
font-size: 14px;
font-weight: 500;!important;
display: block;
}
}
.parasolGarelly__fltBoxTxtonfont .item_name{
font-size: 27px;
font-family: futura-pt, sans-serif;
font-weight: 600;
line-height: 1.4;
letter-spacing: 1.5px;
margin-bottom: 10px;
display: block;
}
.parasolGarelly__fltBoxTxtonfont .item_size{
font-size: 14px;
font-weight: 500;
margin: -24px 0 -13px 0;
display: block;
}
/*-------*/
.parasolGarelly__fltBoxonfont {
display: flex;
margin-top: 30px;
position: relativ e;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxonfont {
display: block;
}
}
.parasolGarelly__fltBoxPhotoonfont {
width: 70%;
}
.parasolGarelly__fltBoxPhotoonfont a {
transition: 0.4s;
}
.parasolGarelly__fltBoxPhotoonfont a:hover {
opacity: 0.7;
}
.parasolGarelly__fltBoxPhotoonfont img {
width: 100%;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxPhotoonfont {
width: 100%;
}
}
.parasolGarelly__fltBoxTxtonfont {
width: 30%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
bottom: 10%;
transform: translate(-50%, 60%);
}
/*元はtransform: translate(-50%, -50%);*/
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxTxtonfont {
width: 100%;
display: block;
text-align: center;
margin-top: 20px;
position: absolute;
top: 50%;
left: 50%;
bottom: 10%;
transform: translate(-50%, 60%);
}
}
/*元はtransform: translate(-50%, -50%);*/
/*---レインウェアでテスト----
.rainwear23Txt {
margin-top: 20px;
text-align: left;
line-height: 2;
}
@media screen and (max-width: 768px) {
.rainwear23Txt {
line-height: 1.8;
}
}
.rainwear23FltBox {
overflow: hidden;
}
.rainwear23FltBox {
margin-top: 80px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 480px) {
.rainwear23FltBox {
margin-top: 50px;
display: block;
}
}
.rainwear23FltBox__photo {
float: left;
width: 50%;
background: #fff0;
}
.rainwear23FltBox__photo a {
transition: 0.4s;
}
.rainwear23FltBox__photo a:hover {
opacity: 0.7;
}
@media screen and (max-width: 768px) {
.rainwear23Box_22ss {
background-position: right;
}
}
@media screen and (max-width: 480px) {
.rainwear23Box_22ss {
padding: 60px 0 60px;
}
}
@media screen and (max-width: 480px) {
.rainwear23Box_22ss .planticaTitle {
padding-top: 20px;
width: 250px;
}
}
.rainwear23Box_22ss .planticaTxt{
margin-top: 20px;
text-align: center;
line-height: 2;
}
.rainwear23Box_22ss .planticaFltBox__photo{
margin: 0 20px 20px 20px;
}
@media screen and (max-width: 480px) {
.rainwear23Box_22ss .planticaFltBox__photo{
margin: 10px 0 0 0;
}
}
.rainwear23Box_22ss .planticaFltBox__title{
margin: 0 auto;
float: none;
font-family: futura-pt, sans-serif;
font-size: 25px;
}
.rainwear23FltBox__title p{
font-size: 16px;
font-weight: 600;
}
.rainwear23FltBox {
overflow: hidden;
}
.rainwear23FltBox {
margin-top: 80px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 480px) {
.rainwear23FltBox {
margin-top: 50px;
display: block;
}
}
.rainwear23FltBox__photo {
float: left;
width: 50%;
background: #fff0;
}
.rainwear23FltBox__photo a {
transition: 0.4s;
}
.rainwear23FltBox__photo a:hover {
opacity: 0.7;
}
@media screen and (max-width: 480px) {
.rainwear23FltBox__photo {
float: none;
width: 100%;
}
}
.rainwear23FltBox__title {
float: right;
width: 50%;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 14px;
text-align: center;
}
@media screen and (max-width: 480px) {
.rainwear23FltBox__title {
float: none;
width: 100%;
margin-top: 30px;
}
}
.rainwear23Title {
margin: 0 0 0 auto;
width: 400px;
padding-top: 120px;
}
@media screen and (max-width: 480px) {
.rainwear23Title {
padding-top: 60px;
width: 250px;
}
}
*/
/*-------------各ページアンカー----------------*/
/*-------------インスタ API--------------------*/
.gallery {
margin: 40px 0;
padding: 0;
}
.gallery-item {
width: 25%;
display: inline-block;
}
.gallery-item:last-child {
display: none;
}
/*---------------------20200211 add 12cate css-------------------------*/
.btn_roundCateBtm {
margin-bottom: 100px;
}
.disneyMv {
height: 65vh;
background-size: cover;
width: 100%;
position: relative;
background: url(../../item/disney/img/img_disney02.jpg);
}
.disneyCopy {
max-width: 500px;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
@media screen and (max-width: 480px) {
.disneyCopy {
padding: 0 40px;
}
}
.disneyCopy a {
transition: 0.4s;
}
.disneyCopy a:hover {
opacity: 0.7;
}
.disneyIntroBox {
padding: 50px 40px;
background: #fff;
}
.disneyIntroTxt {
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-size: 14px;
text-align: center;
line-height: 3;
font-weight: 600;
}
.disneyIntroAlartTxt {
margin-top: 40px;
font-size: 12px;
display: block;
}
.disneyItemBoxInner {
max-width: 1000px;
width: 100%;
margin: 0 auto;
overflow: hidden;
border: 1px solid #251e1c;
background: #fff;
}
.disneyItemBoxInner__L {
float: left;
width: 50%;
}
.disneyItemBoxInner__L {
transition: 0.4s;
}
.disneyItemBoxInner__L:hover {
opacity: 0.7;
background: #fff;
}
@media screen and (max-width: 480px) {
.disneyItemBoxInner__L {
float: none;
display: block;
width: 100%;
}
}
.disneyItemBoxInner__R {
float: right;
width: 50%;
padding: 110px 0;
text-align: center;
position: relative;
}
@media screen and (max-width: 480px) {
.disneyItemBoxInner__R {
float: none;
width: 100%;
padding: 60px 0;
}
}
.disneyItemBoxInner__RInner {
}
.disneyItemBoxTitle {
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 20px;
}
.disneyItemBoxTxt {
font-size: 14px;
margin-top: 20px;
line-height: 2;
padding: 0 20px;
}
.disneyItemBoxsmallPhoto {
width: 130px;
margin: 25px auto 0;
}
/*-----disney01 only-----*/
.disneyItemBox01 {
background: url(../../item/disney/img/img_disney05.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox01 .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney22ss_01.jpg);
background-size: cover;
background-position: left;
padding: 264px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox01 .disneyItemBoxInner__L {
padding: 190px 0;
}
}
/*-----disney02 only-----*/
.disneyItemBox02 {
background: url(../../item/disney/img/img_disney08.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox02 .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney22ss_02.jpg);
background-size: cover;
background-position: left;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox02 .disneyItemBoxInner__L {
padding: 240px 0;
}
}
/*-----disney03 only-----*/
.disneyItemBox03 {
background: #d5c8d7;
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox03 .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney22ss_03.jpg);
background-size: cover;
background-position: center;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox03 .disneyItemBoxInner__L {
padding: 240px 0;
}
}
.disneyItemBox03 .disneyItemBoxInner__R {
position: relative;
}
.disneyItemBox03 .disneyItemBoxsmallPhoto {
margin: 30px auto 0px;
width: 150px;
position: relative;
z-index: 20;
}
@media screen and (max-width: 480px) {
.disneyItemBox03 .disneyItemBoxsmallPhoto {
margin: 25px auto 0px;
}
}
.disneyItemBoxRapnzel {
position: absolute;
right: -40px;
bottom: -65px;
max-width: 300px;
width: 100%;
}
@media screen and (max-width: 480px) {
.disneyItemBoxRapnzel {
max-width: 160px;
}
}
/*-----disney04 only-----*/
.disneyItemBox04 {
background: url(../../item/disney/img/img_disney14.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox04 .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney22ss_04.jpg);
background-size: cover;
background-position: center;
padding: 264px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox04 .disneyItemBoxInner__L {
padding: 240px 0;
}
}
/*-----disney05 only-----*/
.disneyItemBox05 {
background: url(../../item/disney/img/img_disney17.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox05 .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney15.jpg);
background-size: cover;
background-position: center;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox05 .disneyItemBoxInner__L {
padding: 240px 0;
}
}
.disneyItemBox05 .disneyItemBoxsmallPhoto {
width: 85px;
margin: 20px auto 0;
}
/*-----disney06 only-----*/
.disneyItemBox06 {
background: url(../../item/disney/img/img_disney20.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox06 .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney18.jpg);
background-size: cover;
background-position: center;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox06 .disneyItemBoxInner__L {
padding: 240px 0;
}
}
.disneyItemBox06 .disneyItemBoxsmallPhoto {
width: 75px;
margin: 20px auto 0;
}
/*-----disney06_21ss only-----*/
.disneyItemBox06_21ss {
background: url(../../item/disney/img/img_disney20.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox06_21ss .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney22ss_05.jpg);
background-size: cover;
background-position: center;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox06_21ss .disneyItemBoxInner__L {
padding: 240px 0;
}
}
.disneyItemBox06_21ss .disneyItemBoxsmallPhoto {
width: 150px;
margin: 30px auto 0;
}
/*-----disney07 only-----*/
.disneyItemBox07 {
background: url(../../item/disney/img/img_disney23.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox07 .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney22ss_07.jpg);
background-size: cover;
background-position: right;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox07 .disneyItemBoxInner__L {
padding: 240px 0;
}
}
.disneyItemBox07 .disneyItemBoxsmallPhoto {
width: 150px;
margin: 30px auto 0;
}
/*-----disney07_21ss only-----*/
.disneyItemBox07_21ss {
background: url(../../item/disney/img/img_disney23.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox07_21ss .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney22ss_06.jpg);
background-size: cover;
background-position: right;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox07_21ss .disneyItemBoxInner__L {
padding: 240px 0;
}
}
.disneyItemBox07_21ss .disneyItemBoxsmallPhoto {
width: 110px;
margin: 30px auto 0;
}
/*-----disney08 only-----*/
.disneyItemBox08 {
background: url(../../item/disney/img/img_disney26.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox08 .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney24.jpg);
background-size: cover;
background-position: center;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox08 .disneyItemBoxInner__L {
padding: 240px 0;
}
}
.disneyItemBox08 .disneyItemBoxsmallPhoto {
width: 64px;
margin: 20px auto 0;
}
/*-----disney08_21ss only-----*/
.disneyItemBox08_21ss {
background: url(../../item/disney/img/img_disney26.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox08_21ss .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney24_21ss.jpg);
background-size: cover;
background-position: center;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox08_21ss .disneyItemBoxInner__L {
padding: 240px 0;
}
}
.disneyItemBox08_21ss .disneyItemBoxsmallPhoto {
width: 64px;
margin: 20px auto 0;
}
/*-----disney09 only-----*/
.disneyItemBox09 {
background: url(../../item/disney/img/img_disney29.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox09 .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney27.jpg);
background-size: cover;
background-position: center;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox09 .disneyItemBoxInner__L {
padding: 240px 0;
}
}
.disneyItemBox09 .disneyItemBoxsmallPhoto {
width: 58px;
margin: 20px auto 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox .disneyItemBoxInner__L {
background-position: bottom right;
}
}
/*-----disney09_21ss only-----*/
.disneyItemBox09_21ss {
background: url(../../item/disney/img/img_disney29.jpg);
background-size: cover;
padding: 75px 20px;
background-position: center;
}
.disneyItemBox09_21ss .disneyItemBoxInner__L {
background: url(../../item/disney/img/img_disney22ss_07.jpg);
background-size: cover;
background-position: center;
padding: 300px 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox09_21ss .disneyItemBoxInner__L {
padding: 240px 0;
}
}
.disneyItemBox09_21ss .disneyItemBoxsmallPhoto {
width: 110px;
margin: 30px auto 0;
}
@media screen and (max-width: 480px) {
.disneyItemBox .disneyItemBoxInner__L {
background-position: bottom right;
}
}
/*----------------------plantica--------------------*/
.planticaBox {
background: url(../../item/plantica/img/img_plantica08.jpg) repeat-y;
width: 100%;
padding: 119px 0 230px;
}
@media screen and (max-width: 768px) {
.planticaBox {
background-position: right;
}
}
@media screen and (max-width: 480px) {
.planticaBox {
padding: 60px 0 60px;
}
}
.planticaBox_21ss {
background: url(../../item/plantica/img/img_plantica_21ss_12.jpg) repeat-y;
width: 100%;
padding: 119px 0 230px;
}
@media screen and (max-width: 768px) {
.planticaBox_21ss {
background-position: right;
}
}
@media screen and (max-width: 480px) {
.planticaBox_21ss {
padding: 60px 0 60px;
}
}
.planticaBoxInner {
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.planticaTitle {
margin: 0 0 0 auto;
width: 400px;
padding-top: 120px;
}
@media screen and (max-width: 480px) {
.planticaTitle {
padding-top: 60px;
width: 250px;
}
}
.plantica__widePhotoBox {
width: 100%;
margin-top: 100px;
background: #fff;
}
.plantica__widePhotoBox a {
transition: 0.4s;
}
.plantica__widePhotoBox a:hover {
opacity: 0.7;
}
@media screen and (max-width: 480px) {
.plantica__widePhotoBox {
margin-top: 50px;
}
}
.planticaLogo {
margin-top: 50px;
width: 127px;
}
.planticaTxt {
margin-top: 20px;
text-align: left;
line-height: 2;
}
@media screen and (max-width: 768px) {
.planticaTxt {
line-height: 1.8;
}
}
.planticaFltBox {
overflow: hidden;
}
.planticaFltBox {
margin-top: 80px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 480px) {
.planticaFltBox {
margin-top: 50px;
display: block;
}
}
.planticaFltBox__photo {
float: left;
width: 50%;
background: #fff0;
}
.planticaFltBox__photo a {
transition: 0.4s;
}
.planticaFltBox__photo a:hover {
opacity: 0.7;
}
@media screen and (max-width: 480px) {
.planticaFltBox__photo {
float: none;
width: 100%;
}
}
.planticaFltBox__title {
float: right;
width: 50%;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 14px;
text-align: center;
}
@media screen and (max-width: 480px) {
.planticaFltBox__title {
float: none;
width: 100%;
margin-top: 30px;
}
}
/*----------------------plantica2022--------------------*/
.planticaBox_22ss {
background: url(../../item/plantica/img/img_plantica_21ss_12.jpg) repeat-y;
width: 100%;
padding: 100px 0 10px;
}
@media screen and (max-width: 768px) {
.planticaBox_22ss {
background-position: right;
}
}
@media screen and (max-width: 480px) {
.planticaBox_22ss {
padding: 60px 0 60px;
}
}
@media screen and (max-width: 480px) {
.planticaBox_22ss .planticaTitle {
padding-top: 20px;
width: 250px;
}
}
.planticaBox_22ss .planticaTxt{
margin-top: 20px;
text-align: center;
line-height: 2;
}
.planticaBox_22ss .planticaFltBox__photo{
margin: 0 20px 20px 20px;
}
@media screen and (max-width: 480px) {
.planticaBox_22ss .planticaFltBox__photo{
margin: 10px 0 0 0;
}
}
.planticaBox_22ss .planticaFltBox__title{
margin: 0 auto;
float: none;
font-family: futura-pt, sans-serif;
font-size: 25px;
}
.planticaFltBox__title p{
font-size: 16px;
font-weight: 600;
}
/*----------------------sanrio--------------------*/
.sanrioBox {
background: url(../../item/sanrio/img/img_sanrio10.jpg);
background-size: cover;
background-position: center;
padding: 100px 0 60px;
}
.sanrioMv {
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.sanrioMv__fltBox {
overflow: hidden;
position: relative;
}
.sanrioMv__photoBox {
float: left;
width: 50%;
background: #fff;
}
.sanrioMv__photoBox a {
transition: 0.4s;
}
.sanrioMv__photoBox a:hover {
opacity: 0.7;
}
@media screen and (max-width: 480px) {
.sanrioMv__photoBox {
float: none;
width: 100%;
}
}
.sanrioMv__txtBox {
float: right;
width: 63%;
top: 70%;
transform: translateY(-50%);
right: 0;
position: absolute;
background: rgba(255, 255, 255, 0.8);
padding: 40px 20px;
}
@media screen and (max-width: 480px) {
.sanrioMv__txtBox {
float: none;
width: 100%;
position: relative;
transform: none;
background: #fff;
}
}
.sanrioMv__title {
text-align: center;
line-height: 1;
margin: 0 auto;
font-size: 22px;
font-family: "Hiragino Sans";
font-weight: 700;
}
.sanrioMv__txt {
margin-top: 19px;
font-size: 14px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 400;
line-height: 2;
text-align: center;
}
.sanrioGarellyBox {
margin-top: 40px;
background: #fff;
padding: 40px 20px;
}
.sanrioGarellyBoxInner {
max-width: 550px;
width: 100%;
margin: 0 auto;
}
.sanrioGarellyBox02 {
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.sanrioGarellyBoxList {
display: flex;
}
@media screen and (max-width: 480px) {
.sanrioGarellyBoxList {
display: block;
}
}
.sanrioGarellyBoxList__title {
display: block;
margin-top: 10px;
text-align: center;
font-size: 12px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
}
.sanrioGarellyBoxList01 {
margin: 60px -10px 0;
}
@media screen and (max-width: 480px) {
.sanrioGarellyBoxList01 {
margin: 60px 0 0;
}
}
.sanrioGarellyBoxList01 .sanrioGarellyBoxList__L,
.sanrioGarellyBoxList01 .sanrioGarellyBoxList__R {
width: 50%;
padding: 0 10px;
}
@media screen and (max-width: 480px) {
.sanrioGarellyBoxList01 .sanrioGarellyBoxList__L,
.sanrioGarellyBoxList01 .sanrioGarellyBoxList__R {
width: 100%;
padding: 0;
}
}
.sanrioGarellyBoxList02 {
margin: 50px -20px;
}
@media screen and (max-width: 480px) {
.sanrioGarellyBoxList02 {
margin: 50px auto;
}
}
.sanrioGarellyBoxList02 .sanrioGarellyBoxList__L,
.sanrioGarellyBoxList02 .sanrioGarellyBoxList__R {
padding: 0 20px;
}
@media screen and (max-width: 480px) {
.sanrioGarellyBoxList02 .sanrioGarellyBoxList__L,
.sanrioGarellyBoxList02 .sanrioGarellyBoxList__R {
padding: 0;
}
}
.sanrioGarellyBoxList03 {
margin: 50px -22px;
}
@media screen and (max-width: 480px) {
.sanrioGarellyBoxList03 {
margin: 50px 0;
}
}
.sanrioGarellyBoxList03 .sanrioGarellyBoxList__L,
.sanrioGarellyBoxList03 .sanrioGarellyBoxList__R {
padding: 0 22px;
}
@media screen and (max-width: 480px) {
.sanrioGarellyBoxList03 .sanrioGarellyBoxList__L,
.sanrioGarellyBoxList03 .sanrioGarellyBoxList__R {
padding: 0;
}
}
.sanrioBox .btn_roundCateBtm {
margin-bottom: 0;
margin-top: 115px;
}
@media screen and (max-width: 480px) {
.sanrioGarellyBoxList01 .sanrioGarellyBoxList__R,
.sanrioGarellyBoxList02 .sanrioGarellyBoxList__R,
.sanrioGarellyBoxList03 .sanrioGarellyBoxList__R {
margin-top: 30px;
}
}
.sanrioGarellyBoxList__L img {
background: #fff;
}
.sanrioGarellyBoxList__L a {
transition: 0.4s;
}
.sanrioGarellyBoxList__L a:hover {
opacity: 0.7;
}
.sanrioGarellyBoxList__R a {
transition: 0.4s;
}
.sanrioGarellyBoxList__R a:hover {
opacity: 0.7;
background: #fff;
}
/* ---------------------- サンリオ新ページ22ss ---------------------- */
.Item_Sanrio_Box a:hover{
opacity: 0.7;
}
.Item_Sanrio_Box .brand_top_hero{
padding: 150px 33px 0px;
}
@media screen and (max-width: 480px) {
.Item_Sanrio_Box .brand_top_hero{
padding: 70px 0px 0px 0px;
}
}
.sanrioGarellyBox22ss {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.sanrioGarellyBox22ss a{
color: #000;
}
.sanrioGarellyBox22ss .btn_square a{
color: #fff;
}
.sanrioGarellyBoxList {
display: flex;
justify-content: center;
}
@media screen and (max-width: 480px) {
.sanrioGarellyBoxList {
display: block;
}
}
/* ---------------------- ▼サンリオ新ページ23ssコーディング途中 ---------------------- */
.hover_box {
overflow: hidden;
margin: 14px 16px 16px 14px;
position: relative; /* 相対位置指定 */
}
.hover_box .on_caption{
font-size: 150%;
text-align: center;
color: #000;
font-family: futura-pt, sans-serif;
}
@media screen and (max-width: 480px) {
.hover_box .on_caption{
font-size:130%;
}
}
.hover_box .caption_num{
font-weight: bold;
font-size: 140%;
}
.hover_box .caption_price{
display: block;
margin-top: 20px;
}
@media screen and (max-width: 480px) {
.hover_box .caption_price{
margin-top: 15px;
}
}
.hover_box .caption_taxin{
font-size: 14px;
}
.hover_box .mask {
width:100%;
height:100%;
position:absolute; /* 絶対位置指定 */
top:0;
left:0;
opacity:0; /* マスクを表示しない */
background-color: rgba(255,255,255,0.6); /* マスクは半透明 */
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.hover_box:hover .mask {
opacity:1; /* マスクを表示する */
}
.sanrioGarellyBox22ss .btn_square p{
padding: 5px 25px;
font-size: 18px;
font-family: futura-pt-bold, sans-serif;
background-color: #000;
color: #fff;
display: inline-block;
margin-top: 35px;
}
@media screen and (max-width: 480px) {
.sanrioGarellyBox22ss .btn_square p{
margin-top: 25px;
}
}
parasolBox {
background: #fdfcfc;
padding-bottom: 100px;
}
.parasolBox .btn_roundCateBtm {
margin-bottom: 0;
}
.parasolBox_21ss {
/*background: #ffffff;*/
padding-bottom: 10px;
}
.parasolTopMv {
position: relative;
width: 100%;
background: url(../../item/parasol/img/img_parasol01.jpg);
padding: 350px 0;
max-width: 1200px;
margin: 100px auto 0;
background-size: cover;
}
.parasolTopMv_21ss {
position: relative;
width: 100%;
background: url(../../item/parasol/img/img_parasol_21ss_01.jpg);
padding: 350px 0;
max-width: 1200px;
margin: 100px auto 0;
background-size: cover;
}
@media screen and (max-width: 480px) {
.parasolTopMv {
background-position: 24%;
}
}
@media screen and (max-width: 480px) {
.parasolTopMv_21ss {
background-position: 14%;
}
}
.parasolTopMv {
transition: 0.4s;
}
.parasolTopMv:hover {
opacity: 0.7;
}
.parasolTopMv__txtBox {
position: absolute;
right: 1%;
top: 10%;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.parasolTopMv__txtBox {
bottom: 10%;
top: auto;
}
}
.parasolTopMv__txtBox_21ss {
position: absolute;
right: 8%;
top: 67%;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.parasolTopMv__txtBox_21ss {
bottom: 5%;
top: auto;
}
}
.parasolTopMv__title {
text-align: left;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 27px;
color: #000;
}
@media screen and (max-width: 480px) {
.parasolTopMv__title {
font-size: 22px;
}
}
.parasolTopMv__title_21ss {
text-align: left;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 40px;
color: #000;
}
@media screen and (max-width: 480px) {
.parasolTopMv__title_21ss {
font-size: 22px;
}
}
.parasolTopMv__txt {
text-align: left;
line-height: 2;
color: #000;
font-size: 16px;
margin-top: 18px;
}
@media screen and (max-width: 480px) {
.parasolTopMv__txt {
font-size: 14px;
}
}
.parasolGarellyBox {
max-width: 1000px;
width: 100%;
margin: 76px auto 0;
/*background: #fff;*/
padding: 10px;
position: relative;
}
.parasolGarellyBoxInner {
border: 1px solid #c6cfdf;
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
@media screen and (max-width: 480px) {
.parasolGarellyBoxInner {
padding: 50px 20px;
margin-right: 0;
margin-bottom: 0;
}
}
.parasolGarellyBoxInner fff {
border: 1px solid #775747;
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
@media screen and (max-width: 480px) {
.parasolGarellyBoxInner fff {
padding: 50px 20px;
margin-right: 0;
margin-bottom: 0;
}
}
.head02__parasolGarelly {
font-size: 30px;
text-align: left;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.head02__parasolGarelly {
font-size: 20px;
}
}
.txt__parasolGarelly {
text-align: left;
font-size: 14px;
line-height: 2;
margin-top: 20px;
}
.parasolGarelly__fltBox {
display: flex;
margin-top: 30px;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBox {
display: block;
}
}
.parasolGarelly__fltBoxPhoto {
width: 70%;
}
.parasolGarelly__fltBoxPhoto a {
transition: 0.4s;
}
.parasolGarelly__fltBoxPhoto a:hover {
opacity: 0.7;
}
.parasolGarelly__fltBoxPhoto img {
width: 100%;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxPhoto {
width: 100%;
}
}
.parasolGarelly__fltBoxTxt {
width: 30%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
text-align: center;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxTxt {
width: 100%;
display: block;
text-align: center;
margin-top: 20px;
}
}
.parasolGarelly__fltBoxTxtfull {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
text-align: center;
margin-top: 15px ;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxTxtfull {
width: 100%;
display: block;
align-items: center;
text-align: center;
margin-top: 10px;
font-size: 13px;
}
}
/* ---------------------- ドラえもん ---------------------- */
.Item_Dora_Box a:hover{
opacity: 0.7;
}
.DoraGarellyBox_22ss{
padding-top: 80px;
}
@media screen and (max-width: 768px){
.DoraGarellyBox_22ss{
padding-top: 40px;
}
}
.DoraGarellyBox__photo{
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.dora_guide {
font-size: 50px;
font-family: futura-pt, sans-serif;
font-weight: 600;
color: #72C7DA;
border-bottom: 4px solid #72C7DA;
margin:50px 0 0 0;
display: inline-block;
}
@media screen and (max-width: 768px){
.dora_guide {
font-size: 8vw;
margin:30px 0 0 0;
border-bottom: 3px solid #72C7DA;
}
}
.btn_roundCateBtm_dora{
margin:110px auto 120px auto;
}
@media screen and (max-width: 768px){
.btn_roundCateBtm_dora {
margin:80px auto 70px auto;
}
}
.dora_space{
margin: 10px;
}
/* ---------------------- ペコちゃん ---------------------- */
.Item_Peko_Box a:hover{
opacity: 0.7;
}
.PekoGarellyBox22ss{
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 30px;
}
@media screen and (max-width: 480px){
.PekoGarellyBox22ss{
padding: 0 10px;
}
}
.PekoGarellyBox22ss__01,.PekoGarellyBox22ss__02{
display: flex;
align-items: flex-end;
justify-content: center;
margin-top: 120px;
}
@media screen and (max-width: 480px){
.PekoGarellyBox22ss__01,.PekoGarellyBox22ss__02{
flex-direction: column;
}
}
.PekoGarellyBox22ss__02{
flex-flow: row-reverse;
}
@media screen and (max-width: 480px){
.PekoGarellyBox22ss__02{
flex-flow: column;
margin-bottom:90px;
}
}
.PekoGarellyBox22ss__photo{
width: 55%;
}
@media screen and (max-width: 480px){
.PekoGarellyBox22ss__photo{
width: 90%;
margin: 0 auto;
}
}
.PekoGarellyBox22ss__photo .img_model{
position: relative;
}
.PekoGarellyBox22ss__01 .milky_01{
position: absolute;
width: 22%;
top:-60px;
left: -20px;
}
@media screen and (max-width: 480px){
.PekoGarellyBox22ss__01 .milky_01{
top:-20px;
}
}
.PekoGarellyBox22ss__02 .milky_02{
position: absolute;
width: 19%;
top: -70px;
right: -10px;
}
.PekoGarellyBox22ss__02 .milky_03{
position: absolute;
width: 24%;
bottom: -20px;
left: -20px;
}
.PekoGarellyBox22ss__caption{
width: 30%;
margin: 0 55px;
}
@media screen and (max-width: 480px){
.PekoGarellyBox22ss__caption{
width: 60%;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column-reverse;
}
}
@media screen and (max-width: 480px){
.PekoGarellyBox22ss__caption .caption_image{
margin-top: 35px;
}
}
.caption_text p{
font-size: 24px;
font-family: futura-pt, sans-serif;
margin-top: 5px;
}
@media screen and (max-width: 480px){
.caption_text p{
font-size: 20px;
margin-top: 0;
}
}
p.peko_num{
font-family:"coquette";
font-weight: bold;
font-size: 3vw;
color: #DE0C1D;
}
@media screen and (max-width: 480px){
p.peko_num{
font-size: 15vw;
}
}
.caption_text .peko_price{
margin-top: 30px;
}
@media screen and (max-width: 480px){
.caption_text .peko_price{
margin-top: 15px;
}
}
.caption_text .peko_taxin{
margin-left: 5px;
font-size: 14px;
}
.PekoGarellyBox22ss .btn_square{
padding: 3px 15px;
background-color: #DE0C1D;
border-radius:10px;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-size: 18px;
color: #fff;
display: inline-block;
margin-left: 10px;
}
@media screen and (max-width: 480px){
.PekoGarellyBox22ss .btn_square{
font-size: 14px;
}
}
.PekoGarellyBox22ss .btn_square a{
color: #fff;
}
.PekoGarellyBox22ss a{
color: #fff;
}
/*----------------------umbrella--------------------*/
.umbrellaBox {
width: 100%;
}
.umbrellaTopMv {
max-width: 1200px;
width: 100%;
margin: 200px auto 0;
}
@media screen and (max-width: 480px) {
.umbrellaTopMv {
margin: 80px auto 0;
}
}
.umbrellaTopMv__title {
width: 340px;
margin: 0 auto;
}
.umbrellaTopMv__title_21ss {
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.umbrellaTopMv__photo {
text-align: center;
margin-top: 85px;
padding: 0 20px;
}
@media screen and (max-width: 480px) {
.umbrellaTopMv__photo {
margin-top: 50px;
}
}
.umbrellaTopMv__subTitle {
text-align: center;
font-size: 24px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
margin-top: 60px;
line-height: 1;
}
.umbrellaTopMv__txt {
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 100;
font-size: 16px;
line-height: 3;
margin-top: 13px;
text-align: center;
}
@media screen and (max-width: 480px) {
.umbrellaTopMv__txt {
padding: 0 20px;
}
}
.umbrellaGarellyBox {
max-width: 1000px;
width: 100%;
padding: 0 20px;
margin: 120px auto 0;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBox {
margin: 50px auto 0;
}
}
.umbrella_btnRound {
margin: 30px auto 0;
}
/* CSS */
area:focus {
outline: none;
}
.mouseOnMap:hover {
opacity: 0.3;
}
.umbrellaGarellyBoxInner__01RBtm {
display: flex;
justify-content: center;
align-items: center;
}
/*----UMBRELLA 01----*/
.umbrellaGarellyBoxInner__01 {
border: 1px solid #000;
overflow: hidden;
}
.umbrellaGarellyBoxInner__01L {
float: left;
width: 50%;
background: url(../../item/umbrella/img/img_umbrella_01_01.jpg) no-repeat;
background-size: cover;
background-position: center;
padding: 412.5px 0;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__01L {
padding: 212px 0;
}
}
.umbrellaGarellyBoxInner__01L:hover {
opacity: 0.7;
}
.umbrellaGarellyBoxInner__01R {
float: right;
width: 50%;
display: block;
}
.umbrellaGarellyBoxInner__01RTop {
background: url(../../item/umbrella/img/img_umbrella_01_02.jpg) no-repeat;
background-size: cover;
padding: 200px 0;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__01RTop {
padding: 102px 0;
}
}
.umbrellaGarellyBoxInner__01 .umbrellaGarellyBoxInner__01RBtm {
background: #6c779d;
text-align: center;
padding: 200px 0;
color: #fff;
font-size: 16px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__01 .umbrellaGarellyBoxInner__01RBtm {
padding: 100.5px 0;
}
.umbrellaGarellyBoxInner__01 .umbrellaGarellyBoxInner__2danT {
padding: 91px 0 !important;
}
}
/*----UMBRELLA 02----*/
.umbrellaGarellyBoxInner__02 {
overflow: hidden;
border: 1px solid #000;
}
.umbrellaGarellyBoxInner__02L {
width: 50%;
float: left;
}
.umbrellaGarellyBoxInner__02LTop {
background: #a50047;
text-align: center;
padding: 200px 0;
color: #fff;
font-size: 16px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__02LTop {
padding: 100px 0;
}
}
.umbrellaGarellyBoxInner__02LBtm {
background: url(../../item/umbrella/img/img_umbrella_02_02.jpg) no-repeat;
background-size: cover;
background-position: center;
padding: 203.5px 0;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__02LBtm {
padding: 100px 0;
}
}
.umbrellaGarellyBoxInner__02R {
width: 50%;
float: right;
background: url(../../item/umbrella/img/img_umbrella_02_01.jpg) no-repeat;
padding: 416px 0;
background-position: center;
background-size: cover;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__02R {
padding: 209.5px 0;
}
}
.umbrellaGarellyBoxInner__02R:hover {
opacity: 0.7;
}
/*----UMBRELLA 03----*/
.umbrellaGarellyBoxInner__03 {
overflow: hidden;
display: block;
}
.umbrellaGarellyBoxInner__03_yoko {
border: 1px solid #000;
}
.umbrellaGarellyBoxInner__03Wide {
background: url(../../item/umbrella/img/img_umbrella_03_01.jpg) no-repeat;
padding: 250px 0;
background-position: center;
background-size: cover;
display: block;
transition: 0.4s;
}
.umbrellaGarellyBoxInner__03Wide:hover {
opacity: 0.7;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__03Wide {
padding: 112px;
}
}
.umbrellaGarellyBoxInner__03Flt {
overflow: hidden;
}
.umbrellaGarellyBoxInner__03FltL {
width: 50%;
float: left;
background: url(../../item/umbrella/img/img_umbrella_01_03_2.jpg) no-repeat;
padding: 122px 0;
background-position: center;
background-size: cover;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__03FltL {
padding: 89px 0;
}
}
.umbrellaGarellyBoxInner__03FltR {
width: 50%;
float: left;
background: #d1beda;
padding: 110px 0;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
color: #fff;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__03FltR {
padding: 80px 0;
}
}
/*----UMBRELLA 04----*/
.umbrellaGarellyBoxInner__04 {
overflow: hidden;
border: 1px solid #000;
}
.umbrellaGarellyBoxInner__04L {
float: left;
width: 50%;
}
.umbrellaGarellyBoxInner__04LTop {
width: 100%;
background: #1c2044;
padding: 200px 0;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
color: #fff;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__04LTop {
padding: 100px 0;
}
}
.umbrellaGarellyBoxInner__04LBtm {
width: 100%;
background: url(../../item/umbrella/img/img_umbrella_04_01.jpg) no-repeat;
padding: 200px 0;
background-position: center;
background-size: cover;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__04LBtm {
padding: 100px 0;
}
}
.umbrellaGarellyBoxInner__04R {
width: 50%;
float: left;
background: url(../../item/umbrella/img/img_umbrella_04_02.jpg) no-repeat;
padding: 412px 0;
background-position: center;
background-size: cover;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__04R {
padding: 212px 0;
}
}
.umbrellaGarellyBoxInner__04R:hover {
opacity: 0.7;
}
/*----UMBRELLA 05----*/
.umbrellaGarellyBoxInner__05 {
overflow: hidden;
border: 1px solid #000;
}
.umbrellaGarellyBoxInner__05L {
width: 50%;
float: left;
}
.umbrellaGarellyBoxInner__05LTop {
background: url(../../item/umbrella/img/img_umbrella_05_01.jpg) no-repeat;
padding: 200px 0;
background-size: cover;
background-position: center;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__05LTop {
padding: 100px 0;
}
}
.umbrellaGarellyBoxInner__05LBtm {
width: 100%;
background: #212329;
padding: 200px 0;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
color: #fff;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__05LBtm {
padding: 100px 0;
}
}
.umbrellaGarellyBoxInner__05R {
float: right;
width: 50%;
background: url(../../item/umbrella/img/img_umbrella_05_02.jpg) no-repeat;
padding: 412px 0;
background-size: cover;
background-position: center;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__05R {
padding: 209px 0;
}
}
.umbrellaGarellyBoxInner__05R:hover {
opacity: 0.7;
}
/*----UMBRELLA 06--*/
.umbrellaGarellyBoxInner__06 {
overflow: hidden;
border: 1px solid #000;
}
.umbrellaGarellyBoxInner__06L {
float: left;
width: 50%;
background: url(../../item/umbrella/img/img_umbrella_06_01.jpg) no-repeat;
padding: 412px 0;
background-size: cover;
background-position: center;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__06L {
padding: 209px 0;
}
}
.umbrellaGarellyBoxInner__06L:hover {
opacity: 0.7;
}
.umbrellaGarellyBoxInner__06R {
width: 50%;
float: right;
}
.umbrellaGarellyBoxInner__06RTop {
background: url(../../item/umbrella/img/img_umbrella_remon.jpg) no-repeat;
padding: 200px 0;
background-size: cover;
background-position: center;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__06RTop {
padding: 100px 0;
}
}
.umbrellaGarellyBoxInner__06RBtm {
width: 100%;
background: #262d63;
padding: 200px 0;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
color: #fff;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__06RBtm {
padding: 100px 0;
}
}
/*------07---------*/
.umbrellaGarellyBoxInner__07 {
overflow: hidden;
border: 1px solid #000;
}
.umbrellaGarellyBoxInner__07L {
float: left;
width: 50%;
}
.umbrellaGarellyBoxInner__07LTop {
background: url(../../item/umbrella/img/img_umbrella_06_01_1.jpg) no-repeat;
padding: 200px 0;
background-size: cover;
background-position: center;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__07LTop {
padding: 100px 0;
}
}
.umbrellaGarellyBoxInner__07LBtm {
width: 100%;
background: #a53f84;
padding: 200px 0;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
color: #fff;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__07LBtm {
padding: 100px 0;
}
}
.umbrellaGarellyBoxInner__07R {
float: right;
width: 50%;
float: left;
width: 50%;
background: url(../../item/umbrella/img/img_umbrella_06_02.jpg) no-repeat;
padding: 412px 0;
background-size: cover;
background-position: center;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__07R {
padding: 209px 0;
}
}
.umbrellaGarellyBoxInner__07R:hover {
opacity: 0.7;
}
/*----08----*/
.umbrellaGarellyBoxInner__08 {
background: url(../../item/umbrella/img/img_umbrella_07_01.jpg) no-repeat;
padding: 250px 0;
background-position: center;
background-size: cover;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__08 {
padding: 112px 0;
}
}
.umbrellaGarellyBoxInner__08:hover {
opacity: 0.7;
}
.umbrellaGarellyBoxInner__08FltL {
width: 50%;
float: left;
background: url(../../item/umbrella/img/img_umbrella_07_02.jpg) no-repeat;
padding: 122.5px 0;
background-position: center;
background-size: cover;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__08FltL {
padding: 90px 0;
}
}
.umbrellaGarellyBoxInner__08FltR {
width: 50%;
float: left;
padding: 110px 0;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
color: #fff;
font-size: 16px;
background: #b06975;
text-align: center;
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInner__08FltR {
padding: 80.5px 0;
}
.umbrellaGarellyBoxInner__2danY {
padding: 71px 0;
}
}
@media screen and (max-width: 480px) {
.umbrellaGarellyBoxInnerTxt {
font-size: 12px !important;
}
}
map area {
cursor: pointer;
cursor: hand;
}
/*----------------------womansrainwear(rainwear)--------------------*/
.womansRainwearBox {
width: 100%;
overflow: hidden;
}
.womansRainwearTopMv {
max-width: 940px;
margin: 200px auto 0;
width: 100%;
padding: 0 20px;
}
@media screen and (max-width: 480px) {
.womansRainwearTopMv {
margin: 80px auto 0;
}
}
.womansRainwearTitle {
text-align: left;
max-width: 900px;
width: 100%;
margin: 0 auto 0 0;
}
.womansRainwearTxt {
font-size: 16px;
text-align: left;
line-height: 2.3;
margin-top: 30px;
}
.womansRainwearGarellyBox {
width: 100%;
padding: 50px 0;
}
.womansRainwearGarellyBox01 {
background: #b2b5bd;
margin-top: 70px;
}
.womansRainwearGarellyBox02 {
background: #e9ed9e;
}
.womansRainwearGarellyBox03 {
background: #fefaf1;
}
.womansRainwearGarellyBox04 {
background: #cfe5e3;
}
.womansRainwearGarellyBox05 {
background: #d6d1e7;
}
.womansRainwearGarellyBox06 {
background: #b0c0ce;
}
.womansRainwearGarellyBox07 {
background: #e0dacc;
}
.womansRainwearGarellyBoxInner {
max-width: 1000px;
margin: 0 auto;
width: 100%;
padding: 0 20px;
}
.womansRainwearGarelly__fltBox {
display: flex;
justify-content: space-between;
margin: 0 -30px;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.womansRainwearGarelly__fltBox {
display: block;
padding: 0 40px;
}
}
.womansRainwearGarelly__fltBoxPhoto,
.womansRainwearGarelly__fltBoxTxt {
padding: 0 30px;
}
@media screen and (max-width: 768px) {
.womansRainwearGarelly__fltBoxPhoto,
.womansRainwearGarelly__fltBoxTxt {
padding: 0;
}
}
.womansRainwearGarelly__title {
text-align: left;
font-size: 26px;
font-family: futura-pt, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1;
}
.womansRainwearGarelly__fltBoxPhoto {
width: 48%;
}
@media screen and (max-width: 768px) {
.womansRainwearGarelly__fltBoxPhoto {
width: 100%;
}
}
.womansRainwearGarelly__fltBoxPhoto img {
width: 100%;
background: #fff;
}
.womansRainwearGarelly__fltBoxPhoto a {
display: block;
background: #fff;
}
.womansRainwearGarelly__fltBoxPhoto img {
transition: 0.4s;
}
.womansRainwearGarelly__fltBoxPhoto img:hover {
opacity: 0.7;
}
.womansRainwearGarelly__fltBoxTxt {
position: relative;
background: #fff;
width: 48%;
}
@media screen and (max-width: 768px) {
.womansRainwearGarelly__fltBoxTxt {
width: 100%;
}
}
.womansRainwearGarelly__txt {
font-size: 14px;
text-align: left;
line-height: 1.8;
margin-top: 15px;
}
.womansRainwearGarelly__fltBoxTxtInner {
position: absolute;
width: 100%;
padding: 0 40px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
.womansRainwearGarelly__fltBoxTxtInner {
position: relative;
transform: none;
top: auto;
left: auto;
padding: 30px 20px;
}
}
.womansRainwearGarelly__photo {
margin-top: 10px;
}
/*----------------------unisexrainwear(rainwear)--------------------*/
.unisexRainwearGarellyBox01 {
background: #baae96;
}
.unisexRainwearGarellyBox02 {
background: #814540;
}
.unisexRainwearGarellyBox03 {
background: #5e797f;
}
/*----------------------handkerchief--------------------*/
.handkerchiefMv {
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 150px 20px 70px;
}
@media screen and (max-width: 480px) {
.handkerchiefMv {
padding: 60px 20px 40px;
}
}
.handkerchiefMv-test {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 150px 20px 70px;
text-align: center;
}
@media screen and (max-width: 480px) {
.handkerchiefMv-test {
padding: 60px 20px 10px;
}
}
.handkerchiefMv img {
width: 100%;
}
.handkerchiefMv__title {
font-family: "Hiragino Sans";
font-weight: 600;
font-size: 26px;
text-align: center;
margin-top: 70px;
}
@media screen and (max-width: 480px) {
.handkerchiefMv__title {
margin-top: 30px;
}
}
.handkerchiefMv__txt {
text-align: center;
font-size: 16px;
line-height: 2;
font-weight: 300;
margin-top: 20px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}
.handkerchiefMv__logo {
margin: 25px auto 0;
max-width: 120px;
width: 100%;
}
@media screen and (max-width: 480px) {
.handkerchiefMv__logo {
max-width: 80px;
}
}
.handkerchiefMv {
background: #fff;
}
.handkerchiefMv a {
transition: 0.4s;
}
.handkerchiefMv a:hover {
opacity: 0.7;
}
.handkerchiefgarellyBox {
padding: 60px 0;
margin-top: 40px;
overflow: hidden;
}
@media screen and (max-width: 480px) {
.handkerchiefgarellyBox {
padding: 20px 0;
margin-top: 20px;
}
}
.handkerchiefgarellyBox_21ss {
padding: 80px 0;
margin-top: 0px;
overflow: hidden;
}
@media screen and (max-width: 480px) {
.handkerchiefgarellyBox_21ss {
padding: 10px 0;
margin-top: 20px;
}
}
.handkerchiefgarellyBox01 {
background: #edd6ce;
}
.handkerchiefgarellyBox02 {
background: #5f9c57;
}
.handkerchiefgarellyBox03 {
background: #cecccd;
}
.handkerchiefgarellyBox04 {
background: #c84c91;
}
.handkerchiefgarellyBox_21ss_01 {
background: #cee6ed;
}
.handkerchiefgarellyBox_21ss_02 {
background: #fff0f6;
}
.handkerchiefgarellyBox_21ss_03 {
background: #dcdcdc;
}
.handkerchiefgarellyBox_21ss_04 {
background: #ffffff;
}
.handkerchiefgarellyBox_21ss_05 {
background: #dbf0ec;
}
.handkerchiefgarellyBox_21ss_06 {
background: #e2f6ff;
}
.handkerchiefgarellyBox_21ss_07 {
background: #fdfff0;
}
.handkerchiefgarellyBox__photo {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.handkerchiefgarellyBox__photo a {
transition: 0.4s;
}
.handkerchiefgarellyBox__photo a:hover {
opacity: 0.8;
}
.handkerchiefgarellyBox05 {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.handkerchiefgarellyBox05FltBox {
margin: 0 -7px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.handkerchiefgarellyBox05FltBox li {
width: 25%;
padding: 0 7px;
margin-top: 30px;
}
@media screen and (max-width: 480px) {
.handkerchiefgarellyBox05FltBox li {
width: 50%;
}
}
.handkerchiefgarellyBox05FltBox li span {
display: block;
margin-bottom: 10px;
text-align: center;
font-weight: 600;
font-size: 12px;
letter-spacing: 2px;
}
.handkerchiefgarellyBox05FltBox li {
background: #fff;
}
.handkerchiefgarellyBox05FltBox li a {
transition: 0.4s;
}
.handkerchiefgarellyBox05FltBox li a:hover {
opacity: 0.7;
}
/*----------------------parasol--------------------*/
.parasolBox {
background: #fdfcfc;
padding-bottom: 100px;
}
.parasolBox .btn_roundCateBtm {
margin-bottom: 0;
}
.parasolBox_21ss {
/*background: #ffffff;*/
padding-bottom: 10px;
}
.parasolTopMv {
position: relative;
width: 100%;
background: url(../../item/parasol/img/img_parasol01.jpg);
padding: 350px 0;
max-width: 1200px;
margin: 100px auto 0;
background-size: cover;
}
.parasolTopMv_21ss {
position: relative;
width: 100%;
background: url(../../item/parasol/img/img_parasol_21ss_01.jpg);
padding: 350px 0;
max-width: 1200px;
margin: 100px auto 0;
background-size: cover;
}
@media screen and (max-width: 480px) {
.parasolTopMv {
background-position: 24%;
}
}
@media screen and (max-width: 480px) {
.parasolTopMv_21ss {
background-position: 14%;
}
}
.parasolTopMv {
transition: 0.4s;
}
.parasolTopMv:hover {
opacity: 0.7;
}
.parasolTopMv__txtBox {
position: absolute;
right: 1%;
top: 10%;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.parasolTopMv__txtBox {
bottom: 10%;
top: auto;
}
}
.parasolTopMv__txtBox_21ss {
position: absolute;
right: 8%;
top: 67%;
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.parasolTopMv__txtBox_21ss {
bottom: 5%;
top: auto;
}
}
.parasolTopMv__title {
text-align: left;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 27px;
color: #000;
}
@media screen and (max-width: 480px) {
.parasolTopMv__title {
font-size: 22px;
}
}
.parasolTopMv__title_21ss {
text-align: left;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 40px;
color: #000;
}
@media screen and (max-width: 480px) {
.parasolTopMv__title_21ss {
font-size: 22px;
}
}
.parasolTopMv__txt {
text-align: left;
line-height: 2;
color: #000;
font-size: 16px;
margin-top: 18px;
}
@media screen and (max-width: 480px) {
.parasolTopMv__txt {
font-size: 14px;
}
}
.parasolGarellyBox {
max-width: 1000px;
width: 100%;
margin: 76px auto 0;
/*background: #fff;*/
padding: 10px;
position: relative;
}
.parasolGarellyBoxInner {
border: 1px solid #c6cfdf;
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
@media screen and (max-width: 480px) {
.parasolGarellyBoxInner {
padding: 50px 20px;
margin-right: 0;
margin-bottom: 0;
}
}
.head02__parasolGarelly {
font-size: 30px;
text-align: left;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.head02__parasolGarelly {
font-size: 20px;
}
}
.txt__parasolGarelly {
text-align: left;
font-size: 14px;
line-height: 2;
margin-top: 20px;
}
.parasolGarelly__fltBox {
display: flex;
margin-top: 30px;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBox {
display: block;
}
}
.parasolGarelly__fltBoxPhoto {
width: 70%;
}
.parasolGarelly__fltBoxPhoto a {
transition: 0.4s;
}
.parasolGarelly__fltBoxPhoto a:hover {
opacity: 0.7;
}
.parasolGarelly__fltBoxPhoto img {
width: 100%;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxPhoto {
width: 100%;
}
}
.parasolGarelly__fltBoxTxt {
width: 30%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
text-align: center;
}
@media screen and (max-width: 480px) {
.parasolGarelly__fltBoxTxt {
width: 100%;
display: block;
text-align: center;
margin-top: 20px;
}
}
/*----------------------parasol--------------------*/
.footwearBox {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.footwearTopMv {
width: 100%;
margin-top: 180px;
background: #fff;
}
.footwearTopMv a {
transition: 0.4s;
}
.footwearTopMv a:hover {
opacity: 0.7;
}
.footwearTopMv__txtBox {
background: url(../../item/footwear/img/img_rainboots_mvbg.jpg) no-repeat;
background-size: cover;
background-position: center;
height: 40vh;
width: 100%;
border-radius: 30px;
border: 1px solid #000;
position: relative;
transition: 0.4s;
}
.footwearTopMv a:hover .footwearTopMv__txtBox {
opacity: 0.7;
}
.footwearTopMv__txtBoxInner {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.footwearTopMv__txtBox__head01 {
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 26px;
text-align: right;
line-height: 1.5;
color: #000;
}
.footwearTopMv__txtBox__txt {
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 400;
font-size: 14px;
text-align: right;
margin-top: 30px;
line-height: 2;
color: #000;
}
.footwearTopMv__txt {
text-align: center;
margin-top: 30px;
}
@media screen and (max-width: 480px) {
.footwearTopMv {
margin-top: 80px;
}
}
.footwearBox__Intro {
margin-top: 80px;
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.footwearBoxIntro__head02 {
text-align: center;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 24px;
}
.footwearBoxIntro__head02 span {
font-size: 10px;
color: #c50018;
display: block;
}
.footwearBoxIntro__txt {
margin-top: 20px;
text-align: center;
line-height: 2;
font-size: 16px;
}
.footwear__IntroFltBox {
display: flex;
margin: 80px -40px 0;
}
@media screen and (max-width: 768px) {
.footwear__IntroFltBox {
display: block;
margin: 40px 0 0;
}
}
.footwear__IntroFltBoxR,
.footwear__IntroFltBox {
padding: 0 40px;
}
@media screen and (max-width: 480px) {
.footwear__IntroFltBoxR,
.footwear__IntroFltBox {
padding: 0;
}
}
.footwear__IntroFltBoxL {
width: 60%;
}
@media screen and (max-width: 768px) {
.footwear__IntroFltBoxL {
width: 100%;
}
}
.footwear__IntroFltBoxR {
width: 40%;
}
@media screen and (max-width: 768px) {
.footwear__IntroFltBoxR {
width: 80%;
margin: 0 auto;
}
}
.footwearBox__garelly {
margin-top: 50px;
}
.footwearBox__IntroList {
display: flex;
margin: 0 -10px;
}
.footwearBox__IntroList li {
width: 33.33%;
padding: 0 10px;
}
.footwearBox__IntroList li a {
transition: 0.4s;
}
.footwearBox__IntroList li a img {
border-radius: 20px;
}
.footwearBox__IntroList li a:hover {
opacity: 0.7;
}
.footwearBox__IntroTwoColomPhoto {
display: flex;
margin: 50px -34px 0;
}
@media screen and (max-width: 480px) {
.footwearBox__IntroTwoColomPhoto {
display: block;
margin: 20px 0 0;
}
}
.footwearBox__IntroTwoColomPhotoL,
.footwearBox__IntroTwoColomPhotoR {
padding: 0 34px;
width: 50%;
}
@media screen and (max-width: 480px) {
.footwearBox__IntroTwoColomPhotoL,
.footwearBox__IntroTwoColomPhotoR {
padding: 0;
width: 80%;
margin: 0 auto;
}
.footwearBox__IntroTwoColomPhotoR {
margin-top: 30px;
}
}
.footwearBox__IntrofourColomPhoto {
display: flex;
margin: 50px -18px 0;
flex-wrap: wrap;
}
@media screen and (max-width: 480px) {
.footwearBox__IntrofourColomPhoto {
margin: 30px -10px 0;
}
}
.footwearBox__IntrofourColomPhoto li {
width: 25%;
padding: 0 18px;
}
@media screen and (max-width: 480px) {
.footwearBox__IntrofourColomPhoto li {
width: 50%;
padding: 0 10px;
margin-top: 30px;
}
}
.footwearBox__IntrofourColomPhoto li a {
transition: 0.4s;
}
.footwearBox__IntrofourColomPhoto li a:hover {
opacity: 0.7;
}
.footwearBox__IntrofourColomTxt {
display: block;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 18px;
text-align: center;
margin-top: 30px;
letter-spacing: 2px;
color: #000;
}
@media screen and (max-width: 480px) {
.footwearBox__IntrofourColomTxt {
font-size: 14px;
}
}
.footwearBox__IntroTwoColomFlt {
display: flex;
margin-top: 60px;
}
.footwearBox__IntroTwoColomFlt li {
width: 50%;
overflow: hidden;
}
.footwearBox__IntroTwoColomFlt li a {
transition: 0.4s;
}
.footwearBox__IntroTwoColomFlt li a:hover {
opacity: 0.7;
}
.footwearBox__IntrofourColomFltPhoto {
float: left;
width: 50%;
}
.footwearBox__IntrofourColomFltTxt {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
float: right;
width: 50%;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 2px;
color: #000;
}
@media screen and (max-width: 480px) {
.footwearBox__IntrofourColomFltTxt {
font-size: 14px;
}
}
/*----------------------raingoods--------------------*/
.raingoodsBox {
width: 100%;
padding: 0 20px;
background: linear-gradient(#fff 15%, #dedce1 90%);
}
.raingoodsBoxInner {
max-width: 1200px;
background: #fff;
width: 100%;
margin: 0 auto;
padding: 0 0 100px;
}
.raingoodsBoxInner .btn_roundCateBtm {
margin-bottom: 0;
}
.raingoodsTopMv {
max-width: 1200px;
width: 100%;
margin: 120px auto 0;
}
.raingoodsTopMvTxt {
text-align: center;
font-size: 14px;
margin-top: 30px;
line-height: 2;
}
.raingoodsTopMvTxt span {
font-size: 20px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
display: block;
margin-bottom: 15px;
}
.raingoodsTopMv__photo {
background: #fff;
}
.raingoodsTopMv__photo a img {
transition: 0.4s;
}
.raingoodsTopMv__photo a img:hover {
opacity: 0.7;
}
.raingoodsGarellyBox {
max-width: 1000px;
width: 100%;
margin: 70px auto 0;
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBox {
margin: 30px auto 0;
padding: 0;
}
}
.raingoodsGarellyBoxSecond {
margin-top: 70px;
}
.raingoodsGarellyBoxFltBox {
display: flex;
border: 1px solid #bca89e;
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBoxFltBox {
display: block;
}
}
.raingoodsGarellyBoxFltBox__L {
width: 45%;
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBoxFltBox__L {
width: 100%;
}
}
.raingoodsGarellyBoxFltBox__L a {
transition: 0.4s;
background: #fff;
}
.raingoodsGarellyBoxFltBox__L a:hover {
opacity: 0.7;
}
.raingoodsGarellyBoxFltBox__R {
width: 55%;
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBoxFltBox__R {
width: 100%;
padding: 20px;
}
}
.raingoodsGarellyBoxFltBox__R {
position: relative;
width: 55%;
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBoxFltBox__R {
width: 100%;
}
}
.raingoodsGarellyBoxFltBox__REven {
width: 55%;
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBoxFltBox__REven {
width: 100%;
}
}
.raingoodsGarellyBoxFltBox__LEven {
width: 45%;
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBoxFltBox__LEven {
width: 100%;
}
}
.raingoodsGarellyBoxFltBox__REven .raingoodsGarellyBoxFltBox__RInner {
right: 0;
}
.raingoodsGarellyBoxFltBox__REven
.raingoodsGarellyBoxFltBox__RInner
.raingoodsGarellyBoxFltBoxTxt {
text-align: right;
}
.raingoodsGarellyBoxFltBox__RInner {
position: absolute;
bottom: 30px;
left: 0;
padding: 0 20px;
width: 100%;
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBoxFltBox__RInner {
position: relative;
bottom: auto;
left: auto;
padding: 0;
}
}
.raingoodsGarellyBoxFltBoxTitle {
padding: 0 10px;
text-align: left;
}
.raingoodsGarellyBoxFltBoxTitle img {
vertical-align: sub;
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBoxFltBoxTitle {
width: 100%;
}
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBoxFltBoxTitle01 {
width: 90%;
}
}
.raingoodsGarellyBoxFltBoxTxt {
padding: 0 10px;
margin-top: 20px;
font-size: 14px;
text-align: left;
line-height: 2;
}
@media screen and (max-width: 480px) {
.raingoodsGarellyBoxFltBoxTxt {
margin-top: 20px;
}
}
/*----------------------unisex--------------------*/
.unisexBox {
margin-top: 100px;
background: linear-gradient(#fff, #d0d7dd);
}
.unisexBoxInner {
background: #fff;
padding: 20px 70px;
max-width: 1290px;
width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 480px) {
.unisexBoxInner {
padding: 20px 20px;
}
}
.unisexTopMv {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.unisexTopMv__txtBox {
position: relative;
width: 100%;
background: url(../../item/unisex/img/img_unisex_mvbg.jpg) no-repeat;
background-size: cover;
/* height: 95vh;*/
padding: 400px 0;
background-position: center;
}
.unisexTopMv__txtBox_21ss {
position: relative;
width: 100%;
background: url(../../item/unisex/img/21fw-unisex_umbrella_head.jpg) no-repeat;
background-size: cover;
/* height: 95vh;*/
padding: 400px 0;
background-position: center;
}
.unisexTopMv {
transition: 0.4s;
}
.unisexTopMv:hover {
opacity: 0.7;
}
.unisexTopMv__txtBox a {
opacity: 0.7;
}
.unisexTopMv__txtBoxInner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.8);
max-width: 555px;
width: 100%;
padding: 53px 20px;
}
.unisexTopMv__txtBoxInnerHead01 {
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 38px;
text-align: center;
line-height: 1;
color: #000;
}
.unisexTopMv__txtBoxInnerTxt {
font-size: 14px;
text-align: center;
margin-top: 20px;
line-height: 2;
color: #000;
}
.unisexWideGarellyBox {
max-width: 1000px;
margin: 60px auto 0;
width: 100%;
border: 1px solid #acbac1;
padding: 10px;
}
.unisexWideGarellyBox__photo {
width: 65%;
margin: 0 auto 0 0;
}
@media screen and (max-width: 480px) {
.unisexWideGarellyBox__photo {
width: 100%;
}
}
.unisexWideGarellyBox__photo a {
transition: 0.4s;
}
.unisexWideGarellyBox__photo a:hover {
opacity: 0.7;
}
.unisexWideGarellyTxtBox {
width: 45%;
margin: 20px 0 0 auto;
}
@media screen and (max-width: 480px) {
.unisexWideGarellyTxtBox {
width: 100%;
}
}
.unisexWideGarellyTxtBox__txt {
margin-top: 20px;
font-size: 14px;
line-height: 2;
}
.unisexGarellyBox {
border: 1px solid #acbac1;
}
.unisexGarellyBoxFltBoxTitle01 {
max-width: 320px;
width: 100%;
}
@media screen and (max-width: 480px) {
.unisexGarellyBoxFltBoxTitle01 {
max-width: 230px;
}
}
.unisexGarellyBoxFltBoxTitle01_21ss {
max-width: 500px;
width: 100%;
}
@media screen and (max-width: 480px) {
.unisexGarellyBoxFltBoxTitle01_21ss {
max-width: 230px;
}
}
.unisexGarellyBoxFltBoxTitle02 {
max-width: 363px;
width: 100%;
margin: 0 0 0 auto;
}
.unisexGarellyBoxFltBoxTitle02_21ss {
max-width: 500px;
width: 100%;
margin: 0 0 0 auto;
}
.unisexGarellyBoxFltBoxTitle03 {
max-width: 240px;
width: 100%;
margin: 0 auto 0 0;
}
@media screen and (max-width: 480px) {
.unisexGarellyBoxFltBoxTitle03 {
max-width: 204px;
}
}
.unisexGarellyBoxFltBoxTitle03_21ss {
max-width: 500px;
width: 100%;
margin: 0 auto 0 0;
}
@media screen and (max-width: 480px) {
.unisexGarellyBoxFltBoxTitle03_21ss {
max-width: 318px;
}
}
.unisexWideGarellyTxtBox__title {
max-width: 320px;
width: 100%;
}
.unisexGarellyBoxFltBoxTitle04 {
max-width: 370px;
width: 100%;
margin: 0;
}
@media screen and (max-width: 480px) {
.unisexGarellyBoxFltBoxTitle04 {
margin: 0 auto;
max-width: 280px;
}
}
.unisexGarellyBoxFltBoxTitle05 {
max-width: 300px;
margin: 0 0 0 auto;
}
@media screen and (max-width: 480px) {
.unisexGarellyBoxFltBoxTitle05 {
max-width: 223px;
margin: 0 0 0 auto;
}
}
.raingoodsGarellyBoxFltBoxRight {
text-align: right;
}
/*----------------------smiley--------------------*/
.smileyBox {
width: 100%;
}
.smileyTopMv {
max-width: 1200px;
width: 100%;
margin: 0 auto;
position: relative;
height: 90vh;
padding: 100px 20px;
}
@media screen and (max-width: 768px) {
.smileyTopMv {
display: none;
}
}
.smileyTopMv__sp {
display: none;
}
@media screen and (max-width: 768px) {
.smileyTopMv__sp {
display: block;
width: 100%;
padding: 60px 0;
}
}
.smileyTopMv__sp__txt {
display: none;
}
@media screen and (max-width: 768px) {
.smileyTopMv__sp__txt {
font-size: 14px;
text-align: center;
display: block;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
line-height: 2;
padding: 0 40px;
}
.smileyTopMv__sp__txt span {
font-size: 22px;
display: block;
font-weight: 600;
margin-bottom: 15px;
}
}
.smileyTopMv__txtBox {
position: absolute;
left: 15%;
bottom: 18%;
z-index: 4;
}
.smileyTopMv__title {
font-size: 26px;
text-align: left;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
}
.smileyTopMv__txt {
font-size: 16px;
text-align: left;
line-height: 2;
margin-top: 10px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 100;
}
.smileyTopMv__photoBox01 {
position: absolute;
right: 0;
top: 50%;
max-width: 600px;
width: 100%;
transform: translateY(-50%);
background: #fff;
}
.smileyTopMv__photoBox01 a {
transition: 0.4s;
}
.smileyTopMv__photoBox01 a:hover {
opacity: 0.7;
}
.smileyTopMv__photoBox02 {
position: absolute;
top: 14%;
left: 49%;
max-width: 100px;
width: 100%;
transform: translateX(-50%);
}
.smileyTopMv__photoBox03 {
position: absolute;
left: 0;
max-width: 150px;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.smileyGarellyBox {
padding: 0 20px;
background: #fff;
}
.smileyGarellyBox01 {
max-width: 800px;
width: 100%;
margin: 0 auto;
position: relative;
background: #fff;
}
@media screen and (max-width: 768px) {
.smileyGarellyBox01 {
margin-top: 30px;
}
}
.smileyGarellyBox01 a {
transition: 0.4s;
}
.smileyGarellyBox01 a:hover {
opacity: 0.7;
background: #fff;
}
.smileyGarellyBox01__txtBox {
background: #fff;
padding: 35px;
text-align: center;
position: absolute;
left: 67px;
bottom: 44px;
}
@media screen and (max-width: 480px) {
.smileyGarellyBox01__txtBox {
position: initial;
padding: 20px;
}
}
.smileyGarellyBox01__head02 {
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
font-size: 22px;
}
.smileyGarellyBox01__txt {
margin-top: 10px;
line-height: 2;
font-size: 14px;
}
.smileyGarellyBoxWide {
max-width: 1000px;
width: 100%;
margin: 70px auto 0;
}
@media screen and (max-width: 480px) {
.smileyGarellyBoxWide {
margin: 20px auto 0;
}
}
.smileyGarellyBoxWide {
background: #fff;
}
.smileyGarellyBoxWide a {
transition: 0.4s;
}
.smileyGarellyBoxWide a:hover {
opacity: 0.7;
}
.smileyGarellyBox02 {
max-width: 800px;
width: 100%;
margin: 74px auto 0;
}
@media screen and (max-width: 480px) {
.smileyGarellyBox02 {
margin: 30px auto 0;
}
}
.smileyGarelly02__fltBox {
display: flex;
margin: 0 -23px;
}
@media screen and (max-width: 480px) {
.smileyGarelly02__fltBox {
display: block;
margin: 0;
}
}
.smileyGarelly02__fltBox__L {
width: 60%;
}
@media screen and (max-width: 480px) {
.smileyGarelly02__fltBox__L {
width: 100%;
}
}
.smileyGarelly02__fltBox__L {
background: #fff;
}
.smileyGarelly02__fltBox__L a {
transition: 0.4s;
}
.smileyGarelly02__fltBox__L a:hover {
opacity: 0.7;
}
.smileyGarelly02__fltBox__R {
width: 100%;
max-width: 300px;
position: relative;
width: 40%;
}
@media screen and (max-width: 480px) {
.smileyGarelly02__fltBox__R {
width: 100%;
max-width: 600px;
position: relative;
}
}
.smileyGarelly02__fltBox__L,
.smileyGarelly02__fltBox__R {
padding: 0 23px;
}
@media screen and (max-width: 480px) {
.smileyGarelly02__fltBox__L,
.smileyGarelly02__fltBox__R {
padding: 0;
}
}
.smileyGarelly02__fltBox__RInner {
position: absolute;
bottom: 0;
background: #fff;
}
@media screen and (max-width: 480px) {
.smileyGarelly02__fltBox__RInner {
position: relative;
bottom: 0;
display: flex;
width: 100%;
margin-top: 20px;
}
}
@media screen and (max-width: 480px) {
.smileyGarelly02__fltBox__RInner img {
padding: 0;
-o-object-fit: contain;
object-fit: contain;
}
}
.smileyGarelly02__fltBox__RInner a {
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.smileyGarelly02__fltBox__RInner a {
width: 50%;
}
}
.smileyGarelly02__fltBox__RInner a:hover {
opacity: 0.7;
}
.smileyGarelly02__fltBox__RTxt {
margin-top: 20px;
font-size: 14px;
}
@media screen and (max-width: 480px) {
.smileyGarelly02__fltBox__RTxt {
width: 50%;
padding: 0 10px;
display: flex;
justify-content: center;
align-items: center;
line-height: 2;
margin-top: 0;
font-size: 12px;
}
}
area {
cursor: pointer;
}
.umbrellaTopMv__photo img {
width: 100%;
}
/* ----------------- ライセンスページ共通 ----------------- */
.brand_top_hero{
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 150px 20px 0px;
text-align: center;
}
@media screen and (max-width: 480px) {
.brand_top_hero{
padding: 70px 0px 0px 0px;
}
}
.brand_top_hero p{
margin-top: 70px;
line-height: 2;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.brand_top_hero p{
margin: 40px 20px 10px 20px;
text-align: left;
line-height: 1.7;
}
}
.btn_roundMiddle{
margin-bottom: 60px;
}
/* ----------------- HERO ----------------- */
.hero .hero-img {
width: 100%;
}
/* ----------------- TOPICS SLIDE ----------------- */
.topics-slide {
width: 100%;
}
.topics-slide .topics-slide-img {
width: 100%;
}
.topics-slide .swiper-pagination {
mix-blend-mode: exclusion;
}
.topics-slide .swiper-pagination .swiper-pagination-bullet {
background-color: #fff;
opacity: 0.5;
}
.topics-slide .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.topics-slide .swiper-button-white {
mix-blend-mode: exclusion;
}
/* ----------------- UMBRELLA HEROES ----------------- */
.umbrella-heroes {
display: grid;
grid-template-columns: repeat(3, 1fr);
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
margin-top: 5rem;
}
.umbrella-heroes .umbrella-hero-item > a {
display: block;
}
.umbrella-heroes .umbrella-hero-item-img {
width: 100%;
}
.umbrella-gallery-item {
border: 1px solid #000;
overflow: hidden;
}
/* ----------------- Footer logo list ----------------- */
.footeInner {
max-width: unset;
}
.footerInnerR__list {
font-size: 1rem;
color: white;
}
@media (min-width: 768px) {
.footerInnerR__list {
font-size: 1.5rem;
}
}
@media (min-width: 768px) {
.footerInnerR__list {
font-size: 2rem;
}
}
.footerInnerR__list li {
}
.footerInnerR__list li a {
display: inline-block;
}
.footerInnerR__list li .fa-stack .fa-circle {
color: transparent;
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.footerInnerR__list li .fa-stack .fa-inverse {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.footerInnerR__list li .fa-stack:hover .fa-circle {
color: white;
}
.footerInnerR__list li .fa-stack:hover .fa-inverse {
color: black;
}
.footerInner__L {
display: flex;
align-items: center;
height: 8rem;
}
.footerInner__L .footerInnerL__footerLogo {
width: 25rem;
height: auto;
}
@media screen and (max-width: 768px) {
.footerInner__L .footerInnerL__footerLogo {
margin: auto;
}
}
/* ----------------- STORE LIST MAPS ----------------- */
.store-list-maps {
padding: 80px 20px 0px;
position: relative;
z-index: 10;
display: -ms-grid;
display: grid;
-ms-grid-columns: minmax(0, 1fr);
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 2.25rem;
}
.store-list-maps #map {
width: 100%;
padding-top: 56.25%;
}
/*心斎橋パルコMAPと他店のベース*/
.store-list-maps__info {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
@media (min-width: 768px) {
.store-list-maps {
-ms-grid-columns: (minmax(0, 1fr)) [12];
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.store-list-maps #map {
-ms-grid-column-span: 7;
grid-column: span 7 / span 7;
}
.store-list-maps__info {
-ms-grid-column-span: 5;
grid-column: span 5 / span 5;
}
}
.store-list-maps__info__title {
font-size: 1.75rem;
font-weight: bold;
}
.store-list-maps__info__title + * {
margin-top: 1.25rem;
}
.store-list-maps__info p + p {
margin-top: 1rem;
}
/* ----------------- youtubeをトピックス内に埋め込む時のclass ----------------- */
.youtube {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 60px;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
/* ----------------- 直営店舗紹介ページ ----------------- */
/*心斎橋パルコショップページ*/
.shopBoxTop_hero{
height: 700px;
width: 100%;
background-image: url(https://wpc-worldparty.jp/wp-content/themes/wpc/shop/shinsaibashi/img/xshinsaibashi_p_main_23ss.jpg.pagespeed.ic.Se2OR_gEIf.jpg);
background-position: bottom;
background-size: cover;
}
@media screen and (max-width: 480px){
.shopBoxTop_hero {
height: 250px;
}
}
@media screen and (min-width: 480px) and (max-width: 980px){
.shopBoxTop_hero {
height: 450px;
}
}
/*ルクア1100ショップページ*/
.shopBoxTop_hero_lucua1100 {
height: 700px;
width: 100%;
background-image: url(https://wpc-worldparty.jp/wp-content/themes/wpc/shop/lucua1100/img/lucua1100_o_main.jpg);
background-position: bottom;
background-size: cover;
}
@media screen and (max-width: 480px){
.shopBoxTop_hero_lucua1100 {
height: 250px;
}
}
@media screen and (min-width: 480px) and (max-width: 980px){
.shopBoxTop_hero_lucua1100 {
height: 450px;
}
}
/*エチカフィットショップページ*/
.shopBoxTop_hero_echikafit {
height: 700px;
width: 100%;
background-image: url(https://wpc-worldparty.jp/wp-content/themes/wpc/shop/echikafit_ginza/img/echikafit_ginza_main.jpg);
background-position: bottom;
background-size: cover;
}
@media screen and (max-width: 480px){
.shopBoxTop_hero_echikafit {
height: 250px;
}
}
@media screen and (min-width: 480px) and (max-width: 980px){
.shopBoxTop_hero_echikafit {
height: 450px;
}
}
.shopBox {
max-width: 1000px;
margin: 60px auto 30px auto;
}
@media screen and (max-width: 480px){
.shopBox {
margin: 30px 25px;
}
}
@media screen and (min-width: 480px) and (max-width: 980px){
.shopBox {
margin: 0px auto 50px auto;
}
}
.shopBox .youtube{
max-width: 980px;
margin: 0px auto 10px auto;
}
@media screen and (max-width: 480px){
.shopBox .youtube {
width: auto;
margin-bottom: 10px;
}
}
@media screen and (min-width: 480px) and (max-width: 980px){
.shopBox .youtube {
width: auto;
margin: 10px 20px;
}
}
.shopBox__photo ul{
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 480px){
.shopBox__photo ul{
display:block;
}
}
@media screen and (min-width: 480px) and (max-width: 980px){
.shopBox__photo ul {
margin: 0 10px;
}
}
.shopBox__photo li{
width: 48%;
margin: 10px;
padding: 0;
}
@media screen and (max-width: 480px){
.shopBox__photo li {
width:auto;
margin: 10px 0px;
}
}
@media screen and (min-width: 480px) and (max-width: 980px){
.shopBox__photo li {
width: 47.3%;
margin: 10px;
padding: 0;
}
}
.shopBox-sns,.shopBox-map{
max-width: 980px;
margin: 0px auto 30px auto;
}
@media screen and (min-width: 480px) and (max-width: 980px){
.shopBox-sns,.shopBox-map {
max-width: 980px;
margin: 0px 20px 30px 20px;
}
}
.shopBox h2{
color: white;
background-color: black;
text-align: center;
margin-top: 50px;
font-weight: bold;
font-size: 2.2rem;
font-family: futura-pt, sans-serif;
}
/*ここからショップボックス2*/
.shopBox2 {
max-width: 1000px;
margin: 60px auto 90px auto;
}
@media screen and (max-width: 480px){
.shopBox2 {
margin: 30px 25px;
}
}
@media screen and (min-width: 480px) and (max-width:1000px){
.shopBox2 {
margin: 0px auto 20px auto;
}
}
.shopBox2 h2{
color: white;
background-color: black;
text-align: center;
margin-top: 20px;
font-weight: bold;
font-size: 2.2rem;
font-family: futura-pt, sans-serif;
}
.shopBox2-sns,.shopBox-map{
max-width: 1000px;
margin: 0px auto 30px auto;
}
@media screen and (min-width: 480px) and (max-width: 1000px){
.shopBox2-sns,.shopBox-map {
max-width: 1000px;
margin: 0px 20px 30px 20px;
}
}
/*心斎橋パルコインスタと他店用のベースcss*/
.shopBox-sns__ig{
display: flex;
justify-content: center;
align-items: center;
overflow-wrap:break-word;
}
@media screen and (max-width: 480px){
.shopBox-sns__ig {
display: block;
}
}
.shopBox-sns__ig img{
width: 220px;
margin: 20px 60px 0 20px;
}
@media screen and (max-width: 480px){
.shopBox-sns__ig img{
display: block;
margin: 30px auto 25px auto;
}
}
.shopBox .shopBox__bold{
font-weight: bold;
font-size:1.6rem;
}
.shopBox-sns__ig .shopBox__bold{
margin-bottom: 20px;
}
/*ルクア1100インスタ*/
.shopBox-sns__ig lucua1100 {
display: flex;
justify-content: center;
align-items: center;
overflow-wrap:break-word;
}
@media screen and (min-width: 480px) and (max-width: 980px){
.shopBox-sns__text{
margin: 0 10px 0 40px;
}
}
.shopBox-map__info{
margin: 10px 15px 0 0;
}
@media screen and (max-width: 480px){
.shopBox-map__info{
margin: 0;
}
}
.shopBox-map__wrapper {
display: flex;
flex-wrap: wrap;
}
.googleMap {
height: 0;
width: 550px;
overflow: hidden;
padding-bottom: 40%;
margin-top: 25px;
position: relative;
}
@media screen and (max-width: 480px){
.googleMap {
padding-bottom: 90%;
}
}
@media screen and (min-width: 480px) and (max-width: 980px){
.googleMap {
width: 300px;
}
}
.googleMap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
/* ----------------- BLANDページ_Wpc.patterns ----------------- */
.brandBox {
max-width: 1200px;
width: 100%;
margin: -50px auto 128px auto;
padding: 0 55px 0 55px;
}
@media screen and (max-width: 768px){
.brandBox {
padding: 0;
margin-top: 0px;
}
}
.brandBox a{
color:#000;
}
.brandBox a:hover{
opacity: 0.8;
}
.brandTopMv {
max-width: 1200px;
width: 100%;
margin-top: 150px;
text-align: center;
}
@media screen and (max-width: 768px){
.brandTopMv {
margin: 35px auto 0 auto;
}
}
.brandTitle__patterns{
background-image: url(../../brand/patterns/img/patterns_hero.jpg);
background-size: cover;
height: 450px;
width: 100% !important;
}
@media screen and (max-width: 768px){
.brandTitle__patterns{
height: 200px;
}
}
/*パターンズテスト*/
}
.brandBox__item__Title{
background-image: url(../../brand/patterns/img/patterns_hero.jpg);
background-size: cover;
height: 450px;
}
.brandTitle__patterns23ss{
background-image: url(../../brand/patterns/img/patterns_hero23ss.jpg);
background-size: cover;
/**/height: 500px;
width: 100%;
}
@media screen and (max-width: 768px){
.brandTitle__patterns23ss{
/*height: 160px;*/
width: 100%;
}
}
@media screen and (max-width: 415px){
.brandTitle__patterns23ss {
/*height: 100px;*/
width: 100%;
}
}
/*
.brandTitle__patterns23ss {
position: relative;
height: 400px;
}
@media screen and (max-width: 1024px){
.brandTitle__patterns23ss {
height: 400px;
}
}
@media screen and (max-width: 600px){
.brandTitle__patterns23ss {
height: 230px;
}
}
@media screen and (max-width: 412px){
.brandTitle__patterns23ss {
height: 190px;
}
}
@media screen and (max-width: 320px){
.brandTitle__patterns23ss {
height: 120px;
}
}*/
.brandTitle__text .logo{
margin: 55px auto 40px auto;
width: 58%
}
@media screen and (max-width: 768px){
.brandTitle__text .logo {
margin: 30px auto 40px auto;
width: 100%
}
}
.brandTitle__text {
text-align: center;
margin-top: 30px;
font-size: 17px;
}
@media screen and (max-width: 768px){
.brandTitle__text {
text-align:left;
margin: 30px 33px 0px 33px;
}
}
.brandTitle__text_en {
margin: 20px 0 50px 0;
font-size: 14px;
position: relative;
}
.brandTitle__text_en:after {
content: "";
width: 1px;
height: 60px;
background-color: #808080;
display: block;
position: absolute;
left: 50%;
top:230px;/*230px*/
}
@media screen and (max-width: 768px){
.brandTitle__text_en:after {
height: 50px;
}
}
/*テスト中*/
.brandTitle__text2_en {
margin: 20px 0 30px 0;
font-size: 14px;
position: relative;
}
@media screen and (max-width: 768px){
.brandTitle__text2_en {
margin-bottom: -180px ;
}
}
.brandTitle__text2_en:after {
content: "";
/* width: 1px;
height: 60px;:?
background-color: #808080;
display: block;
position: absolute;
left: 50%;
top:230px;/*230px*/
}
@media screen and (max-width: 768px){
.brandTitle__text2_en:after {
height: 50px;
}
}
.margin_top_minus {
margin-top: -200px;
}
@media screen and (max-width: 768px){
.margin_top_minus {
margin-top: -150px;
}
}
.brandTopMv .btn_square a {
padding: 24px 55px;
font-size: 18px;
font-family: futura-pt-bold, sans-serif;
font-weight: 700;
background-color: #000;
color: #fff;
}
@media screen and (max-width: 768px){
.brandTopMv .btn_square a {
padding: 23px 30px;
font-size: 16px;
}
}
.btn_square .pt_in_icon{
font-size: 36px;
vertical-align: middle;
}
.brandTopMv .btn_square{
text-align: center;
margin:80px 0 250px 0;
}
@media screen and (max-width: 768px){
.brandTopMv .btn_square{
margin-bottom: 200px;
}
}
.brandBox__container{
margin: 50px 50px 125px 50px;
font-size: 21px;
line-height: 1.8;
text-align: center;
position:relative;
}
@media screen and (max-width: 768px){
.brandBox__container{
margin: 40px 33px 60px 33px;
text-align: left;
}
}
.brandBox__container .btn_square a {
padding: 17px 35px;
font-size: 16px;
font-family: futura-pt-bold, sans-serif;
font-weight: 700;
background-color: #000;
color: #fff;
}
@media screen and (max-width: 768px){
.brandBox__container .btn_square a {
padding: 15px 30px;
font-size: 14px;
}
}
.brandBox__container .btn_square{
margin-top: 60px;
text-align: center;
}
@media screen and (max-width: 768px){
.brandBox__container .btn_square{
margin: 50px 0 80px 0;
}
}
.brandBox__container03{
margin: 150px 50px 0px 50px;
}
.brandBox__container h3{
font-size: 23px;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: normal;
padding-bottom: 20px;
letter-spacing: 1pt;
}
@media screen and (max-width: 768px){
.brandBox__container h3{
font-size: 25px;
}
}
.brandBox__container03 h3{
font-size: 45px;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: normal;
text-align: center;
padding-bottom: 65px;
letter-spacing: 1pt;
}
@media screen and (max-width: 768px){
.brandBox__container03 h3{
font-size: 35px;
padding: 15px 0 25px 0;
}
}
.brandBox__photo ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 70px;
}
.brandBox__photo li{
width: 20%;
margin: 0 25px 30px 25px;
}
@media screen and (max-width: 768px){
.brandBox__photo li{
width: 40%;
margin: 10px 13px 0 13px;
}
}
.brandBox__photo li p{
text-align: center;
margin: 18px 0;
font-family: futura-pt, sans-serif;
font-size: 16px;
}
/* ここからスライダー */
@keyframes display06 {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.slide_patterns01 {
position: relative;
height: 730px;
}
@media screen and (max-width: 1024px){
.slide_patterns01 {
height: 600px;
}
}
@media screen and (max-width: 768px){
.slide_patterns01 {
height: 510px;
}
}
@media screen and (max-width: 600px){
.slide_patterns01 {
height: 390px;
}
}
@media screen and (max-width: 415px){
.slide_patterns01 {
height: 250px;
}
}
@media screen and (max-width: 320px){
.slide_patterns01 {
height: 220px;
}
}
.slide_patterns01 > img {
position: absolute;
top: 0;
opacity: 0;
animation: display06 30s infinite;
}
.slide_patterns01 img:nth-child(2) {
animation-delay: 5s;
}
.slide_patterns01 img:nth-child(3) {
animation-delay: 10s;
}
.slide_patterns01 img:nth-child(4) {
animation-delay: 15s;
}
.slide_patterns01 img:nth-child(5) {
animation-delay: 20s;
}
.slide_patterns01 img:nth-child(6) {
animation-delay: 25s;
}
/* ここまでスライダー */
.brandTitle__midashi {
font-size: 20px ;
font-weight: 700;
font-family: futura-pt, sans-serif;
margin-top: 50px;
line-height: 1.2;
}
@media screen and (max-width: 768px){
.brandTitle__midashi {
font-size: 16px ;
}
}
.brandTitle__midashi2 {
font-size: 20px ;
font-weight: 700;
font-family: futura-pt, sans-serif;
margin-top: 50px;
line-height: 1.8;
margin-bottom: -35px ;
}
@media screen and (max-width: 768px){
.brandTitle__midashi2 {
font-size: 16px ;
margin-top: 50px ;
margin-bottom: -50px ;
}
}
/*飛行犬2025*/
.brandTitle__midashi3 {
font-size: 20px ;
font-weight: 700;
font-family: futura-pt, sans-serif;
margin-top: 50px;
line-height: 1.8;
margin-bottom: -95px ;
}
@media screen and (max-width: 768px){
.brandTitle__midashi3 {
font-size: 16px ;
margin-top: 50px ;
margin-bottom: -50px ;
}
}
/* ----------------- BLANDページ_Wpc.patterns テキスタイル詳細ページ ----------------- */
.textiles_Title{
font-size: 35px;
font-family: futura-pt, sans-serif;
font-weight: normal;
margin: 20px 0;
}
.textiles_Sub{
font-size: 24px;
font-family: futura-pt, sans-serif;
font-style: normal;
text-align: center;
padding: 11px 41px;
letter-spacing: 1pt;
color: #fff;
background-color: #000;
}
.brandTitle__text02{
text-align: center;
margin-bottom: 40px;
}
@media screen and (max-width: 768px){
.brandTitle__text02{
text-align: left;
margin: 70px 33px 25px 33px;
}
}
.brandTitle__text03{
text-align: center;
font-size: 17px;
line-height: 1.8;
margin-top: 50px
}
@media screen and (max-width: 768px){
.brandTitle__text03{
text-align: left;
margin: 5px 33px 0 33px;
}
}
.brandBox__container03 .brandBox__photo li p{
font-size: 16px;
}
@media screen and (max-width: 768px){
.brandBox__container03 .brandBox__photo li p{
font-size: 14px;
}
}
.brandBox__photo_sub ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 60px 0 -50px 0;
}
@media screen and (max-width: 768px){
.brandBox__photo_sub ul{
margin: 40px 0 -50px 0;
}
}
.brandBox__photo_sub li{
width: 8%;
margin: 0 10px 30px 10px;
}
@media screen and (max-width: 768px){
.brandBox__photo_sub li{
width: 20%;
margin: 10px 6px 0 6px;
}
}
.brandBox__container03 .brandBox__photo li{
width: 17%;
margin: 0 25px 25px 25px;
}
@media screen and (max-width: 768px){
.brandBox__container03 .brandBox__photo li{
width: 40%;
margin: 10px 13px 0 13px;
}
}
@media screen and (max-width: 768px){
.brandBox__container03 .brandBox__photo ul{
margin-top: 30px;
}
}
@media screen and (max-width: 768px){
.brandBox__container03{
margin: 130px 30px 50px 30px;
}
}
/* ここからスライダー 3枚の場合*/
@keyframes display03 {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
33.3% {
opacity: 1;
}
38% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.slide_patterns03 {
position: relative;
height: 610px;
}
@media screen and (max-width: 768px){
.slide_patterns03 {
height: 435px;
}
}
.slide_patterns03 > img {
position: absolute;
left: 0;
right: 0;
margin: auto;
opacity: 0;
animation: display03 15s infinite;
}
.slide_patterns03 img:nth-child(2) {
animation-delay: 5s;
}
.slide_patterns03 img:nth-child(3) {
animation-delay: 10s;
}
/* ここからスライダー 2枚の場合*/
@keyframes display02 {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.slide_patterns02 {
position: relative;
height: 610px;
}
@media screen and (max-width: 768px){
.slide_patterns02 {
height: 435px;
}
}
.slide_patterns02 > img {
position: absolute;
left: 0;
right: 0;
margin: auto;
opacity: 0;
animation: display02 10s infinite;
}
.slide_patterns02 img:nth-child(2) {
animation-delay: 5s;
}
/* ここからスライダー 1枚の場合*/
@media screen and (max-width: 768px){
.slide_patterns00 {
height: 435px;
}
}
/* ここまでスライダー */
/* ----------------- ここからsinca ----------------- */
/*
.sinca__background { background-color: transparent; }
.sinca__background {
background-color: #5A564D;
color: rgb(255,255,204);
}
.sinca__background {
background-color: #5a564d;
color: #FFFFFF;
}
*/
/*文字サイズ調整
元データbrandBox__container*/
.sinca__background{
margin: 50px 0px 125px 0px;
font-family: Serif;
/*元は左右50px*/
font-size: 18px;
line-height: 1.8;
text-align: center;
}
@media screen and (max-width: 768px){
.sinca__background{
margin: 40px 20px 60px 20px;
font-family: Serif;
/*元は左右33px*/
text-align: left;
}
}
/*見出し*/
.brandBox__container_Serif {
font-family: 'Poppins', Serif;
font-size: 19px;
}
/*最初の見出し
.sinca_title {
max-width: 1200px;
width: 100%;
margin: 0 auto 128px auto;
padding: 0 55px 0 55px;
}
@media screen and (max-width: 768px){
.sinca_title p {
padding: 0;
}
}
.sinca_title p{
color:#000;
}
.sinca_title p:hover{
opacity: 0.8;
}
*/
.sinca_title{
font-family: Serif;
font-weight: 600;
font-style: normal;
padding: 20px 10px;
font-size: 27px ;
}
@media screen and (max-width: 768px){
.sinca_title{
font-size: 24px;
margin : 0px -20px;
padding: 10px 20px;
}
}
/* ボタン記述 */
.sinca__background .btn_square a {
padding: 17px 35px;
font-size: 16px;
font-family: futura-pt-bold, sans-serif;
font-weight: 700;
background-color: #000;
color: #fff;
}
@media screen and (max-width: 768px){
.sinca__background .btn_square a {
padding: 15px 30px;
font-size: 14px;
}
}
.sinca__background .btn_square{
margin-top: 60px;
text-align: center;
}
@media screen and (max-width: 768px){
.sinca__background .btn_square{
margin: 50px 0 20px 0;
}
}
.sinca__background03{
margin: 150px 0px 0px 0px;
}
.sinca__background h3{
font-size: 23px;
font-family: Serif;
font-weight: 600;
font-style: normal;
padding: 20px 10px;
letter-spacing: 1pt;
background-color: #5A564D;
color: #ffffff;
}
@media screen and (max-width: 768px){
.sinca__background h3{
font-size: 20px;
margin : 0px -20px;
padding: 10px 20px;
}
}
.sinca__background h4{
font-size: 23px;
font-family: Serif;
font-weight: 600;
font-style: normal;
padding: 10px 10px;
letter-spacing: 1pt;
border: 1px solid #5A564D;
color: #5A564D;
}
@media screen and (max-width: 768px){
.sinca__background h4{
font-size: 20px;
text-align: center;
}
}
/*写真2つ並び*/
.sincaGarellyBox {
max-width: 1000px;
width: 100%;
margin: 30px auto 0;
background: #fff;
padding: 10px;
position: relative;
}
.sincaGarellyBoxInner {
border: 1px solid #c6cfdf;
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
@media screen and (max-width: 480px) {
.sincaGarellyBoxInner {
padding: 50px 20px;
margin-right: 0;
margin-bottom: 0;
}
}
.head02__sincaGarelly {
font-size: 30px;
text-align: left;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.head02__sincaGarelly {
font-size: 20px;
}
}
.txt__sincaGarelly {
text-align: left;
font-size: 14px;
line-height: 2;
margin-top: 20px;
}
.sincaGarelly__fltBox {
display: flex;
margin-top: -10px;
}
@media screen and (max-width: 480px) {
.sincaGarelly__fltBox {
display: block;
margin-top: -30px;
width: 100%;
}
}
.sincaGarelly__fltBoxPhoto {
width: 50%;
}
.sincaGarelly__fltBoxPhoto a {
transition: 0.4s;
}
.sincaGarelly__fltBoxPhoto a:hover {
opacity: 0.7;
}
.sincaGarelly__fltBoxPhoto img {
width: 100%;
}
@media screen and (max-width: 480px) {
.sincaGarelly__fltBoxPhoto {
width: 100%;
}
}
.sincaGarelly__fltBoxTxt {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
text-align: center;
}
@media screen and (max-width: 480px) {
.sincaGarelly__fltBoxTxt {
width: 112%;
display: block;
text-align: center;
margin: -10px -20px;
}
}
/*
.sincaGarelly__fltBoxTxt p{
font-size: 16px;
font-family: futura-pt, serif;
font-weight: 600;
text-align: left;
margin-left: 20px;
}
@media screen and (max-width: 480px) {
.sincaGarelly__fltBoxTxt p{
margin-left: 0;
margin:0px -20px;
}
}*/
/*sincaスライダー*/
.brandBox__item__Title{
background-image: url(../../brand/patterns/img/patterns_hero.jpg);
background-size: cover;
height: 450px;
}
/*
@keyframes display01 {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
33.3% {
opacity: 1;
}
38% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.slide_sinca01 {
position: relative;
height: 730px;
}
@media screen and (max-width: 1024px){
.slide_sinca01 {
height: 600px;
}
}
@media screen and (max-width: 768px){
.slide_sinca01 {
height: 510px;
}
}
@media screen and (max-width: 600px){
.slide_sinca01 {
height: 390px;
}
}
@media screen and (max-width: 415px){
.slide_sinca01 {
height: 250px;
}
}
@media screen and (max-width: 320px){
.slide_sinca01 {
height: 220px;
}
}
.slide_sinca01 > img {
position: absolute;
top: 0;
opacity: 0;
animation: display06 30s infinite;
}
.slide_sinca01 img:nth-child(2) {
animation-delay: 5s;
}
.slide_sinca01 img:nth-child(3) {
animation-delay: 10s;
}
.slide_sinca01 img:nth-child(4) {
animation-delay: 15s;
}
.slide_sinca01 img:nth-child(5) {
animation-delay: 20s;
}
.slide_sinca01 img:nth-child(6) {
animation-delay: 25s;
}
*/
.slide_sinca01 {
position: relative ;
height: 730px;
left:-50%;
}
@media screen and (max-width: 1024px){
.slide_sinca01 {
height: 600px;
left:-50%
}
}
@media screen and (max-width: 768px){
.slide_sinca01 {
height: 510px;
left:-50%
}
}
@media screen and (max-width: 600px){
.slide_sinca01 {
height: 390px;
left:50%;
}
}
@media screen and (max-width: 415px){
.slide_sinca01 {
height: 250px;
left:0%;
}
}
@media screen and (max-width: 320px){
.slide_sinca01 {
height: 220px;
left:0%;
}
}
.slide_sinca01 > img {
position: absolute;
top: 0;
opacity: 0;
animation: display06 30s infinite;
/**/
top: 50%;
transform: translate(0, -50%);
}
.slide_sinca01 img:nth-child(2) {
animation-delay: 5s;
}
.slide_sinca01 img:nth-child(3) {
animation-delay: 10s;
}
.slide_sinca01 img:nth-child(4) {
animation-delay: 15s;
}
.slide_sinca01 img:nth-child(5) {
animation-delay: 20s;
}
.slide_sinca01 img:nth-child(6) {
animation-delay: 25s;
}
/*sincaボタン*/
.btn_round_sinca {
width: 100%;
max-width: 290px;
margin: 88px auto 0;
}
@media screen and (max-width: 768px) {
.btn_round_sinca {
margin: 60px auto 0;
}
}
@media screen and (max-width: 480px) {
.btn_round_sinca {
max-width: 230px;
margin: 40px auto 0;
}
}
.btn_round_sinca a {
display: block;
border: 2px solid #59564d;
height: 100%;
width: 100%;
padding: 20px 0;
position: relative;
border-radius: 50px;
text-align: center;
font-size: 18px;
font-family: serif;
font-weight: 700;
font-style: normal;
font-color: #59564d;
background-color: #fff;
color: #000 !important;
background-size: 200% 100%;
background-image: linear-gradient(
to right,
transparent 50%,
rgba(89, 86, 77, 1) 40%
/*
rgba(255, 255, 75, 1) 50%*/
);
transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
color 0.5s ease 0s, background-color 0.5s ease;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.btn_round_sinca a {
font-size: 16px;
padding: 15px 0;
}
}
.btn_round_sinca a:hover {
background-position: -100% 100%;
letter-spacing: 2px;
}
.btn_round_sinca a::after {
content: "";
background-image: url(../../common/img/img_arrow.svg);
position: absolute;
background-size: contain;
right: 20px;
width: 6px;
height: 11px;
top: 50%;
transform: translateY(-50%);
}
/*透明のボタン*/
.btn_round_transparent {
width: 100%;
max-width: 290px;
margin: 88px auto 0;
background-color: transparent;
}
@media screen and (max-width: 768px) {
.btn_round_transparent {
margin: 60px auto 0;
}
}
@media screen and (max-width: 480px) {
.btn_round_transparent {
max-width: 230px;
margin: 40px auto 0;
}
}
.btn_round_transparent a {
display: block;
border: 2px solid #59564d;
height: 100%;
width: 100%;
padding: 20px 0;
position: relative;
border-radius: 50px;
text-align: center;
font-size: 18px;
font-family: futura-pt-bold, sans-serif;
font-weight: 700;
font-style: normal;
font-color: #59564d;
background-color: transparent;
color: #000 !important;
background-size: 200% 100%;
background-image: linear-gradient(
to right,
transparent 50%,
rgba(89, 86, 77, 1) 40%
/*
rgba(255, 255, 75, 1) 50%*/
);
transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
color 0.5s ease 0s, background-color 0.5s ease;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.btn_round_transparent a {
font-size: 16px;
padding: 15px 0;
}
}
.btn_round_transparent a:hover {
background-position: -100% 100%;
letter-spacing: 2px;
}
.btn_round_transparent a::after {
content: "";
background-image: url(../../common/img/img_arrow.svg);
position: absolute;
background-size: contain;
right: 20px;
width: 6px;
height: 11px;
top: 50%;
transform: translateY(-50%);
}
/*-----------SiNCA25ss-----------*/
.sinca25ss__background{
margin: 30px 0px 70px 0px;
font-family: "Noto Sans JP";
font-weight: 400 ;
/*元は左右50px*/
font-size: 20px;
line-height: 1.8;
text-align: center;
font-weight: 300;
color:#5a564b ;
}
@media screen and (max-width: 768px){
.sinca25ss__background{
margin: 40px 20px 40px 20px;
font-family: "Noto Sans JP";
/*元は左右33px*/
text-align: left;
font-size: 15px;
font-weight: 300 ;
}
}
.sinca25ss_title{
font-family: Serif;
font-weight: 500;
font-style: normal;
padding: 20px 10px;
font-size: 35px ;
margin-bottom : -10px;
line-height: 1.5;
color:#5a564b ;
}
@media screen and (max-width: 768px){
.sinca25ss_title{
font-size: 24px;
font-weight: 500;
line-height: 1.6;
margin : -25px -20px -5px ;
padding: 10px 20px;
}
}
/*本文*/
.sinca25ss__text{
margin: 10px 0px 65px 0px;
font-family: "Noto Sans JP";
/*元は左右50px*/
font-size: 20px;
line-height: 1.8;
text-align: center;
font-weight: 300;
color:#5a564b ;
}
@media screen and (max-width: 768px){
.sinca25ss__text{
margin: 10px 20px 40px 20px;
font-family: "Noto Sans JP";
/*元は左右33px*/
text-align: left;
font-size: 15px;
font-weight: 300 ;
letter-spacing : -0.05px ;
}
}
/*タイトルh5*/
.sinca25ss__text h5{
font-family: Serif;
font-weight: 400;
font-style: normal;
padding: 20px 0px;
font-size: 30px ;
margin-top : -10px;
margin-bottom : -20px;
color : #5a564b ;
}
@media screen and (max-width: 768px){
.sinca25ss__text h5{
font-size: 22px;
line-height: 1.5 ;
margin : -10px 0px -5px;
padding: 10px 0px;
letter-spacing : -0.05px ;
}
}
/*2つ並びテキスト*/
.sinca25ss__textbox{
margin: 5px 10px 20px 20px;
font-family: "Noto Sans JP";
/*元は左右50px*/
font-size: 20px;
line-height: 1.8;
text-align: left;
font-weight: 300;
color:#5a564b ;
align: left;
}
@media screen and (max-width: 768px){
.sinca25ss__textbox{
margin: 20x 20px 25px 20px;
font-family: "Noto Sans JP";
/*元は左右33px*/
text-align: left;
font-size: 15px;
font-weight: 300 ;
line-height: 1.7;
letter-spacing : -0.05px ;
}
}
.sinca25ss__textbox h5{
font-family: Serif;
font-weight: 500 !important;
font-style: normal;
padding: 20px 0px 20px;
font-size: 25px ;
margin-bottom : -10px;
line-height: 1.5 ;
}
@media screen and (max-width: 768px){
.sinca25ss__textbox h5{
font-size: 19px;
margin : 0px 0px -5px;
padding: 10px 0px;
line-height: 1.4 ;
}
}
.sinca25ss__textbox p{
align: left;
text-align: left !important;
}
.sinca25ss_kensa p{
align: left;
text-align: left !important;
}
.sinca25ss_atten p{
font-weight: 300;
font-size: 14px ;
margin-bottom: 30px ;
color: #5a564b ;
}
@media screen and (max-width: 768px){
.sinca25ss_atten p{
font-size: 10px;
margin-bottom: 20px ;
color: #5a564b ;
text-align: left;
}
}
@media screen and (max-width: 768px){
.sinca25ss_attenyohaku {
margin-left: 20px ;
margin-right: 20px ;
color: #5a564b ;
text-align: left;
}
}
/*2つ並び検査注釈*/
.sinca25ssGarelly__fltBox p{
margin: 10px 10px 20px 0px;
font-family: "Noto Sans JP";
/*元は左右50px*/
font-size: 13px;
line-height: 1.8;
text-align: center;
font-weight: 300;
}
@media screen and (max-width: 768px){
.sinca25ssGarelly__fltBox p{
font-family: "Noto Sans JP";
text-align: left;
font-size: 11px;
font-weight: 400 ;
}
}
/*中見出し1つ並び
.sinca25ss_komidashi {
margin: auto 10px auto 10px;
}
@media screen and (max-width: 768px){
.sinca25ss_komidashi p{
margin: auto 20px 0px 20px;
}
}*/
.sinca25ss_komidashi{
margin: 5px 20px 20px 20px;
padding: auto ;
font-family: "Noto Sans JP";
/*元は左右50px*/
font-size: 20px;
line-height: 1.8;
text-align: center;
font-weight: 300;
color:#5a564b ;
}
@media screen and (max-width: 768px){
.sinca25ss_komidashi{
margin: 10px 20px 30px 20px;
font-family: "Noto Sans JP";
/*元は左右33px*/
text-align: left;
font-size: 15px;
font-weight: 300 ;
line-height: 1.7;
}
}
.sinca25ss_komidashi h5{
font-family: Serif;
font-weight: 500;
padding: 20px 0px 15px;
font-size: 25px ;
margin-bottom : -10px;
line-height: 1.5 ;
letter-spacing: -0.05 ;
}
@media screen and (max-width: 768px){
.sinca25ss_komidashi h5{
font-size: 19px;
margin : -5px 0px -5px;
padding: 10px 0px;
line-height: 1.4 ;
font-weight: 500;
}
}
/*newボタン*/
.btn_round_sinca25ss {
width: 100%;
max-width: 290px;
margin: 88px auto 80px;
}
@media screen and (max-width: 768px) {
.btn_round_sinca25ss {
margin: 30px auto 60px;
}
}
@media screen and (max-width: 480px) {
.btn_round_sinca25ss {
max-width: 230px;
margin: 30px auto 60px;
}
}
.btn_round_sinca25ss a {
display: block;
border: 2px solid #5a564b;
height: 100%;
width: 100%;
padding: 20px 0;
position: relative;
border-radius: 50px;
text-align: center;
font-size: 18px;
font-family: serif;
font-weight: 700;
font-style: normal;
font-color: #5a564b;
background-color: #fff;
color: #5a564b !important;
background-size: 200% 100%;
background-image: linear-gradient(
to right,
transparent 50%,
rgba(89, 86, 77, 1) 40%
/*
rgba(255, 255, 75, 1) 50%*/
);
transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
color 0.5s ease 0s, background-color 0.5s ease;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.btn_round_sinca25ss a {
font-size: 16px;
padding: 15px 0;
color: #5a564b;
border: 2px solid #5a564b;
}
}
.btn_round_sinca25ss a:hover {
background-position: -100% 100%;
letter-spacing: 2px;
color: #fff !important;
}
.btn_round_sinca25ss a::after {
content: "";
/*mask-image: url(../../common/img/img_arrow.svg) ;
mask-position: absolute;
mask-size: contain;
background: #5a564b; // 背景色でSVGの色を指定
&--green {
background: green; // 背景色でSVGの色を指定
}
&:hover {
background: red; // 背景色でSVGの色を指定
}*/
/**/background-image: url(../../common/img/img_arrow_5a564b.svg) ;
/*background: #5a564b;*/
position: absolute;
background-size: contain;
right: 20px;
width: 6px;
height: 11px;
top: 50%;
transform: translateY(-50%);
}
/*
*/
/* ボタン記述
.sinca25ss__background .btn_square a {
padding: 17px 35px;
font-size: 16px;
font-family: futura-pt-bold, sans-serif;
font-weight: 700;
background-color: #000;
color: #fff;
}
@media screen and (max-width: 768px){
.sinca25ss__background .btn_square a {
padding: 15px 30px;
font-size: 14px;
}
}
.sinca25ss__background .btn_square{
margin-top: 60px;
text-align: center;
}
@media screen and (max-width: 768px){
.sinca25ss__background .btn_square{
margin: 50px 0 20px 0;
}
}
.sinca25ss__background03{
margin: 150px 0px 0px 0px;
}
.sinca25ss__background h3{
font-size: 23px;
font-family: Serif;
font-weight: 600;
font-style: normal;
padding: 20px 10px;
letter-spacing: 1pt;
background-color: #5A564D;
color: #ffffff;
}
@media screen and (max-width: 768px){
.sinca25ss__background h3{
font-size: 20px;
margin : 0px -20px;
padding: 10px 20px;
}
}
.sinca25ss__background h4{
font-size: 23px;
font-family: Serif;
font-weight: 600;
font-style: normal;
padding: 10px 10px;
letter-spacing: 1pt;
border: 1px solid #5A564D;
color: #5A564D;
}
@media screen and (max-width: 768px){
.sinca25ss__background h4{
font-size: 20px;
text-align: center;
}
}
*/
/*写真2つ並び*/
.sinca25ssGarellyBox {
max-width: 1000px;
width: 100%;
margin: 30px auto 0;
background: #fff;
padding: 10px;
position: relative;
}
.sinca25ssGarellyBoxInner {
border: 1px solid #c6cfdf;
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
@media screen and (max-width: 480px) {
.sinca25ssGarellyBoxInner {
padding: 50px 20px;
margin-right: 0;
margin-bottom: 0;
}
}
.head02__sinca25ssGarelly {
font-size: 30px;
text-align: left;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.head02__sinca25ssGarelly {
font-size: 20px;
}
}
.txt__sinca25ssGarelly {
text-align: left;
font-size: 14px;
line-height: 2;
margin-top: 20px;
}
.sinca25ssGarelly__fltBox {
display: flex;
margin-top: -10px;
}
@media screen and (max-width: 768px) {
.sinca25ssGarelly__fltBox {
display: grid;
margin-top: -30px;
width: 100%;
}
}
@media screen and (max-width: 480px) {
..sinca25ssGarelly__fltBox {
display: grid;
margin-top: -30px;
width: 100%;
}
}
.sinca25ssGarelly__fltBoxPhoto {
width: 49%;
}
@media screen and (max-width: 480px) {
.sinca25ssGarelly__fltBoxPhoto {
width: 100%;
/*
:nth-child(odd) {
padding:0px 10px 15px 0px ;
}*/
/* 順番が偶数の要素
:nth-child(even) {
padding:0px 0px 15px 10px ;
}
*/
}
}
.sinca25ssGarelly__fltBoxwhite {
width: 2%;
}
@media screen and (max-width: 480px) {
.sinca25ssGarelly__fltBoxwhite {
width: 0%;
}
}
.sinca25ssGarelly__fltBoxPhoto a {
transition: 0.4s;
}
.sinca25ssGarelly__fltBoxPhoto a:hover {
opacity: 0.7;
}
.sinca25ssGarelly__fltBoxPhoto img {
width: 100%;
}
.sinca25ssGarelly__fltBoxTxt {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
text-align: center;
}
@media screen and (max-width: 480px) {
.sinca25ssGarelly__fltBoxTxt {
width: 100%;
display: block;
text-align: center;
margin: -10px -20px;
}
}
/*ここまでSiNCA25ss*/
/* ----------------- ここまでsinca ----------------- */
/*-----------gokoh25ss-----------*/
.gokoh25ss__background {
margin: 30px auto 70px ;
font-family: "Noto Sans JP";
font-weight: 400 ;
/*元は左右50px*/
font-size: 22px;
line-height: 2.3;
text-align: center;
font-weight: 300;
color:#fff ;
width: 800px ;
}
@media screen and (max-width: 768px){
.gokoh25ss__background {
width: 96% ;
margin: 40px auto ;
padding : 20px ;
font-family: "Noto Sans JP";
/*元は左右33px*/
text-align: left;
font-size: 17px;
font-weight: 300 ;
line-height: 2.0;
}
}
@media screen and (max-width: 480px){
.gokoh25ss__background {
width: 96% ;
margin: 40px auto ;
padding : 20px ;
font-family: "Noto Sans JP";
/*元は左右33px*/
text-align: left;
font-size: 17px;
font-weight: 300 ;
line-height: 2.0;
}
}
.gokoh25ss_title {
font-family: Serif;
font-weight: 500;
font-style: normal;
padding: 20px 10px;
font-size: 42px ;
margin-bottom : -10px;
line-height: 1.5;
color:#fff ;
}
@media screen and (max-width: 768px){
.gokoh25ss_title {
font-size: 36px;
font-weight: 500;
line-height: 1.6;
margin : -30px 0px 5px -25px ;
padding: 10px 20px;
}
}
@media screen and (max-width: 480px){
.gokoh25ss_title {
font-size: 30px;
font-weight: 500;
line-height: 1.6;
margin : -30px 0px 5px -25px ;
padding: 10px 20px;
}
}
.gokoh25ss_title2{
font-family: sans-Serif;
font-weight: 400;
font-style: normal;
padding: 20px 10px;
font-size: 21px ;
margin : -40px 20px -20px 0;
line-height: 1.5;
color:#fff ;
}
@media screen and (max-width: 768px){
.gokoh25ss_title2{
font-size: 16px;
font-weight: 500;
line-height: 1.6;
margin : -25px -20px -30px -20px;
padding: 10px 20px;
}
}
/*打ち消し線*/
.strikethrough {
text-decoration: line-through;
white-space: nowrap ;
text-decoration-thickness: 1.5px;
}
/*本文*/
.gokoh25ss__text{
/**/margin: -170px auto 65px ;
font-family: "Noto Sans JP";
/*元は左右50px*/
font-size: 20px;
line-height: 2.2;
text-align: center;
font-weight: 300;
color:#fff ;
width: 800px ;
}
@media screen and (max-width: 768px){
.gokoh25ss__text{
margin: -110px auto 40px ;
font-family: "Noto Sans JP";
/*元は左右33px*/
text-align: left;
font-size: 15px;
font-weight: 300 ;
letter-spacing : -0.05px ;
width: 85% ;
}
}
.gokoh25ss__back {
margin: 50px auto 65px ;
}
@media screen and (max-width: 768px){
.gokoh25ss__back {
width : 30% ;
margin: -50px 10px 65px ;
}
}
.gokoh25ss_under {
font-size: 22px ;
/*text-decoration: underline;*/
font-weight: 300 ;
text-decoration-thickness: 1px;
background: linear-gradient(transparent 1.2em, #ffffff calc(1.3em + 1px) , transparent 0);
}
@media screen and (max-width: 768px){
.gokoh25ss_under {
font-size: 16px ;
}
}
/*タイトルh5*/
.gokoh25ss__text h5{
font-family: Serif;
font-weight: 400;
font-style: normal;
padding: 20px 0px;
font-size: 36px ;
margin-top : -10px;
margin-bottom : -20px;
color : #fff ;
}
@media screen and (max-width: 768px){
.gokoh25ss__text h5{
font-size: 26px;
line-height: 1.5 ;
margin : -10px 0px -5px;
padding: 10px 0px;
letter-spacing : -0.05px ;
}
}
.gokoh25ss_br {
margin: 25px ;
}
@media screen and (max-width: 768px){
.gokoh25ss_br {
margin: 10px ;
}
}
/*2つ並びテキスト*/
.gokoh25ss__textbox{
margin: 5px 10px 20px 0px;
font-family: "Noto Sans JP";
/*元は左右50px*/
font-size: 18px;
line-height: 1.8;
text-align: left;
font-weight: 300;
color:#fff ;
align: center;
}
@media screen and (max-width: 768px){
.gokoh25ss__textbox{
width: 100% ;
margin: 20x 20px 25px 20px;
font-family: "Noto Sans JP";
/*元は左右33px*/
text-align: left;
font-size: 13px;
font-weight: 300 ;
line-height: 1.7;
letter-spacing : -0.05px ;
}
}
.gokoh25ss__textbox h5{
font-family: Serif;
font-weight: 500 !important;
font-style: normal;
padding: 20px 0px 20px;
font-size: 25px ;
margin-bottom : -10px;
line-height: 1.5 ;
}
@media screen and (max-width: 768px){
.gokoh25ss__textbox h5{
font-size: 19px;
margin : 0px 0px -5px 0px;
padding: 10px 0px;
line-height: 1.4 ;
}
}
.gokoh25ss__textbox p{
align: left;
text-align: left !important;
}
.gokoh25ss_kensa {
width: 500px ;
align: center ;
font-weight: 300 ;
text-align: center ;
}
.gokoh25ss_kensatop {
align: center;
text-align: left ;
color: #FFFFFF ;
font-weight: 300;
font-size: 14px ;
margin: auto ;
/*margin: 0px auto 0px auto;*/
width: 600px ;
}
@media screen and (max-width: 768px) {
.gokoh25ss_kensatop {
color: #FFFFFF ;
font-weight: 300;
font-size: 12px ;
margin-bottom: 10px ;
margin-top: 20px ;
width: 100% ;
}
}
.gokoh25ss_kensacenter {
text-align: left ;
color: #FFFFFF ;
font-weight: 300;
font-size: 14px ;
/*margin: auto ;*/
margin: auto;
width: 420px ;
}
@media screen and (max-width: 768px) {
.gokoh25ss_kensacenter {
color: #FFFFFF ;
font-weight: 300;
font-size: 12px ;
margin-bottom: 10px ;
margin-top: 20px ;
width: 100% ;
}
}
.gokoh25ss_kensacenter2 {
text-align: center ;
color: #FFFFFF ;
font-weight: 300;
font-size: 14px ;
/*margin: auto ;*/
margin: auto;
width: 300px ;
}
@media screen and (max-width: 768px) {
.gokoh25ss_kensacenter2 {
color: #FFFFFF ;
font-weight: 300;
font-size: 12px ;
margin-bottom: -10px ;
width: 100% ;
text-align: left ;
}
}
.gokoh25ss_kensa p{
align: center;
text-align: left ;
color: #FFFFFF ;
font-weight: 300;
font-size: 14px ;
margin: auto ;
/*margin: 0px auto 0px auto;*/
width: 600px ;
}
@media screen and (max-width: 768px) {
.gokoh25ss_kensa p{
color: #FFFFFF ;
font-weight: 300;
font-size: 12px ;
margin-bottom: 10px ;
margin-top: 20px ;
width: 100% ;
}
}
.gokoh25ss_kensa2 {
align: center;
/*text-align: left ;*/
text-align: left ;
color: #FFFFFF ;
font-weight: 300;
font-size: 14px ;
margin: 0px auto 10px auto;
width: 800px ;
}
@media screen and (max-width: 768px) {
.gokoh25ss_kensa2 {
color: #FFFFFF ;
font-weight: 300;
font-size: 12px ;
margin-bottom: 10px ;
width: 100% ;
}
}
.gokoh25ss_kome {
font-weight: 300;
vertical-align: top; /* 文字の位置調整 */
font-size: 0.7em; /* 文字サイズ調整 */
margin-left: -5px;
}
@media screen and (max-width: 768px) {
.gokoh25ss_kome {
font-size: 0.7em;
vertical-align: top;
}
}
.gokoh25ss_atten{
font-weight: 200;
font-size: 14px ;
margin-bottom: 30px ;
color: #fff ;
}
@media screen and (max-width: 768px){
.gokoh25ss_atten p{
font-size: 10px;
margin-bottom: 20px ;
color: #fff ;
text-align: left;
}
}
@media screen and (max-width: 768px){
.gokoh25ss_attenyohaku {
margin-left: 20px ;
margin-right: 20px ;
color: #fff ;
text-align: left;
}
}
/*2つ並び検査注釈*/
.gokoh25ssGarelly__fltBox p{
margin: 10px 10px 20px 0px;
font-family: "Noto Sans JP";
/*元は左右50px*/
font-size: 13px;
line-height: 1.8;
text-align: center;
font-weight: 300;
}
@media screen and (max-width: 768px){
.gokoh25ssGarelly__fltBox p{
font-family: "Noto Sans JP";
text-align: left;
font-size: 11px;
font-weight: 400 ;
}
}
/*中見出し1つ並び
.sinca25ss_komidashi {
margin: auto 10px auto 10px;
}
@media screen and (max-width: 768px){
.sinca25ss_komidashi p{
margin: auto 20px 0px 20px;
}
}*/
.gokoh25ss_hr {
color: #474849 ;
border: 1px solid #474849 ;
margin : 20px auto 50px ;
}
@media screen and (max-width: 768px){
.gokoh25ss_hr {
color: #474849 ;
border: 1px solid #474849 ;
margin : 10px auto 20px ;
}
}
.gokoh25ss_komidashi{
width: 800px;
margin: 5px auto 20px ;
padding: auto ;
font-family: "Noto Sans JP";
/*元は左右50px*/
font-size: 18px;
line-height: 1.8;
text-align: center;
font-weight: 300;
color:#fff ;
}
@media screen and (max-width: 768px){
.gokoh25ss_komidashi{
width: 85%;
margin: 10px auto 10px ;
padding: auto 10px ;
font-family: "Noto Sans JP";
/*元は左右33px*/
text-align: left;
font-size: 15px;
font-weight: 300 ;
line-height: 2.2;
}
}
@media screen and (max-width: 480px){
.gokoh25ss_komidashi{
width: 85% ;
margin: 10px auto 0px ;
padding: auto 10px ;
font-family: "Noto Sans JP";
/*元は左右33px*/
text-align: left;
font-size: 15px;
font-weight: 300 ;
line-height: 1.7;
}
}
.gokoh25ss_komidashi h5{
font-family: Serif;
font-weight: 500;
padding: 20px 0px 15px;
font-size: 29px ;
margin-bottom : -10px;
line-height: 1.5 ;
letter-spacing: -0.05 ;
}
@media screen and (max-width: 768px){
.gokoh25ss_komidashi h5{
font-size: 20px;
margin : 10px 0px 0px;
padding: 10px 0px;
line-height: 1.4 ;
font-weight: 500;
}
}
.gokoh25ss_komidashi h6{
font-family: sans-Serif;
font-weight: 400;
font-style: normal;
padding: 20px 10px;
font-size: 35px ;
margin : -40px 0px -10px 0;
line-height: 1.5;
color:#fff ;
}
@media screen and (max-width: 768px){
.gokoh25ss_komidashi h6{
font-size: 22px;
font-weight: 500;
line-height: 1.6;
margin : -20px -20px 0px -20px;
padding: 10px 20px;
}
}
/**/
.gokoh25ss_komidashi img{
margin-top : 10px;
}
@media screen and (max-width: 768px){
.gokoh25ss_komidashi img{
margin-top : 10px;
}
}
/*gokohボタン*/
.gokoh25ss__buttun {
width: 300px ;
height: auto ;
margin: auto ;
/*
top: 33%;
left: 35%;*/
top: 38%;
/*これtop: 38%;
left: 43%;*/
/*transform: translate(20%, 30% );*/
display: block;
position: relative; /* 位置指定 */
}
@media screen and (max-width: 768px){
.gokoh25ss__buttun{
width: 50% ;
/*margin: 12% 13% 12% 15% ;*/
/* top: 33%;
left: 25%;*/
top: 37%;
}
}
.gokoh25ss__buttunitem {
width: 280px ;
margin: 10px auto 10px ;
}
@media screen and (max-width: 768px){
.gokoh25ss__buttunitem {
width: 50% ;
/*margin: 20% 20% ;*/
/**/margin: 2% auto 25px;
display: block;
}
}
/*パララックス固定背景テスト*/
.brandBox_gokoh {
/*box-sizing: border-box;*/
color: #FFF;
font-size: 5rem;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: -5% 0% -10%;
position: relative;
flex-direction: column;
}
@media screen and (max-width: 768px){
.brandBox_gokoh {
height: 60vh ;
/**/width: 100% ;
margin: -50% auto -30%;
}
}
.gokoh25ss_parallax {
/*background-attachment: fixed;*/
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 65%;
width: 100% ;
position: relative;
}
@media screen and (max-width: 768px){
.gokoh25ss_parallax {
background-attachment: fixed;
background-position: center;
background-size: 150% auto; /*contain*/
background-repeat: no-repeat;
/*height: 50%;
width: 100% ;*/
height: 60%;
margin: -100px auto ;
}
}
@media screen and (max-width: 480px){
.gokoh25ss_parallax {
background-attachment: fixed;
background-position: center;
background-size: 100% auto ;
background-repeat: no-repeat;
/*height: 50%;
width: 100% ;*/
/*height: 70vh;*/
height: 300px;
margin: -100px auto ;
padding: auto ;
}
}
.gokoh25ss_link {
margin-top: auto ;
margin-bottom: -50px ;
}
@media screen and (max-width: 768px){
.gokoh25ss_link {
margin: -120px auto 0px ;
}
}
/*各背景の画像*/
.gokoh25ss_parallax-img01 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_02.png');
width: 100% ;
height: 400px/*50vh*/ ;
box-sizing: border-box;
/*background-attachment: fixed;*/
background-position: center;
}
@media screen and (max-width: 768px){
.gokoh25ss_parallax-img01 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_02.png');
width: 100% ;
height: 200px ;
/*box-sizing: border-box;*/
/**/
}
}
@media screen and (max-width: 480px){
.gokoh25ss_parallax-img01 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_02.png');
width: 100% ;
height: 200px ;
/*box-sizing: border-box;*/
/*background-size: 300% ;*/
background-size: 180% ;
background-position: center;
padding: auto ;
}
}
.gokoh25ss_parallax-img02 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_11.png');
width: 100% ;
height: 60vh ;
box-sizing:content-box;
/*background-position: center;*/
/*background-attachment: fixed;*/
background-position: 50% 25%;
background-size: cover;
}
@media screen and (max-width: 768px){
.gokoh25ss_parallax-img02 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_11.png');
width: auto ;
height: 200px ;
/*box-sizing: border-box;*/
/**/
margin-top: -60px;
background-position: 50% 25%;
}
}
@media screen and (max-width: 480px){
.gokoh25ss_parallax-img02 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_11.png');
width: auto ;
height: 200px ;
/*box-sizing: border-box;*/
/*background-size: 300% ;*/
background-size: 180% ;
background-position: 50% 25%;
margin-top: -100px;
}
}
.gokoh25ss_parallax-img03 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_21.png');
/*width: auto ;*/
width: 100% ;
height: 400px/*50vh*/ ;
box-sizing: border-box;
/*background-attachment: fixed;*/
background-position: center;
background-size: cover;
padding: auto ;
}
@media screen and (max-width: 768px){
.gokoh25ss_parallax-img03 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_21.png');
width: 100% ;
height: 200px ;
/*box-sizing: border-box;*/
/**/
}
}
@media screen and (max-width: 480px){
.gokoh25ss_parallax-img03 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_21.png');
width: 100% ;
height: 200px ;
/*box-sizing: border-box;*/
/*background-size: 300% ;*/
background-size: 180% ;
background-position: center;
}
}
/* 以下パララックス用
.gokoh25ss_parallax-img02 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_11.png?1');
width: 100% ;
box-sizing: border-box;
background-attachment: fixed;
}
@media screen and (max-width: 768px){
.gokoh25ss_parallax-img02 {
background-size: 100% ;
box-sizing: border-box;
}
}
.gokoh25ss_parallax-img03 {
background-image: url('https://wpc-worldparty.jp/wp-content/themes/wpc/brand/gokoh/img/gokoh_21.png');
width: 100% ;
box-sizing: border-box;
}
*/
/*スクロールするコンテンツ*/
.gokoh25ss_scrollbox1 {
background-color: #111;
width: 100% ;
box-sizing: border-box;
}
.gokoh25ss_scrollbox2 {
background-color: #111;
width: 100% ;
box-sizing: border-box;
}
.gokoh25ss_scrollbox3 {
background-color: #111;
width: 100% ;
box-sizing: border-box;
}
/*newボタン*/
.btnback_gokoh25ss {
position: relative;
}
.btn_gokoh25ss {
width: 100%;
max-width: 290px;
/*margin: 88px auto 80px;*/
position: absolute;
top: 50%;
left: 42%;
}
@media screen and (max-width: 768px) {
.btn_gokoh25ss {
margin: 30px auto 60px;
top: 50%;
left: 50%;
}
}
@media screen and (max-width: 480px) {
.btn_gokoh25ss {
max-width: 230px;
margin: 30px auto 60px;
top: 50% ;
left: 50%;
}
}
.btn_gokoh25ss a {
display: block;
border: 2px solid #5a564b;
height: 100%;
width: 100%;
padding: 20px 0;
position: relative;
border-radius: 50px;
text-align: center;
font-size: 18px;
font-family: serif;
font-weight: 700;
font-style: normal;
font-color: #5a564b;
background-color: #fff;
color: #5a564b !important;
background-size: 200% 100%;
background-image: linear-gradient(
to right,
transparent 50%,
rgba(89, 86, 77, 1) 40%
/*
rgba(255, 255, 75, 1) 50%*/
);
transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
color 0.5s ease 0s, background-color 0.5s ease;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.btn_gokoh25ss a {
font-size: 16px;
padding: 15px 0;
color: #5a564b;
border: 2px solid #5a564b;
}
}
.btn_gokoh25ss a:hover {
background-position: -100% 100%;
letter-spacing: 2px;
color: #fff !important;
}
.btn_gokoh25ss a::after {
content: "";
/*mask-image: url(../../common/img/img_arrow.svg) ;
mask-position: absolute;
mask-size: contain;
background: #5a564b; // 背景色でSVGの色を指定
&--green {
background: green; // 背景色でSVGの色を指定
}
&:hover {
background: red; // 背景色でSVGの色を指定
}*/
/**/background-image: url(../../common/img/img_arrow_5a564b.svg) ;
/*background: #5a564b;*/
position: absolute;
background-size: contain;
right: 20px;
width: 6px;
height: 11px;
top: 50%;
transform: translateY(-50%);
}
/*ボタン四角 1a1a1a */
.btnsq_gokoh25ss {
/*background: #fff;*/
width: 300px;
height: 200px;
margin: 50px auto;
position: relative;
opacity: 0.8;
}
.btnsq_gokoh25ss:before,
.btnsq_gokoh25ss:after{
width: calc(100% - 20px);
height: 0;
display: block;
position: absolute;
left: 0;
content: "";
background: #fff ;
opacity: 0.8;
}
.btnsq_gokoh25ss:before{
border-bottom: solid 50px #ff9627;
border-left: solid 50px transparent;
bottom: 100%;
}
.btnsq_gokoh25ss:after{
/*border-top: solid 20px #ff9627;
border-left: solid 20px transparent;*/
top: 100%;
}
/*写真2つ並び*/
.gokoh25ssGarellyBox {
max-width: 1000px;
width: 100%;
margin: 30px auto 0;
background: #fff;
padding: 10px;
position: relative;
}
.gokoh25ssGarellyBoxInner {
border: 1px solid #c6cfdf;
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
@media screen and (max-width: 480px) {
.gokoh25ssGarellyBoxInner {
padding: 50px 20px;
margin-right: 0;
margin-bottom: 0;
}
}
.head02__gokoh25ssGarelly {
font-size: 30px;
text-align: left;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
}
@media screen and (max-width: 480px) {
.head02__gokoh25ssGarelly {
font-size: 20px;
}
}
.txt__gokoh25ssGarelly {
text-align: left;
font-size: 14px;
line-height: 2;
margin-top: 20px;
}
.gokoh25ssGarelly__fltBox {
display: flex;
margin: -60px auto 50px;
width: 800px ;
}
@media screen and (max-width: 768px) {
.gokoh25ssGarelly__fltBox {
display: flex;/*縦ならびblock*/
margin-top: -80px;
width: 85%;
margin-bottom: 15px ;
}
}
@media screen and (max-width: 480px) {
..gokoh25ssGarelly__fltBox {
display: flex;
margin-top: -80px;
width: 90%;
margin-bottom: 15px ;
}
}
.gokoh25ssGarelly__fltBoxPhoto {
width: 49%;
margin-top: 0px;
}
@media screen and (max-width: 480px) {
.gokoh25ssGarelly__fltBoxPhoto {
width: 100%;
}
}
.gokoh25ssGarelly__fltBoxwhite {
width: 2%;
}
@media screen and (max-width: 480px) {
.gokoh25ssGarelly__fltBoxwhite {
width: 5%;
}
}
.gokoh25ssGarelly__fltBoxPhoto a {
transition: 0.4s;
}
.gokoh25ssGarelly__fltBoxPhoto a:hover {
opacity: 0.7;
}
.gokoh25ssGarelly__fltBoxPhoto img {
width: 100%;
}
.gokoh25ssGarelly__fltBoxTxt {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
text-align: center;
}
@media screen and (max-width: 480px) {
.gokoh25ssGarelly__fltBoxTxt {
width: 100%;
display: block;
text-align: center;
margin: -10px -20px;
}
}
.gokoh_moviehaku {
padding-top: 20px ;
}
@media screen and (max-width: 480px) {
.gokoh_moviehaku {
padding-top: 15px ;
}
}
/*ここまでgokoh25ss*/
/* ----------------- ここまでgokoh ----------------- */
/* ----------------- ここからONDOO ----------------- */
/*文字サイズ調整
元データbrandBox__container*/
.ondoo__background{
margin: 50px 0px 0px/*125px*/ 0px;
font-family: "Zen Kaku Gothic New", ;
/*元は左右50px*/
font-weight: 500 ;
font-size: 22px;
line-height: 3.0;
letter-spacing: 0.5rem;
text-align: center;
/**/
src: url("../brand/ondoo/webfonts/zen_kaku_gothic_new/ZenKakuGothicNew-Regular.ttf") format('opentype'),
url("../brand/ondoo/webfonts/zen_kaku_gothic_new/ZenKakuGothicNew-Medium.ttf") format('opentype'),
url("../brand/ondoo/webfonts/zen_kaku_gothic_new/ZenKakuGothicNew-Light.ttf") format('opentype'),
url("../brand/ondoo/webfonts/zen_kaku_gothic_new/ZenKakuGothicNew-Bold.ttf") format('opentype'),
url("../brand/ondoo/webfonts/zen_kaku_gothic_new/ZenKakuGothicNew-Black.ttf") format('opentype');
font-display: swap;
}
@media screen and (max-width: 768px){
.ondoo__background{
margin: 40px 20px 60px 20px;
font-size: 14px;
line-height: 2.8;
font-weight: 500 ;
letter-spacing: 0.3rem;
/*text-align: left;*/
}
}
/*メインロゴ*/
.ondoo_logo {
width: 70% ;
margin: 0px 20px ;
}
@media screen and (max-width: 768px){
.ondoo_logo{
width: 100% ;
margin: 10px auto 20px;
}
}
/*線*/
.ondoo_line {
/*コレ*/border-top: 7px solid #333;
margin: 50px auto 30px;
width: 1000px ;
}
@media screen and (max-width: 768px){
.ondoo_line{
/*コレ*/border-top: 5px solid #333;
margin: 0px auto 0px;
width: 100% ;
}
}
/*== ボタン共通設定 */
.btn_ondoo {
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
overflow: hidden;
/*ボタンの形状*/
text-decoration: none;
display: inline-block;
border: 2px solid #59564d;
border-radius: 50px;
padding: 20px 0;
text-align: center;
outline: none;
/*アニメーションの指定*/
transition: ease 0.2s;
font-family: futura-pt ;
letter-spacing: 0.2rem;
line-height: 1.6;
font-size: 18px;
font-weight: 800;
font-style: normal;
font-color: #59564d;
background-color: #fff;
width: 100%;
height: 100%;
max-width: 290px;
margin: 88px auto 0;
display: block;
}
@media screen and (max-width: 768px) {
.btn_ondoo {
margin: 60px auto 0;
font-size: 15px;
letter-spacing: 0.2rem;
}
}
@media screen and (max-width: 480px) {
.btn_ondoo {
max-width: 230px;
margin: 40px auto 0;
font-size: 15px;
letter-spacing: 0.2rem;
}
}
/*ボタン内spanの形状＿塗り替え*/
.btn_ondoo span {
position: relative;
z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
color:#333;
background:#dd734f url(../../common/img/img_arrow.svg) no-repeat center right / 15px 15px
top 50% right 10% ;
transition: ease .2s;
font-size: 18px;
font-weight: 800;
}
@media screen and (max-width: 768px) {
.btn_ondoo span {
font-size: 15px;
}
}
/**/
.btn_ondoo:hover span{
color:#fff;
}
/*== 背景が流れる（下から上） */
.ondbgbottom:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
bottom:0;
left: 0;
z-index: 2;
background: #dd734f;/*背景色*/
width: 100%;
height: 0;
/*アニメーション*/
transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
/*hoverした際の形状*/
.ondbgbottom:hover:before{
height: 100%;
background-color: #dd734f;
}
/*25ssONDOO青*/
/*== 背景が流れる（下から上）青 */
.ondbgbottomblue:before {
content: '';
/*絶対配置で位置を指定*/
position: absolute;
bottom:0;
left: 0;
z-index: 2;
background: #2f439b;/*背景色*/
width: 100%;
height: 0;
/*アニメーション*/
transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
/*hoverした際の形状*/
.ondbgbottomblue:hover:before{
height: 100%;
background-color: #2f439b;
}
/*ボタン塗り替えここまで*/
/*ラウンドボタンONDOO
.btn_round_ondoo {
width: 100%;
max-width: 290px;
margin: 88px auto 0;
}
@media screen and (max-width: 768px) {
.btn_round_ondoo {
margin: 60px auto 0;
font-size: 13px;
letter-spacing: 0.2rem;
}
}
@media screen and (max-width: 480px) {
.btn_round_ondoo {
max-width: 230px;
margin: 40px auto 0;
font-size: 13px;
letter-spacing: 0.2rem;
}
}
.btn_round_ondoo a {
display: block;
border: 2px solid #59564d;
height: 100%;
width: 100%;
padding: 20px 0;
position: relative;
border-radius: 50px;
text-align: center;
font-size: 18px;
font-family: futura-pt ;
letter-spacing: 0.2rem;
line-height: 1.6;
font-weight: 800;
font-style: normal;
font-color: #59564d;
background-color: #fff;
color: #000 !important;
background-size: 200% 100%;
background-image: linear-gradient(
to right,
transparent 50%,
rgba(221, 115, 79, 40) 40%
);
content: '';
transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transition: 0.8s;
}
@media screen and (max-width: 480px) {
.btn_round_ondoo a {
font-size: 15px;
padding: 15px 0;
letter-spacing: 0.2rem;
}
}
.btn_round_ondoo a:hover {
background-position: 100% -100%;
letter-spacing: 2px;
}
.btn_round_ondoo a::after {
content: "";
background-image: url(../../common/img/img_arrow.svg);
position: absolute;
background-size: contain;
right: 20px;
width: 6px;
height: 11px;
top: 50%;
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
.btn_round_ondoo a::before {
content: "";
background-image: url(../../common/img/img_arrow.svg);
position: absolute;
background-size: contain;
right: 20px;
width: 6px;
height: 11px;
top: 50%;
transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
*/
.ondoo__item {
width: 1000px ;
align-content: center ;
margin : 0px auto ;
font-family: "Serif";
font-size: 30px ;
padding: 35px ;
/*position: relative;*/
border: 1px solid #775747;
text-align: center;
}
@media screen and (max-width: 768px){
.ondoo__item {
width: 100% ;
text-align: center;
padding: 10px;
}
}
.ondoo_itembox {
width: 100% ;
margin : 30px auto 60px;
padding: 30px auto ;
align-items: center ;
font-family: "Serif" ;
}
@media screen and (max-width: 768px){
.ondoo_itembox {
margin : 30px auto 0px;
}
}
.ondoo_itemtext {
width: 100% ;
align-content: center ;
font-size: 30px ;
font-weight: 700 ;
/*コレ*/border-top: 3px solid #333;
/*コレ*/border-bottom: 3px solid #333;
padding: -20px auto -10px ;
margin-top: -10px ;
}
@media screen and (max-width: 768px){
.ondoo_itemtext {
width: 100% ;
text-align: center;
font-size: 20px ;
/*コレ*/border-top: 2px solid #333;
/*コレ*/border-bottom: 2px solid #333;
margin : -10px auto 20px;
}
}
/*div#ondoo_itemtext > */
.ondoo_no {
width: 100% ;
font-family: Serif , "Noto Serif JP";
font-size: 30px ;
color:#dd734f;
font-weight: 950 ;
margin: 0px auto ;
padding: -10px auto 0px ;
}
@media screen and (max-width: 768px){
.ondoo_no{
font-size: 22px ;
margin-bottom: 10px ;
}
}
/*品番の画像バージョン*/
.ondoo_itemno {
margin: 0px auto 20px;
width: 500px ;
}
@media screen and (max-width: 768px){
.ondoo_itemno{
width: 80% ;
margin: 5px auto 15px;
}
}
.ondoo_name {
font-size: 40px ;
margin: 10px auto -5px;
font-family: Serif , 'ZenKakuGothicNew';
/*font-weight: ;*/
line-height: 1.2em ;
}
@media screen and (max-width: 768px){
.ondoo_name{
font-size: 28px ;
margin: 8px auto 0px;
}
}
.ondoo_nameJP {
font-size: 17px ;
margin: 5px auto 10px;
font-weight: 800 ;
/*font-family: "Zen Kaku Gothic New", ;*/
font-family: "Zen Kaku Gothic New", sans-serif;
}
@media screen and (max-width: 768px){
.ondoo_nameJP{
font-size: 12px ;
margin: 0px auto -5px;
height: 30px ;
font-weight: 600 ;
}
}
.ondoo_buy {
width: 100% ;
align-content: center ;
/*background-color: #dd734f ;*/
color: white ;
align-items: center ;
font-size: 20px ;
font-family: "Noto Serif JP", serif;
font-weight: 900 ;
height: 50px ;
padding: auto 20px ;
position: relative;
background:#dd734f url(../../common/img/img_arrow_white.svg) no-repeat center right / 15px 15px;
background-position: 99% 50%;
}
@media screen and (max-width: 768px){
.ondoo_buy {
width: 100% ;
font-size: 15px ;
height: 40px ;
font-family: "Noto Serif JP", serif;
/*font-weight: ;*/
font-style: normal;
padding: 10px 15px ;
background:#dd734f url(../../common/img/img_arrow_white.svg) no-repeat center right / 12px 12px ;
background-position: 98% 50%;
}
}
.ondoo_buy span {
align-items: center ;
margin: auto 20px ;
position: 50% 50%;
}
/*25ssONDOO BUYボタン青*/
.ondoo_buy_25ss {
width: 100% ;
align-content: center ;
/*background-color: #dd734f ;*/
color: white ;
align-items: center ;
font-size: 20px ;
font-family: "Noto Serif JP", serif;
font-weight: 900 ;
height: 50px ;
padding: auto 20px ;
position: relative;
background:#2f439b url(../../common/img/img_arrow_white.svg) no-repeat center right / 15px 15px;
background-position: 99% 50%;
}
@media screen and (max-width: 768px){
.ondoo_buy_25ss {
width: 100% ;
font-size: 15px ;
height: 40px ;
font-family: "Noto Serif JP", serif;
/*font-weight: ;*/
font-style: normal;
padding: 10px 15px ;
background:#2f439b url(../../common/img/img_arrow_white.svg) no-repeat center right / 12px 12px ;
background-position: 98% 50%;
}
}
.ondoo_buy_25ss span {
align-items: center ;
margin: auto 20px ;
position: 50% 50%;
}
.ondooimage {
margin: 30px auto 30px ;
padding: 10px auto ;
}
@media screen and (max-width: 768px){
.ondooimage {
margin: 0px auto 15px;
padding: 10px auto ;
}
}
/*====== 9-1-1 縦線が動いてスクロールを促す その３ =======*/
.ondoo_scroll {
position :relative ;
font-size : 13px;
writing-mode : vertical-rl;
top : 120%;
left : 50%;
transform: translateX(-50%) translateY(-50%);
color :#dd734f;
margin-top: 100px;
margin-bottom: 35px;
padding-bottom: 60px ;
}
@media screen and (max-width: 768px){
.ondoo_scroll {
margin-top: 70px;
margin-bottom: 5px ;
padding-top: 50px ;
padding-bottom: 20px ;
}
}
.ondoo_scroll p{
position :absolute ;
left : 10%;
bottom : 40%;
}
@media screen and (max-width: 768px){
.ondoo_scroll p{
top : 20%;
}
}
.ondoo_scroll::after {
content : '';
display : inline-block ;
position : absolute;
background-color: #dd734f;
right : 50%;
bottom : 5px;
transform : translateX(-50%);
width : 1px;
height : 75px;
animation: scroll 1.5s infinite ;
color :#dd734f;
}
@media screen and (max-width: 768px){
.ondoo_scroll::after {
height : 60px;
}
}
@keyframes scroll {
0% {
transform: scale(1, 0);
transform-origin: 0 100%;
}
50% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
50.1% {
transform: scale(1, 1);
transform-origin: 0 0;
}
100% {
transform: scale(1, 0) ;
transform-origin: 0 0;
}
}
/*25ssONDOO*/
.ondoo__background_25ss {
margin: 20px 0px 0px/*125px*/ 0px;
font-family: "Zen Kaku Gothic New", ;
/*元は左右50px*/
font-weight: 500 ;
font-size: 22px;
line-height: 2.5;
letter-spacing: 0.5rem;
text-align: center;
/**/
src: url("../brand/ondoo/webfonts/zen_kaku_gothic_new/ZenKakuGothicNew-Regular.ttf") format('opentype'),
url("../brand/ondoo/webfonts/zen_kaku_gothic_new/ZenKakuGothicNew-Medium.ttf") format('opentype'),
url("../brand/ondoo/webfonts/zen_kaku_gothic_new/ZenKakuGothicNew-Light.ttf") format('opentype'),
url("../brand/ondoo/webfonts/zen_kaku_gothic_new/ZenKakuGothicNew-Bold.ttf") format('opentype'),
url("../brand/ondoo/webfonts/zen_kaku_gothic_new/ZenKakuGothicNew-Black.ttf") format('opentype');
font-display: swap;
}
@media screen and (max-width: 768px){
.ondoo__background_25ss {
margin: 0px 20px 60px 20px;
font-size: 14px;
line-height: 2.5;
font-weight: 500 ;
letter-spacing: 0.3rem;
/*text-align: left;*/
}
}
/*スクロール青*/
.ondoo_scroll_blue{
position :relative ;
font-size : 13px;
writing-mode : vertical-rl;
top : 120%;
left : 50%;
transform: translateX(-50%) translateY(-50%);
color :#2f439b;
margin-top: 100px;
margin-bottom: 35px;
padding-bottom: 60px ;
}
@media screen and (max-width: 768px){
.ondoo_scroll_blue {
margin-top: 70px;
margin-bottom: 5px ;
padding-top: 50px ;
padding-bottom: 20px ;
}
}
.ondoo_scroll_blue p{
position :absolute ;
left : 10%;
bottom : 40%;
}
@media screen and (max-width: 768px){
.ondoo_scroll_blue p{
top : 20%;
}
}
.ondoo_scroll_blue::after {
content : '';
display : inline-block ;
position : absolute;
background-color: #2f439b;
right : 50%;
bottom : 5px;
transform : translateX(-50%);
width : 1px;
height : 75px;
animation: scroll 1.5s infinite ;
color :#2f439b;
}
@media screen and (max-width: 768px){
.ondoo_scroll_blue::after {
height : 60px;
}
}
@keyframes scroll {
0% {
transform: scale(1, 0);
transform-origin: 0 100%;
}
50% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
50.1% {
transform: scale(1, 1);
transform-origin: 0 0;
}
100% {
transform: scale(1, 0) ;
transform-origin: 0 0;
}
}
/* ----------------- ここまでONDOO ----------------- */
/* ----------------- ここからcsr ----------------- */
/*これエラーコード*/
.brandBox__csr{
margin: 50px 50px 125px 50px;
font-size: 17px;
line-height: 1.8;
text-align: left;
align-content: center ;
}
@media screen and (max-width: 768px){
.brandBox__csr{
margin: 40px 33px 60px 33px;
text-align: left;
}
}
.brandBox__csr .btn_square a {
padding: 17px 35px;
font-size: 16px;
font-family: futura-pt-bold, sans-serif;
font-weight: 700;
background-color: #000;
color: #fff;
}
@media screen and (max-width: 768px){
.brandBox__csr .btn_square a {
padding: 15px 30px;
font-size: 14px;
}
}
.brandBox__csr .btn_square{
margin-top: 60px;
text-align: center;
padding: auto 120px ;
}
@media screen and (max-width: 768px){
.brandBox__csr .btn_square{
margin: 50px 0 100px 0;
}
}
.brandBox__csr03{
margin: 150px 50px 0px 50px;
}
.brandBox__csr h3{
font-size: 21px;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: normal;
padding-bottom: 20px;
letter-spacing: 1pt;
}
@media screen and (max-width: 768px){
.brandBox__csr h3{
font-size: 20px;
}
}
.brandBox__csr03 h3{
font-size: 45px;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: normal;
text-align: center;
padding-bottom: 65px;
letter-spacing: 1pt;
}
@media screen and (max-width: 768px){
.brandBox__csr03 h3{
font-size: 35px;
padding: 15px 0 25px 0;
}
}
.brandBox__csr li{
text-indent: -1em;
padding-left: 1em;
}
.csr_sc h3 {
margin-bottom: -20px ;
}
-----------
/*文字サイズ調整
元データbrandBox__container*/
.csr__background{
margin: 50px 0px 125px 0px;
font-family: Serif;
/*元は左右50px*/
font-size: 18px;
line-height: 1.8;
text-align: center;
}
@media screen and (max-width: 768px){
.csr__background{
margin: 40px 20px 60px 20px;
font-family: Serif;
/*元は左右33px*/
text-align: left;
}
}
.csr_title{
font-family: futura-pt-bold, sans-serif;
font-weight: 600;
font-style: normal;
padding: 20px 10px;
font-size: 27px ;
}
@media screen and (max-width: 768px){
.csr_title{
font-size: 24px;
margin : 0px -20px;
padding: 10px 20px;
}
}
/*塗りつぶし背景*/
/*ここインスタエラーの原因！！！ */
.csr_sc {
background-color: "#dad8d8" ;
margin: 40px 0px ;
padding: 30px 30px;
}
@media screen and (min-width: 768px){
.csr_sc {
width: 100%;
background-color: "#dad8d8";
align-content: left ;
padding: 5% 5%;
}
}
.has-sc {
align-content: left ;
background-color: "#dad8d8";
padding: 7px 0px 20px;
/*margin-bottom: 10px ;*/
}
@media screen and (max-width: 768px){
.has-sc {
align-content: left ;
/*margin-bottom: 2% ;*/
}
}
/*csrボタン*/
.btn_round_csr {
width: 100%;
max-width: 290px;
margin: 88px auto 0;
}
@media screen and (max-width: 768px) {
.btn_round_csr {
margin: 60px auto 0;
}
}
@media screen and (max-width: 480px) {
.btn_round_csr {
max-width: 230px;
margin: 40px auto 0;
}
}
.btn_round_csr a {
display: block;
border: 2px solid #59564d;
height: 100%;
width: 100%;
padding: 20px 0;
position: relative;
border-radius: 50px;
text-align: center;
font-size: 18px;
font-family: serif;
font-weight: 700;
font-style: normal;
color: #59564d;
background-color: #fff;
/*color: #000 !important;*/
background-size: 200% 100%;
background-image: linear-gradient(
to right,
transparent 50%,
rgba(89, 86, 77, 1) 40%
/*
rgba(255, 255, 75, 1) 50%*/
);
transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s,
color 0.5s ease 0s, background-color 0.5s ease;
transition: 0.4s;
}
@media screen and (max-width: 480px) {
.btn_round_csr a {
font-size: 16px;
padding: 15px 0;
}
}
.btn_round_csr a:hover {
background-position: -100% 100%;
letter-spacing: 2px;
}
.btn_round_csr a::after {
content: "";
background-image: url(../../common/img/img_arrow.svg);
position: absolute;
background-size: contain;
right: 20px;
width: 6px;
height: 11px;
top: 50%;
transform: translateY(-50%);
}
.title_sangyou2 {
font-size: 15px ;
margin-bottom: 0px ;
}
.titleBox3 {
border-bottom: dotted 1px !important;
margin-bottom: 20px ;
}
/* ----------------- ここまでcsr ----------------- */
/*規約固定ページ*/
.kiyaku_page {
width: 1000px ;
align-content: center ;
margin: -70px auto 100px ;
word-break: break-all;
}
@media screen and (max-width: 480px) {
.kiyaku_page {
width: 80% ;
align-content: left ;
margin: -60px auto 100px ;
}
}
.kiyaku_page li{
margin-left: 1.0em;
text-indent: -1.0em;
}
.kiyaku_pageBox {
/* max-width: 1152px;*/
max-width: 1152px;
width: 100%;
margin: 100px auto 160px ;
background: #fff;
position: relative;
padding: 0px 100px 0 /*元はtop80px*/ ;
}
@media screen and (max-width: 768px) {
.kiyaku_pageBox {
padding: 0px 40px 0 /*元はtop80px*/;
margin: 50px auto 160px ;
}
}
@media screen and (max-width: 480px) {
.kiyaku_pageBox {
margin: 50px auto 160px ;
padding: 0px 20px 0 /*元はtop80px*/;
}
}
.kiyaku_pageBoxInner {
max-width: 1152px;
width: 100%;
background: #fff;
margin: 0 auto;
padding: 60px 0px;
}
@media screen and (max-width: 480px) {
.kiyaku_pageBoxInner {
padding: 40px 30px;
}
}
.kiyaku_pageBoxInner h1 {
font-size: 30px;
font-family: "Noto Sans JP", sans-serif;
color: #000;
text-align: center;/*元はcenter*/
position: relative;
padding-bottom: 80px;
}
@media screen and (max-width: 480px) {
.kiyaku_pageBoxInner h1 {
font-size: 18px;
padding-bottom: -30px;
}
}
@media screen and (max-width: 480px) {
.kiyaku_pageBoxInner h1 {
font-size: 18px;
}
}
.kiyaku_pageBoxInner h1::after {
content: "";
background: url("https://wpc-worldparty.jp/wp-content/themes/wpc/news/img/ximg_newsdetail_titleBg.png.pagespeed.ic.e7rOc5zKQ6.png") no-repeat;
background-size: cover;
height: 14px;
width: 100%;
max-width: 1152px;
left: 50%;
transform: translateX(-50%);
position: absolute;
bottom: 50px;
}
.kiyaku_pageBoxInner h1 time {
font-family: futura-pt, sans-serif;
font-weight: 200;
font-style: normal;
font-size: 20px;
color: #000;
display: block;
margin-bottom: 10px;
text-align: center;
}
.kiyaku_pageBoxInner h2 {
text-align: center;
font-family: "Noto Sans JP", sans-serif;
font-weight: 600;
color: #000;
font-size: 22px;
margin: 70px 0;
}
@media screen and (max-width: 480px) {
.kiyaku_pageBoxInner h2 {
margin: 40px 0;
}
}
.kiyaku_pageBoxInner {
text-align: left;
}
.kiyaku_pageBoxInner img {
height: auto;
}
/* ----------------- ここから20周年ページ ----------------- */
.wpc20th_box {
text-align:center;
padding:60px 10px 70px;
/*background-color: "#ffffff" ;*/
background:rgba(255,255,255,0.5);
width: 30% ;
/*background-color: #ffffff;
background-opacity: 0.3;*/
position: absolute;
top:23%;
left:20%;
}
@media screen and (max-width: 768px) {
.wpc20th_box {
width: 90%;
margin: 20px -40px 20px;
position:relative;
top:40%;
left:0%;
padding: 30px 0px ;
/*
width: 90%;
margin: 30px -20px 0 -20px -40px;
position:relative;
top:40%;
left:0%;
*/
}
}
@media screen and (max-width: 480px) {
.wpc20th_box {
width: 90%;
margin: 20px -40px 0px;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
position:relative;
top:40%;
left:0%;
padding: 30px 0px ;
}
}
.20thmain {
position : relative ;
width: 100% ;
margin: 0px 50px 50px;
}
@media screen and (max-width: 768px) {
.20thmain {
width: 90%;
margin: 0px 20px -20px;
position:absolute;
padding: -40px 20px 0px;
}
}
@media screen and (max-width: 480px) {
.20thmain {
width: 80%;
margin: -40px 20px 0px;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
position:absolute;
top:30%;
left:10%;
}
}
/*svgロゴ*/
.20thmain_svg {
padding: 0 100px;
margin: 0 50px ;
}
@media screen and (max-width: 768px) {
.20thmain_svg {
margin: 60px 60px 0;
position:absolute;
padding: -20px 20px -20px;
}
}
@media screen and (max-width: 480px) {
.20thmain_svg {
margin: 0px 60px 0;
padding: -20px 20px -20px;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
position:absolute;
top:30%;
left:10%;
}
}
/*これが游ゴシックのボックス*/
.wpc20th_title {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic";
font-weight: 350 ;
font-size: 23px ;
text-align:left ;
padding: 60px 40px 60px;
line-height: 2.0em ;
letter-spacing: 0.2em ;
}
@media screen and (max-width: 768px) {
.wpc20th_title {
width: 110%;
margin: 30px -20px 0 -20px ;
line-height: 2.0em ;
font-size: 17px ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_title {
width: 110%;
margin: 20px -20px -20px ;
font-size: 15px ;
line-height: 2.0em ;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
}
}
/*これ本文*/
.wpc20th_text {
/* font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic";*/
font-family: "Noto Sans JP", sans-serif;
font-weight: 400 ;
font-size: 25px ;
text-align:center ;
letter-spacing: 0.2em ;
}
@media screen and (max-width: 768px) {
.wpc20th_text {
font-size: 17px ;
text-align:left ;
letter-spacing: 0.2em ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_text {
font-size: 17px ;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
text-align:left ;
letter-spacing: 0.2em ;
}
}
/*背景白*/
.wpc20th_bgfff {
/*background-color: #ffffff ;*/
background-color: #f8f8e6 ;
width: 100% ;
margin: 30px auto;
padding: 10px 20px -20px ;
}
@media screen and (max-width: 480px) {
.wpc20th_bgfff {
width: 90% ;
margin: 30px auto;
padding: 10px 20px -20px ;
}
}
.wpc20th_title2{
/**/font-family: "Bebas Neue",;
font-weight: 600 ;
}
/* 写真2つ並び変換*/
.txt__wpc20thGarelly {
text-align: left;
font-size: 14px;
line-height: 2;
width: 1500px ;
margin: 20px 20px;
}
.wpc20thGarelly__fltBox {
display: flex;
width: 1500px ;
paddhing :30px 30px ;
margin: 20px -10px ;
}
@media screen and (max-width: 480px) {
.wpc20thGarelly__fltBox {
display: block;
margin-left: -10px;
width: 100%;
padding: 0px 0px -30px -20px;
margin-bottom:-10px ;
}
}
.wpc20thGarelly__fltBoxPhoto {
width: 50%;
margin: -5px 5px;
}
.wpc20thGarelly__fltBoxPhoto a {
transition: 0.4s;
}
.wpc20thGarelly__fltBoxPhoto a:hover {
opacity: 0.7;
}
.wpc20thGarelly__fltBoxPhoto img {
width: 100%;
}
@media screen and (max-width: 480px) {
.wpc20thGarelly__fltBoxPhoto {
width: 100%;
margin: 10px 10px 10px 0px;
}
}
.wpc20thGarelly__fltBoxTxt {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
font-weight: 600;
text-align: center;
}
@media screen and (max-width: 480px) {
.wpc20thGarelly__fltBoxTxt {
width: 112%;
display: block;
text-align: center;
margin: -10px -20px;
}
}
/*背景白*/
/*ラウンド背景白*/
.wpc20th_bgfff_round {
background-color: #ffffff ;
width: 70% ;
margin: 30px auto;
padding: 10px 20px ;
border-radius: 150px 150px 150px 150px;
position: relative;
}
@media screen and (max-width: 480px) {
.wpc20th_bgfff_round {
position:relative; z-index: 1;
width: 100%;
padding :-20px 5px;
display: block;
text-align: center;
border-radius: 40px 40px 40px 40px;
/*position: relative;*/
}
}
/*アニバーサリーサークルロゴ*/
.20thcircle_svg {
width: 350px ;
margin-top: 50px ;
}
@media screen and (max-width: 480px) {
.20thcircle_svg {
width: 80%;
}
}
.20th_title_svg {
background-size: 100%;
position: relative ;
top:80%;
left: 50px;
}
@media screen and (max-width: 480px) {
.20th_title_svg {
width: 60%;
position: absolute; /* 要素の配置方法を指定 */
left: 50px; /* 左からの位置指定 */
top: 100px; /* 上からの位置指定 */
}
}
.wpc20th_bgfff .20th_title01 {
/*position:absolute; top:30%x; z-index: 2;
transform:translate(40%,40%); */
/*
width: 100vw;
margin: 0 calc(50% - 50vw);*/
/* position: absolute;
top: 100px;
left: 15px;
/*margin: 0 calc(50% - 50vw);*/
position: absolute top:100px ;
z-index: 4;
}
@media screen and (max-width: 480px) {
.wpc20th_bgfff .20th_title01 {
width: 60%;
position: absolute; top:100px ; /* 要素の配置方法を指定 */
/* 左からの位置指定 */
/* 上からの位置指定 */
}
}
.20th_title02 {
position: absolute top:100px;
top: 50px;
left: 15px;
}
@media screen and (max-width: 480px) {
.20th_title02 {
width: 100%;
position: absolute; /* 要素の配置方法を指定 */
left: 50px; /* 左からの位置指定 */
top: 100px; /* 上からの位置指定 */
}
}
.20th_title03 {
position: absolute;
top: 50px;
left: 15px;
}
@media screen and (max-width: 480px) {
.20th_title03 {
width: 80%;
position: absolute; /* 要素の配置方法を指定 */
left: 50px; /* 左からの位置指定 */
top: 20%; /* 上からの位置指定 */
}
}
/* ---------ここから4月のタグ wpc20th_textは使い回し ---------*/
/*body*/
. wpc20th_body {
width: 1500px ;
}
@media screen and (max-width: 768px) {
.wpc20th_body {
width: 100% ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_body {
width: 100% ;
}
}
/*動画*/
.wpc20th_youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.wpc20th_video {
position: absolute;
width: 100% ;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
/*svgロゴ*/
.20thmain_svg {
padding: 0 100px;
margin: 0 50px ;
}
@media screen and (max-width: 768px) {
.20thmain_svg {
margin: 60px 60px 0;
position:absolute;
padding: -20px 20px -20px;
}
}
@media screen and (max-width: 480px) {
.20thmain_svg {
margin: 0px 60px 0;
padding: -20px 20px -20px;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
position:absolute;
top:30%;
left:10%;
}
}
/*これが游ゴシックのボックス*/
.wpc20th_title {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic";
font-weight: 350 ;
font-size: 23px ;
text-align:left ;
padding: 60px 40px 60px;
line-height: 2.0em ;
letter-spacing: 0.2em ;
}
@media screen and (max-width: 768px) {
.wpc20th_title {
width: 110%;
margin: 30px -20px 0 -20px ;
line-height: 2.0em ;
font-size: 17px ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_title {
width: 110%;
margin: 20px -20px -20px ;
font-size: 15px ;
line-height: 2.0em ;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
}
}
/*これ本文*/
.wpc20th_text {
/* font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic";*/
font-family: "Noto Sans JP", sans-serif;
font-weight: 400 ;
font-size: 25px ;
text-align:center ;
letter-spacing: 0.2em ;
}
@media screen and (max-width: 768px) {
.wpc20th_text {
font-size: 17px ;
text-align:left ;
letter-spacing: 0.2em ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_text {
font-size: 17px ;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
text-align:left ;
letter-spacing: 0.2em ;
}
}
.wpc20th_bg h2{
font-family: "Noto Sans JP", sans-serif;
font-weight: 500 ;
font-size: 35px ;
text-align:center ;
letter-spacing: 0.1em ;
}
@media screen and (max-width: 768px) {
.wpc20th_bg h2 {
font-size: 22px ;
text-align: center ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_bg h2 {
font-size: 20px ;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
text-align:center ;
}
}
/*背景とうめい*/
.wpc20th_bg {
/*background-color: #ffffff ;*/
width: 100% ;
margin: 30px auto;
padding: 10px 20px -20px ;
}
@media screen and (max-width: 480px) {
.wpc20th_bg {
width: 90% ;
margin: 30px auto;
padding: 10px 20px -20px ;
}
}
.wpc20th_title2{
/**/font-family: "Bebas Neue",;
font-weight: 600 ;
}
/*物撮りワイズ80*/
.wpc20thGarelly__w80Photo {
width: 69% ;
padding : 50px 30px ;
}
@media screen and (max-width: 480px) {
.wpc20thGarelly__w80Photo {
width: 100%;
padding : 0px 0px ;
}
}
.w80Photo {
width: 100%;
margin: 10px 5px;
}
@media screen and (max-width: 768px) {
.w80Photo {
width: 100%;
margin: 0px 0px;
left: -5px ;
}
}
@media screen and (max-width: 480px) {
.w80Photo {
width: 100%;
left: -5px ;
}
}
.w80Photo02 {
width: 60%;
margin: 20px 5px;
}
@media screen and (max-width: 768px) {
.w80Photo02 {
width: 90%;
margin: 10px 0px;
left: -5px ;
}
}
@media screen and (max-width: 480px) {
.w80Photo02 {
width: 90%;
margin: 10px 0px;
left: -5px ;
}
}
/*傘はファッションだ svg調整*/
.wpc20th_tmainslg {
width: 100% ;
margin-bottom: -10px ;
margin-top: 30px ;
}
@media screen and (max-width: 480px) {
.wpc20th_tmainslg {
width: 100%;
margin-bottom: -10px ;
margin-top: 0px ;
}
}
.20th_svg_uf {
align-content: center ;
margin: 80px 0px 80px;
}
@media screen and (max-width: 768px) {
.20th_svg_uf {
width: 100%;
align-content: left ;
margin: 50px 0px 0px;
}
}
@media screen and (max-width: 480px) {
.20th_svg_uf {
width: 100%;
align-content: left ;
margin: 50px 0px 0px;
}
}
/*スローガン下文章ベース*/
.wpc20th_slgbg {
/*background-color: #ffffff ;*/
width: 40% ;
margin: 30px auto;
padding: 10px 20px -20px ;
}
@media screen and (max-width: 480px) {
.wpc20th_slgbg {
width: 85% ;
margin: 30px auto;
padding: 10px 20px -20px ;
}
}
/*スローガン下文章*/
.wpc20th_slgtext {
/* font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic";*/
width: 100% ;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400 ;
font-size: 25px ;
text-align:center ;
line-height: 2.0em ;
letter-spacing: 0.2em ;
}
@media screen and (max-width: 768px) {
.wpc20th_slgtext {
width: 100% ;
font-size: 17px ;
text-align:center ;
line-height: 1.8em ;
letter-spacing: 0.2em ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_slgtext {
font-size: 17px ;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
text-align:center ;
letter-spacing: 0.2em ;
line-height: 1.8em ;
width: 100% ;
}
}
/*メニュー*/
.anchor_menu {
width: 35% ;
padding : 30px 30px ;
}
@media screen and (max-width: 480px) {
.anchor_menu {
width: 100%;
padding : 10px 0px ;
}
}
.anchor_list {
width: 80% ;
height: 60px ;
padding : 70px 30px ;
margin: 50px 0px;
background: #eae9ea ;
border-radius: 100px 100px 100px 100px;
box-shadow: 4px 4px 6px gray;
}
@media screen and (max-width: 768px) {
.anchor_list {
width: 80%;
padding : 0px 20px 0px 20px ;
margin: -10px 20px 20px ;
border-radius: 100px 100px 100px 100px;
overflow: hidden;
top :-30px ;
}
}
@media screen and (max-width: 480px) {
.anchor_list {
overflow: hidden;
width: 80%;
padding : 0px 20px 0px 20px ;
margin: 20px 0px;
border-radius: 100px 100px 100px 100px;
top :-30px ;
}
}
.anchor_list p{
margin-top: -70px ;
}
@media screen and (max-width: 768px) {
.anchor_list p{
margin-bottom: 20px 0px 0px;
padding-bottom : -20px ;
line-height:$div-height;
top :-10px ;
}
}
@media screen and (max-width: 480px) {
.anchor_list p{
margin: 20px 0px 0px;
padding-bottom : -20px ;
line-height:$div-height;
top :-10px ;
}
}
.anchor_list img{
width: 11% ;
padding : 50px 0px ;
float: left;
margin-left: 5% ;
}
@media screen and (max-width: 768px) {
.anchor_list img{
width: 13%;
padding-top : 10px ;
float: left ;
}
}
@media screen and (max-width: 480px) {
.anchor_list img{
width: 13%;
padding-top : 10px ;
float: left ;
}
}
.anchor_list h4{
width: 82% ;
padding : 50px 0px ;
font-size: 30px ;
font-weight: 600 ;
float: left;
color: #000000;
margin-left: 2% ;
align-content: center ;
}
@media screen and (max-width: 480px) {
.anchor_list h4{
width: 80%;
float: left;
font-size: 20px ;
padding : 10px 0px ;
margin-left: 5px ;
align-content: center ;
}
}
.comingPhoto {
}
@media screen and (max-width: 768px) {
.comingPhoto{
width: 80% ;
margin-top: -10px ;
}
}
@media screen and (max-width: 480px) {
.comingPhoto{
width: 80% ;
margin-top: -10px ;
}
}
/*番号付き見出し*/
.nobPhoto {
width: 130px ;
position:absolute;
top: 40px;
right: 47% ;
z-index: 20 ;
align-content: center ;
/*margin-left: -80px ;*/
}
@media screen and (max-width: 768px) {
.nobPhoto {
width: 20%;
align-content: center ;
top: -30px;
right: 40% ;
}
}
@media screen and (max-width: 480px) {
.nobPhoto {
width: 20%;
align-content: center ;
top: -30px;
right: 40% ;
}
}
.svg_yajirusi {
width: 5px ;
}
@media screen and (max-width: 768px) {
.svg_yajirusi {
width: 5% ;
}
}
@media screen and (max-width: 480px) {
.svg_yajirusi {
width: 5% ;
}
}
/*矢印css*/
.dli-chevron-round-right {
display: inline-block;
vertical-align: middle;
color: #333;
line-height: 1;
position: relative;
width: 1.2em;
height: 1.2em;
transform: translateX(-25%) rotate(45deg);
float: left ;
left: 100%;
top: -50% ;
}
.dli-chevron-round-right::before, .dli-chevron-round-right::after {
content: '';
position: absolute;
background: currentColor;
border-radius: 0.1em;
}
.dli-chevron-round-right::before {
top: 0;
left: 0;
right: 0;
height: 0.1em;
}
.dli-chevron-round-right::after {
top: 0;
right: 0;
bottom: 0;
width: 0.1em;
}
.nobPhotolist {
}
/*コンテンツ*/
.wpc20th_contents {
max-width: 1000px ;
margin-top: -30px ;
}
@media screen and (max-width: 768px) {
.wpc20th_contents {
width: 100% ;
padding: auto -10px ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_contents {
width: 100% ;
padding: auto -10px ;
}
}
.wpc20th_con {
background: #ebe9ea ;
width: 100% ;
}
@media screen and (max-width: 768px) {
.wpc20th_con {
width: 100% ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_con {
width: 100% ;
}
}
.wpc20th_contents img {
background: #ebe9ea ;
width: 100% ;
padding 10px ;
}
@media screen and (max-width: 768px) {
.wpc20th_contents img {
width: 100% ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_contents img {
width: 100% ;
}
}
.wpc20th_con h3 {
font-size: 30px ;
font-weight: 700 ;
margin-bottom: 20px ;
padding-top: 20px ;
}
@media screen and (max-width: 768px) {
.wpc20th_con h3 {
width: 100% ;
font-size: 25px ;
font-weight: 600 ;
margin-bottom: 0px ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_con h3 {
width: 100% ;
font-size: 20px ;
font-weight: 600 ;
margin-bottom: -10px ;
}
}
.wpc20th_con h4 {
font-size: 21px ;
font-weight: 600 ;
margin: 30px 0px 20px ;
}
@media screen and (max-width: 768px) {
.wpc20th_con h4 {
width: 100% ;
font-size: 20px ;
font-weight: 600 ;
margin: 20px 0px 10px;
}
}
@media screen and (max-width: 480px) {
.wpc20th_con h4 {
width: 100% ;
font-size: 15px ;
font-weight: 600 ;
margin: 10px 0px;
}
}
/*店舗のリンク*/
.wpc20th_button {
display: flex;
justify-content: center;
align-items: center;
align-content: center ;
margin:auto 5px ;
padding: 0px 20px 10px ;
}
@media screen and (max-width: 480px) {
.wpc20th_button {
display: flex;
justify-content: center;
align-items: center stretch;
display: flex;
margin: 0px 5px ;
}
}
.wpc20th_button_list {
width: 400px ;
height: 80px !important ;
/*height: 80px ;*/
background: #000000 ;
float:left ;
/* align-items: left ;
font-size: 23px ;*/
margin: auto 10px ;
/* margin: 10px 20px 0px 10px;
*/
/*padding: 20px 10px ;*/
font-family: futura-pt, sans-serif;
font-weight: 600;
text-align: center ;
color: #FFFFFF; ;
border-radius :100px ;
/*margin:20px 10px ;*/
/* margin-left: 89% ;
justify-content: center;
vertical-align: middle;
*/
align-items: center;
display: table;
height: $div-height;
box-shadow: 4px 4px 6px gray;
}
@media screen and (max-width: 768px) {
.wpc20th_button_list {
width : 95% ;
font-size: 15px ;
height:40px ;
/*padding-top: 10px ;
padding-bottom: 10px ;
margin: 5px 10px ;*/
justify-content: center;
align-items: center;
margin: auto 5px ;
vertical-align: middle;
}
}
@media screen and (max-width: 480px) {
.wpc20th_button_list {
width : 95% ;
height:40px ;
font-size: 15px ;
/*
padding-top: 5px ;
padding-bottom: 5px ;*/
margin: auto 5px ;
/*margin: 0 5% 10px 5% ;*/
justify-content: center;
align-items: center;
vertical-align: middle;
}
}
/*中のスパンタグ*/
.wpc20th_buttontxt {
width: 400px ;
font-size: 20px ;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400 ;
align-items: center ;
letter-spacing: 0.2em ;
/*margin: 20px 30px;
padding-top: -50px ;
justify-content: center;
*/
line-height: 1.2em;
display: table-cell;
text-align:center ;
/* display: table-cell;
top:30px ;*/
vertical-align: middle;
}
@media screen and (max-width: 768px) {
.wpc20th_buttontxt {
font-size: 19px ;
text-align:center ;
line-height: 1.2em ;
margin: 50px 30px;
padding-top: 0px ;
display: table-cell;
}
}
@media screen and (max-width: 480px) {
.wpc20th_buttontxt {
font-size: 13px ;
text-align:center ;
line-height: 1.2em ;
margin: 50px 30px;
padding-top: 0px ;
display: table-cell;
}
}
/*コンテンツ上部テキスト*/
.wpc20th_com {
max-width: 1000px ;
margin-bottom: 20px ;
margin-top: -100px ;
letter-spacing: 0.1em ;
}
@media screen and (max-width: 768px) {
.wpc20th_com {
width: 90% ;
margin-top: -50px ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_com {
width: 90% ;
margin-top: -50px ;
}
}
.wpc20th_com h3 {
font-size: 30px ;
font-weight: 700 ;
margin-bottom: 0px ;
padding-top: 20px ;
}
@media screen and (max-width: 768px) {
.wpc20th_com h3 {
width: 100% ;
font-size: 25px ;
font-weight: 600 ;
margin-bottom: 0px ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_com h3 {
width: 100% ;
font-size: 20px ;
font-weight: 600 ;
margin-bottom: 0px ;
}
}
.wpc20th_com p {
width: 100% ;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400 ;
font-size: 25px ;
text-align:center ;
letter-spacing: 0.1em ;
}
@media screen and (max-width: 768px) {
.wpc20th_com p {
width: 100% ;
font-size: 17px ;
text-align:left ;
letter-spacing: 0.1em ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_com p {
font-size: 17px ;
text-align:left ;
letter-spacing: 0.1em ;
width: 100% ;
}
}
/*下部詳細テキスト*/
.wpc20th_detail {
width: 800px ;
font-size: 20px ;
font-weight: 400 ;
font-family: "Noto Sans JP", sans-serif;
margin-top: 20px ;
align-content: left ;
align: center ;
text-align :center ;
}
@media screen and (max-width: 768px) {
.wpc20th_detail {
width: 95% ;
font-size: 16px ;
align-content: left ;
margin-right: 50% ;
padding: 0px 5% ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_detail {
width: 95% ;
font-size: 14px ;
align-content: left ;
margin-right: 50% ;
padding: 0px 5% ;
}
}
.wpc20th_detail h3 {
text-align :left ;
font-size: 20px ;
font-weight: 400 ;
align: left ;
}
.wpc20th_detail02 {
font-size: 20px ;
font-weight: 400 ;
font-family: "Noto Sans JP", sans-serif;
margin-top: 0px ;
align: center ;
letter-spacing: 0.1em ;
}
@media screen and (max-width: 768px) {
.wpc20th_detail02 {
width: 100% ;
font-size: 17px ;
align-content: center ;
margin-right: 50% ;
margin-top: 5px ;
margin-bottom: -20px ;
align: center ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_detail02 {
width: 100% ;
font-size: 17px ;
align-content: center ;
margin-right: 50% ;
margin-top: 5px ;
margin-bottom: -20px ;
align: center ;
}
}
/*背景白*/
/*ラウンド背景白*/
.wpc20th_bg_round {
background-color: #ffffff ;
max-width: 1000px ;
margin: 30px auto 0px ;
padding: 10px 20px ;
border-radius: 150px 150px 150px 150px;
position: relative;
}
@media screen and (max-width: 768px) {
.wpc20th_bg_round {
/*position:relative; z-index: 1; */
width: 100%;
padding :-20px 5px;
display: block;
text-align: center;
border-radius: 100px 100px 100px 100px;
/*position: relative;*/
}
}
@media screen and (max-width: 480px) {
.wpc20th_bg_round {
/*position:relative; z-index: 1; */
width: 100%;
padding :-20px 5px;
display: block;
text-align: center;
border-radius: 100px 100px 100px 100px;
/*position: relative;*/
}
}
.wpc20th_midashi {
align-content: center ;
font-family: "Noto Sans JP", sans-serif;
font-weight: 500 ;
font-size: 30px ;
text-align:center ;
line-height: 1.5em ;
letter-spacing: 0.2em ;
}
@media screen and (max-width: 768px) {
.wpc20th_midashi {
width: 100% ;
font-size: 20px ;
text-align:center ;
letter-spacing: 0.1em ;
margin-bottom: 20px ;
line-height: 1.4em ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_midashi {
width: 100% ;
font-size: 20px ;
text-align:center ;
letter-spacing: 0.1em ;
margin-bottom: 20px ;
line-height: 1.4em ;
}
}
/*アニバーサリーサークルロゴ*/
.20thcircle_svg {
width: 350px ;
margin-top: 50px ;
}
@media screen and (max-width: 480px) {
.20thcircle_svg {
width: 80%;
}
}
.20th_title_svg {
background-size: 100%;
position: relative ;
top:80%;
left: 50px;
}
@media screen and (max-width: 480px) {
.20th_title_svg {
width: 60%;
position: absolute; /* 要素の配置方法を指定 */
left: 50px; /* 左からの位置指定 */
top: 100px; /* 上からの位置指定 */
}
}
.wpc20th_bg .20th_title01 {
/*position:absolute; top:30%x; z-index: 2;
transform:translate(40%,40%); */
/*
width: 100vw;
margin: 0 calc(50% - 50vw);*/
/* position: absolute;
top: 100px;
left: 15px;
/*margin: 0 calc(50% - 50vw);*/
position: absolute top:100px ;
z-index: 4;
}
@media screen and (max-width: 480px) {
.wpc20th_bg .20th_title01 {
width: 60%;
position: absolute; top:100px ; /* 要素の配置方法を指定 */
/* 左からの位置指定 */
/* 上からの位置指定 */
}
}
.20th_title02 {
position: absolute ;
top:100px;
top: 50px;
left: 15px;
}
@media screen and (max-width: 768px) {
.20th_title02 {
width: 100%;
position: absolute; /* 要素の配置方法を指定 */
left: 50%; /* 左からの位置指定 */
top: 100px; /* 上からの位置指定 */
}
}
@media screen and (max-width: 480px) {
.20th_title02 {
width: 100%;
position: absolute; /* 要素の配置方法を指定 */
left: 50%; /* 左からの位置指定 */
top: 100px; /* 上からの位置指定 */
}
}
.20th_title03 {
position: absolute;
top: 50px;
left: 15px;
}
@media screen and (max-width: 480px) {
.20th_title03 {
width: 80%;
position: absolute; /* 要素の配置方法を指定 */
left: 50px; /* 左からの位置指定 */
top: 20%; /* 上からの位置指定 */
}
}
.imagechara {
margin-top: -50px ;
margin-bottom: -20px ;
}
@media screen and (max-width: 480px) {
.imagechara {
margin-top: -20px ;
margin-bottom: -10px ;
}
}
/*これ本文*/
.wpc20th0401_h2 {
/* font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic";*/
font-family: "Noto Sans JP", sans-serif;
font-weight: 400 ;
font-size: 25px ;
text-align:center ;
letter-spacing: 0.2em ;
}
@media screen and (max-width: 768px) {
.wpc20th0401_h2 {
font-size: 17px ;
text-align:left ;
letter-spacing: 0.2em ;
}
}
@media screen and (max-width: 480px) {
.wpc20th0401_h2 {
font-size: 17px ;
/*wpc_fashion_slg500
background-image: url(../../brand/wpc-20th/img/wpc_fashion_slg500.svg);
*/
text-align:left ;
letter-spacing: 0.2em ;
}
}
/*周年終了しました文言*/
.wpc20th_fin {
margin-top: -20px ;
margin-bottom: 20px ;
font-size: 18px ;
}
@media screen and (max-width: 768px) {
.wpc20th_fin {
font-size: 15px ;
margin-top: 0px ;
}
}
@media screen and (max-width: 480px) {
.wpc20th_fin {
font-size: 15px ;
margin-top: 0px ;
}
}
/*------周年ページVIDEO-------*/
#video20th {
overflow: hidden;
text-align: center;
top: 0;
left: 0;
width: calc(100% - 200px);
height: 100%;
z-index: -1;
position: fixed;
/* margin-top: -50px !important;*/
padding-top: 78px !important;
}
@media screen and (max-width: 480px) {
#video20th {
height: 42% !important;
padding-top: 60px !important;
}
}
.video-stream {
width: 100% !important;
}
/* ----------------- ここまで20周年ページ ----------------- */
/* ----------------- ここから24ssコレクションページ ----------------- */
.parasolGarelly__24ss {
display: flex;
justify-content: center;
align-items: center;
align-content: center ;
margin:auto;
}
@media screen and (max-width: 480px) {
.parasolGarelly__24ss {
display: flex;
justify-content: center;
align-items: center;
margin-top: -15px ;
margin-bottom: 5px ;
}
}
.parasolGarelly__24ssbutton {
width: 120px ;
background: #c8687d ;
float:left ;
/* align-items: left ;*/
font-size: 23px ;
/* margin: 10px 20px 0px 10px;*/
padding: 0px 10px ;
font-family: futura-pt, sans-serif;
font-weight: 600;
text-align: center;
color: #FFFFFF; ;
border-radius :30px ;
margin:20px 10px ;
/* margin-left: 89% ;*/
}
@media screen and (max-width: 480px) {
.parasolGarelly__24ssbutton {
font-size: 15px ;
float:left ;
padding-top: 5px ;
padding-bottom: 5px ;
margin:auto;
}
}
@media screen and (max-width: 480px) {
.parasolGarelly__24ssbutton {
font-size: 18px ;
float: right;
margin: 0 5% 10px 5% ;
padding-top: 5px ;
padding-bottom: 5px ;
margin: 5px 10px ;
}
}
/* ----------------- これ効いてない ----------------- */
.24sscollection {
/*background: #ffffff;*/
padding-bottom: 10px;
margin-top: 20px ;
}
.24ssitempageBox {
max-width: 1000px;
width: 100%;
margin: 76px auto 0;
/*background: #fff;*/
padding: 10px;
position: relative;
align: center ;
}
.24ssitempageBoxInner {
border: 1px solid #c6cfdf;
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
@media screen and (max-width: 480px) {
.24ssitempageBoxInner {
padding: 50px 20px;
margin-right: 0;
margin-bottom: 0;
}
}
/*
.24ssitempageBoxInner fff {
border: 1px solid #775747;
padding: 50px 40px;
margin-right: -20px;
margin-bottom: -20px;
}
@media screen and (max-width: 480px) {
.24ssitempageBoxInner fff {
padding: 50px 20px;
margin-right: 0;
margin-bottom: 0;
}
}
*/
/*ここから商品名部分*/
.24ssitempage__fltBoxTxt p{
font-size: 16px;
font-family: futura-pt, sans-serif;
font-weight: 600;
text-align: center;
margin-left: 20px;
}
@media screen and (max-width: 480px) {
.24ssitempage__fltBoxTxt p{
margin-left: 0;
}
}
.24ssitempage__fltBoxTxt .item_name{
font-size: 27px;
font-family: futura-pt, sans-serif;
font-weight: 600;
line-height: 1.4;
letter-spacing: 1.5px;
margin-bottom: 10px;
display: block;
}
.24ssitempage__fltBoxTxt .item_size{
font-size: 14px;
font-weight: 500;
/* margin: -4px 0 -13px 0;*/
display: block;
}
/*サイズフルスクリーン*/
.24ssitempage__fltBoxTxtfull {
width: 100% ;
}
.24ssitempage__fltBoxTxtfull p{
font-size: 18px;
font-family: futura-pt, sans-serif;
font-weight: 600;
text-align: center;
margin-left: 20px;
}
@media screen and (max-width: 480px) {
.24ssitempage__fltBoxTxttfull p{
margin-left: 0;
font-size: 12px;
}
}
.24ssitempage__fltBoxTxtfull .item_name{
font-size: 25px;
font-family: futura-pt, sans-serif;
font-weight: 800;
line-height: 1.4;
letter-spacing: 1.5px;
margin-top: 12px;
margin-bottom: -10px;
display: block;
text-align: center ;
}
@media screen and (min-width: 480px) {
.24ssitempage__fltBoxTxttfull .item_name{
font-size: 14px;
}
}
.24ssitempage__fltBoxTxtfull .item_size{
font-size: 14px;
font-weight: 500;
/* margin: -4px 0 -13px 0;*/
display: block;
}
/*24ssスラッシュサイズ調整*/
.slash_size {
font-size: 80% ;
font-weight: 700 ;
bottom : 6px ;
position: relative;
}
@media screen and (max-width: 480px) {
.slash_size {
bottom : 4px ;
}
}
/*タイマーテスト*/
.js-time_limited{
display: none;
}
.js-time_limited_fire{
display: block;
}
/* ----------------- ここまで24ssコレクションページ ----------------- */
/*----------------- IZA24ssテスト----------------- */
.izaBox {
max-width: 1000px;
width: 100%;
margin: 0 auto 128px auto;
padding: 0 55px 0 55px;
align: center ;
}
@media screen and (max-width: 768px){
.izaBox {
padding: 0;
margin-bottom: 0px ;
}
}
.izaBox a{
color:#000;
}
.izaBox a:hover{
opacity: 0.8;
}
.izaTopMv {
max-width: 1200px;
width: 100%;
margin-top: 150px;
text-align: center;
align-content: center ;
}
@media screen and (max-width: 768px){
.izaTopMv {
margin: 35px auto 0 auto;
margin:auto ;
margin-bottom: 200px ;
}
}
/*メイン画像*/
.iza_main {
width: 960px ;
margin :auto ;
padding-top: 40px;
}
@media screen and (max-width: 768px){
.iza_main{
width : 100% ;
}
}
/*ここ冒頭のロゴ部分*/
.iza_logo {
max-width: 800px ;
margin-top: -120px;
padding-top: -50px auto;
margin-left: auto ;
margin-right: auto ;
}
@media screen and (max-width: 768px){
.iza_logo {
width : 100% ;
margin-top: 0px;
text-align: left;
}
}
.iza_logo h2{
max-width: 800px ;
margin:-50px 0;
padding-top: -50px auto;
}
@media screen and (max-width: 768px){
.iza_logo h2{
width : 100% ;
margin: 40px 33px 60px 33px;
text-align: left;
}
}
/*ここエンドのロゴ部分*/
.iza_logoend {
max-width: 800px ;
margin-top: 0px;
padding-top: 0px auto;
margin-left: auto ;
margin-right: auto ;
margin-bottom: 50px ;
}
@media screen and (max-width: 768px){
.iza_logoend {
width : 100% ;
margin-top: 0px;
text-align: left;
}
}
.iza_logoend h2{
max-width: 800px ;
margin:-50px 0;
padding-top: -50px auto;
}
@media screen and (max-width: 768px){
.iza_logoend h2{
width : 100% ;
text-align: left;
}
}
/*IZAストアリスト*/
.izastorelistBox {
position: relative;
margin: -200px 0px ;
}
@media screen and (max-width: 480px) {
.izastorelistBox {
margin: -220px 0px -150px;
}
}
.mv_storelist .mv__nakamenSubTitle {
background: #ffffff;
color: #000;
/*元はbackground: #c8c1ff*/
}
/*
.izastorelistBox::after {
content: "";
background: #ffffff;
position: absolute;
left: 0;
top: 0;
width: 111px;
height: 247px;
}
@media screen and (max-width: 480px) {
.izastorelistBox::after {
width: 60px;
}
}
*/
.izastorelistBox__list {
width: 80%;
padding: 80px 20px 180px;
position: relative;
z-index: 10;
margin: auto ;
}
@media screen and (max-width: 480px) {
.izastorelistBox__list {
width: 100%;
padding: 20px 20px 70px;
/*元はpadding: 50px */
margin-top: 100px ;
}
}
.izastorelistBox__list li {
display: inline-block;
width: 20%;
padding: 0px;
transition: 0.4s;
/*元はpadd20px*/
}
@media screen and (max-width: 768px) {
.izastorelistBox__list li {
width: 50%;
padding: 5px;
}
}
@media screen and (max-width: 480px) {
.izastorelistBox__list li {
width: 50%;
padding: 5px;
}
}
.izastorelistBox__list li:hover {
opacity: 0.5;
}
/*ストアリストここまで*/
.izaBox__container{
margin: 50px 50px 125px 50px;
font-size: 21px;
line-height: 1.8;
text-align: center;
}
@media screen and (max-width: 768px){
.izaBox__container{
margin: 40px 33px 60px 33px;
text-align: left;
}
}
.izaBox__container .btn_square a {
padding: 17px 35px;
font-size: 16px;
font-family: futura-pt-bold, sans-serif;
font-weight: 700;
background-color: #000;
color: #fff;
}
@media screen and (max-width: 768px){
.izaBox__container .btn_square a {
padding: 15px 30px;
font-size: 14px;
}
}
.izaBox__container .btn_square{
margin-top: 60px;
text-align: center;
}
@media screen and (max-width: 768px){
.izaBox__container .btn_square{
margin: 50px 0 80px 0;
}
}
.izaBox__container03{
margin: 150px 50px 0px 50px;
}
.izaBox__container h3{
font-size: 23px;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: normal;
padding-bottom: 20px;
letter-spacing: 1pt;
}
@media screen and (max-width: 768px){
.izaBox__container h3{
font-size: 25px;
}
}
.izaBox__container03 h3{
font-size: 45px;
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: normal;
text-align: center;
padding-bottom: 65px;
letter-spacing: 1pt;
}
@media screen and (max-width: 768px){
.izaox__container03 h3{
font-size: 35px;
padding: 15px 0 25px 0;
}
}
.izaBox__photo ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 70px;
}
.izaBox__photo li{
width: 20%;
margin: 0 25px 30px 25px;
}
@media screen and (max-width: 768px){
.izaBox__photo li{
width: 40%;
margin: 10px 13px 0 13px;
}
}
.izaBox__photo li p{
text-align: center;
margin: 18px 0;
font-family: futura-pt, sans-serif;
font-size: 16px;
}
.izaSNSBox {
width: 800px ;
/**/margin-top: -100px ;
margin-right: 100px ;
margin-left: 110px ;
margin-bottom : 50px ;
padding: 0px ;
align-items: center;
}
@media screen and (max-width: 480px) {
.izaSNSBox {
width: 100% ;
padding: 20px 20px 70px;
margin: 100px auto -200px;
/*元はpadding: 50px */
}
}
.izaSNSBox__list {
padding: 80px 20px 180px;
/*position: relative;
z-index: 10;:?
/*margin-left: auto ;
align-items: center;
align-content: center ;
margin:auto;
*/
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 480px) {
.izaSNSBox__list {
padding: 20px 20px 70px;
/*元はpadding: 50px */
}
}
.izaSNSBox__list li {
float:left ;
/* display: inline-block;*/
width: 40%;
padding: 0px;
transition: 0.4s;
/*元はpadd20px*/
/*margin: auto ;*/
align-content: center ;
}
@media screen and (max-width: 768px) {
.izaSNSBox__list li {
float:left ;
padding: 5px;
width: 45%;
/* margin: auto ;*/
}
}
@media screen and (max-width: 480px) {
.izaSNSBox__list li {
width: 50%;
padding: 5px;
float:left ;
}
}
/*
.izaSNSBox__list li:hover {
opacity: 0.5;
}*/
/*
.izaSNSBox {
max-width: 1000px ;
margin: -100px auto 50px;
padding: 0px auto;
}
@media screen and (max-width: 480px) {
.izaSNSBox__list {
width: 100% ;
padding: 20px 20px 70px;
}
}
.izaSNSBox__list {
padding: 80px 20px 180px;
position: relative;
z-index: 10;
margin-left: auto ;
margin-right: auto ;
align-items: center;
}
@media screen and (max-width: 480px) {
.izaSNSBox__list {
padding: 20px 20px 70px;
}
}
.izaSNSBox__list li {
display: inline-block;
width: 35%;
padding: 5px;
transition: 0.4s;
}
@media screen and (max-width: 768px) {
.izaSNSBox__list li {
padding: 5px;
margin: auto ;
}
}
@media screen and (max-width: 480px) {
.izaSNSBox__list li {
width: 50%;
padding: 5px;
}
}
.izaSNSBox__list li:hover {
opacity: 0.5;
}*/
/*----------------- ここまでIZA24ssテスト----------------- */
/* ----------------- TOP_インスタ出力 ----------------- */
.fs-pt-column__item.instagram-js-based{
width: 25%;
display: inline-block;
padding: 15px;
}
.fs-pt-column{
margin: 40px 0;
}
.fs-pt-column.photo{
display: flex;
flex-wrap: wrap;
}
.fs-pt-column__image {
position: relative;
overflow: hidden;
padding-bottom: 100%;
display: block;
}
.fs-pt-column__image img,
.fs-pt-column__image video{
object-fit: cover;
position: absolute;
height: 100%;
width: 100%;
line-height: 1;
}
.fs-pt-column__item.instagram-js-based.js-based {
display: none;
}
@media screen and (max-width: 480px) {
.fs-pt-column__item.instagram-js-based{
width: 50% ;
padding: 8px;
}
.fs-pt-column{
padding: 0 8px;
}
}