/*
* YUKOYUKO NET LP
* style.css
*
*/
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 300;
src: url('/lp/assets/NotoSerifJP-Light.230c9cf1.otf') format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 400;
src: url('/lp/assets/NotoSerifJP-Light.230c9cf1.otf') format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 500;
src: url('/lp/assets/NotoSerifJP-Medium.ead14d3d.otf') format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 600;
src: url('/lp/assets/NotoSerifJP-Medium.ead14d3d.otf') format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 700;
src: url('/lp/assets/NotoSerifJP-Medium.ead14d3d.otf') format('opentype');
font-display: swap;
}
@font-face {
font-family: "YuGothic M";
src: local(Yu Gothic Medium);
}
/* --------------------------------
â–¡ body
-------------------------------- */
main>section.contents {
font-size: 19px;
font-size: 1.9rem;
/* ゴシック */
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "YuGothic M", "メイリオ", "ï¼ï¼³ Ｐゴシック", sans-serif;
background: #fcf5f5 url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/background.gif) 0 0 repeat;
color: #333;
}
main>section.contents em {
font-style: normal;
}
main>section.contents .gothic {
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "YuGothic M", "メイリオ", "ï¼ï¼³ Ｐゴシック", sans-serif;
}
main>section.contents .serif {
font-family: 'Noto Serif Japanese', "游明æœ", YuMincho, "ãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ ProN W3", "Hiragino Mincho ProN", "HG明æœE", "ï¼ï¼³ Ｐ明æœ", "ï¼ï¼³ 明æœ", serif;
}
main>section.contents .yuserif {
font-family: "游明æœ", YuMincho, 'Noto Serif Japanese', "ãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ ProN W3", "Hiragino Mincho ProN", "HG明æœE", "ï¼ï¼³ Ｐ明æœ", "ï¼ï¼³ 明æœ", serif;
}
main>section.contents>section,
main>section.contents>.chapter,
main>section.contents>.wide .container {
width: 1080px;
margin-left: auto;
margin-right: auto;
text-align: left;
box-sizing: border-box;
}
main>section.contents>section.wide,
main>section.contents>.chapter.wide {
width: 100%;
}
main>section.contents section:after,
main>section.contents .chapter:after {
clear: both;
display: block;
content: "";
}
/* --------------------------------
□ ボタンスタイル
-------------------------------- */
main>section.contents .buttonStyle {
text-align: center;
}
main>section.contents .buttonStyle a,
main>section.contents .buttonStyle>span {
position: relative;
display: inline-block;
text-decoration: none;
line-height: 1.1;
padding: 20px 40px;
margin: 0 auto;
color: #fff;
background: #874d6a 0 0 no-repeat;
transition: all 300ms 0s ease;
}
main>section.contents .buttonStyle a:hover,
main>section.contents .buttonStyle>span:hover {
background: #6a3c53;
}
main>section.contents .buttonStyle a span,
main>section.contents .buttonStyle>span span {
position: relative;
vertical-align: middle;
text-align: center;
font-size: 2.0rem;
font-size: 20px;
line-height: 1.1;
padding-right: 23px;
}
main>section.contents .buttonStyle.arrow>span span:before,
main>section.contents .buttonStyle.arrow a span:before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 2px;
margin-top: -7px;
width: 14px;
height: 14px;
border: 2px solid;
border-color: #fff #fff transparent transparent;
transform: rotate(45deg);
transition: all 300ms 0s ease;
}
main>section.contents .buttonStyle.arrow>span:hover span:before,
main>section.contents .buttonStyle.arrow a:hover span:before {
right: 0px;
}
/* --------------------------------
â–¡ accent
-------------------------------- */
main .accent {
box-sizing: border-box;
display: table;
width: 100%;
height: 620px;
}
main .accent h2 {
box-sizing: border-box;
display: table-cell;
text-align: center;
vertical-align: middle;
background: #fff url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/accent.jpg) 50% 100% no-repeat;
background-size: auto 100%;
}
main .accent h2 img {
animation: show 2s both;
animation-delay: 1s;
margin-right: 897px;
transition: all 300ms 0s ease;
}
/* --------------------------------
â–¡ intro
-------------------------------- */
main .intro {
position: relative;
padding: 80px 0 60px 0;
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/intro-decoration.png) 50% 40px no-repeat;
}
main .intro>.container .leadbox {
margin-bottom: 59px;
}
main .intro>.container .leadbox h3 {
position: relative;
z-index: 2;
margin-bottom: 23px;
font-size: 36px;
font-size: 3.6rem;
line-height: 1.6;
font-weight: 600;
text-align: center;
}
main .intro>.container .leadbox p.text {
font-size: 18px;
font-size: 1.8rem;
line-height: 1.8;
text-align: center;
margin-left: 60px;
margin-right: 60px;
}
/* --------------------------------
â–¡ outline
-------------------------------- */
main .intro ul.outline {
overflow: hidden;
margin-bottom: 60px;
}
main .intro ul.outline li {
float: left;
margin-left: 60px;
width: 510px;
}
main .intro ul.outline li:first-child {
margin-left: 0px;
}
main .intro ul.outline li dl dt {
position: relative;
margin-bottom: 30px;
font-size: 26px;
font-size: 2.6rem;
text-align: center;
color: #4d306a;
}
main .intro ul.outline li dl dt span {
display: block;
padding-top: 30px;
}
main .intro ul.outline li dl dt span em {
display: block;
font-size: 33px;
font-size: 3.3rem;
color: #f8c766;
padding-bottom: 12px;
}
main .intro ul.outline li dl dd {
font-size: 17px;
font-size: 1.7rem;
line-height: 1.8;
}
/* --------------------------------
â–¡ plan case
-------------------------------- */
main>section.contents>.case>.container,
#plan>.container {
box-sizing: border-box;
width: 1240px;
}
/* --------------------------------
â–¡ plan
-------------------------------- */
#plan {
margin-bottom: 75px;
}
#plan .visual {
margin: 0;
}
#plan .visual img {
width: 100%;
}
#plan>.container {
position: relative;
padding: 56px 80px;
margin-top: -130px;
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-header.png) 0 0 no-repeat, #fcfcfa url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-background.png) 0 0 repeat;
background-size: 100% auto;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.14);
}
#plan>.container>h3 {
position: relative;
box-sizing: border-box;
font-size: 41px;
font-size: 4.1rem;
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-decoration.png) 50% 50% no-repeat;
text-align: center;
color: #4d306a;
margin-bottom: 23px;
padding-bottom: 50px;
min-height: 161px;
}
#plan>.container>h3 em {
display: block;
}
#plan>.container>h3:before {
position: absolute;
bottom: 0;
left: 50%;
content: "";
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-line.png) 0 0 no-repeat;
background-size: 100% auto;
width: 105px;
height: 30px;
margin-left: -52px;
}
#plan>.container>p.text {
margin-bottom: 60px;
font-size: 19px;
font-size: 1.9rem;
line-height: 1.8;
text-align: center;
}
#plan>.container>p.map {
margin-bottom: 70px;
}
/* --------------------------------
â–¡ plan-intro
-------------------------------- */
#plan-intro {
margin-bottom: 80px;
}
#plan-intro .explain {
float: right;
width: 762px;
}
#plan-intro .explain h4 {
font-size: 24px;
font-size: 2.4rem;
margin-bottom: 20px;
}
#plan-intro .explain p.text {
font-size: 17px;
font-size: 1.7rem;
line-height: 1.8;
}
#plan-intro .explain p.text em {
color: #990033;
}
#plan-intro>p.image {
float: left;
}
/* --------------------------------
â–¡ schedule
-------------------------------- */
#schedule h5 {
font-size: 29px;
font-size: 2.9rem;
text-align: center;
box-sizing: border-box;
min-height: 171px;
margin-bottom: 70px;
padding: 11px 0;
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-sign.png) 90% 50% no-repeat;
}
#schedule h5 em {
display: inline-block;
position: relative;
padding: 38px 0;
color: #4d306a;
}
#schedule h5 em:before {
position: absolute;
top: 0;
left: 50%;
content: "";
height: 7px;
width: 250px;
margin-left: -125px;
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/paln-schedule-line.png) 0 0 no-repeat;
}
#schedule h5 em:after {
position: absolute;
bottom: 0;
left: 50%;
content: "";
height: 7px;
width: 250px;
margin-left: -125px;
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/paln-schedule-line.png) 0 0 no-repeat;
}
/* â—‡ route
-------------------------------- */
#schedule .route {
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-conductor.png) 33px 0 repeat-y;
}
#schedule .scene p.scene {
text-align: center;
padding-bottom: 90px;
background: #fcfcfa url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-background.png) 0 0 repeat;
}
#schedule .scene>.division {
width: 100%;
display: table;
}
#schedule .scene>.division>* {
display: table-cell;
}
/* â—‡ no
-------------------------------- */
#schedule .scene>.division>.no {
margin: 0;
width: 120px;
}
#schedule .scene>.division>.no>span {
display: block;
color: #4d306a;
background: #fcfcfa;
font-family: "Adobe Garamond Pro", "游明æœ", YuMincho, 'Noto Serif Japanese', "ãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ ProN W3", "Hiragino Mincho ProN", "HG明æœE", "ï¼ï¼³ Ｐ明æœ", "ï¼ï¼³ 明æœ", serif;
line-height: 1;
font-size: 75px;
font-size: 7.5rem;
padding: 15px 0 3px 0;
}
#schedule .scene>.division>.no>span img {
margin-left: 25px;
}
/* â—‡ detail
-------------------------------- */
#schedule .scene>.division>.detail {
padding-top: 15px;
vertical-align: top;
padding-bottom: 60px;
}
#schedule .scene>.division>.detail h6 {
font-size: 30px;
font-size: 3.0rem;
padding-left: 43px;
margin-bottom: 27px;
background: 0 0 no-repeat;
}
#schedule .scene>.division.spa>.detail h6 {
color: #060a46;
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-spa-icon.png);
}
#schedule .scene>.division.spot>.detail h6 {
color: #874d6a;
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-spot-icon.png);
}
#schedule .scene>.division.inn>.detail h6 {
color: #4d306a;
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-inn-icon.png);
}
#schedule .scene>.division>.detail p {
font-size: 17px;
font-size: 1.7rem;
line-height: 1.8;
}
#schedule .scene>.division>.detail.sideStyle .explain {
float: left;
width: 510px;
}
#schedule .scene>.division>.detail.sideStyle .image {
float: right;
}
#schedule .scene>.division>.detail.pickupStyle p.image {
margin-bottom: 37px;
}
#schedule .scene>.division>.detail.pickupStyle .explain>p.text {
position: relative;
margin: 0;
padding-right: 265px;
}
#schedule .scene>.division>.detail.pickupStyle .explain>p.text:before {
position: absolute;
top: -90px;
right: 30px;
z-index: 1;
content: "";
background: 0 0 no-repeat;
}
/* â—‡ night
-------------------------------- */
#schedule .scene.night p.scene {
padding-bottom: 47px;
background: transparent;
}
/* --------------------------------
â–¡ schedule1
-------------------------------- */
#schedule .scene>#schedule1>.no>span {
position: relative;
}
#schedule .scene>#schedule1>.no>span:before {
content: "";
position: absolute;
top: -10px;
left: -9px;
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-start.png) 0 0 no-repeat;
background-size: 100% auto;
width: 89px;
height: 22px;
margin-left: 0;
}
/* --------------------------------
â–¡ schedule2
-------------------------------- */
#schedule .scene>#schedule2>.detail .explain>p.text:before {
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan2-decoration.png);
width: 201px;
height: 253px;
}
/* --------------------------------
â–¡ schedule4
-------------------------------- */
#schedule .scene>#schedule4>.detail .explain {
width: 420px;
}
#schedule .scene>#schedule4>.detail .explain .picture {
text-align: center;
}
/* --------------------------------
â–¡ schedule6
-------------------------------- */
#schedule .scene>#schedule6>.detail .explain>p.text:before {
top: -104px;
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan6-decoration.png);
width: 200px;
height: 266px;
}
/* --------------------------------
â–¡ schedule7
-------------------------------- */
#schedule .scene>#schedule7>.detail .explain>p.text:before {
top: -61px;
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan7-decoration.png);
width: 211px;
height: 211px;
}
/* --------------------------------
â–¡ scheduleInn1
-------------------------------- */
#schedule .scene>#scheduleInn1>.no span {
position: relative;
margin-top: -10px;
font-size: 10px;
padding: 30px 0;
}
#schedule .scene>#scheduleInn1>.no span img {
display: block;
vertical-align: top;
}
/* --------------------------------
â–¡ scheduleInn2
-------------------------------- */
#schedule .scene>#scheduleInn2>.no {
background: #fcfcfa url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/plan-background.png) 0 0 repeat;
}
#schedule .scene>#scheduleInn2>.no span {
position: relative;
margin-top: -10px;
font-size: 10px;
padding: 30px 0;
}
#schedule .scene>#scheduleInn2>.no span img {
display: block;
vertical-align: top;
}
/* --------------------------------
â–¡ message
-------------------------------- */
main .intro p.message {
box-sizing: border-box;
font-size: 32px;
font-size: 3.2rem;
line-height: 1.8;
font-weight: 300;
text-align: center;
margin: 0;
}
/* --------------------------------
â–¡ case
-------------------------------- */
main .case {
position: relative;
margin-bottom: 45px;
}
main .case:last-child {
margin-bottom: 0;
}
main .case .leading {
position: relative;
display: table;
width: 100%;
height: 480px;
margin-bottom: 0px;
background: #efefef 0 50% no-repeat;
background-size: 100% auto;
}
main .case .leading .inner {
display: table-cell;
text-align: left;
vertical-align: middle;
}
main .case .leading h3,
main .case .leading p {
line-height: 1.8;
color: #fff;
font-weight: 100;
}
main .case .leading h3 {
display: inline-block;
font-size: 31px;
font-size: 3.1rem;
line-height: 1.5;
padding: 23px;
text-align: left;
background: rgba(0, 0, 0, 0.6);
}
main .case .leading p.text {
margin-bottom: 36px;
line-height: 1.8;
font-size: 19px;
font-size: 1.9rem;
text-align: center;
font-weight: 300;
}
main .case dd,
main .case p {
line-height: 1.8;
}
/* â–¡ item
-------------------------------- */
main .case .item {
position: relative;
padding: 60px 108px 65px 108px;
background: #fff url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/case-decoration.png) 0 -20px no-repeat;
}
main .case .item:last-child {
margin-bottom: 0;
}
main .case .item .division {
margin-bottom: 75px;
}
main .case .item .division:after {
display: block;
clear: both;
content: "";
}
main .case .item .division:last-child {
margin-bottom: 60px;
}
main .case .item .division .explain {
float: left;
width: 652px;
}
main .case .item .division .explain h5 {
font-size: 24px;
font-size: 2.4rem;
margin-bottom: 22px;
}
main .case .item .division .explain p.text {
font-size: 17px;
font-size: 1.7rem;
line-height: 1.8;
}
main .case .item .division>.image {
float: right;
}
main .case .item .division.leftStyle .explain {
float: right;
}
main .case .item .division.leftStyle>.image {
float: left;
}
/*
â–¡ lead
-------------------------------- */
main .case .item .lead .explain {
width: 726px;
}
main .case .item .lead .explain h4 {
font-size: 35px;
font-size: 3.5rem;
margin-bottom: 25px;
}
main .case .item .lead .explain h4 a {
text-decoration: none;
color: #4d306a;
}
main .case .item .lead>p.image {
position: relative;
margin-top: -113px;
}
/*
â–¡ buttonStyle
-------------------------------- */
main .case .item>.buttonStyle {
clear: both;
}
main .case .item>.buttonStyle a {
min-width: 50%;
}
/* --------------------------------
â–¡ case1
-------------------------------- */
main #case1 {}
main #case1 .leading {
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/case1-1_pc.png);
}
/* --------------------------------
â–¡ case2
-------------------------------- */
main #case2 {}
main #case2 .leading {
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/case2-1_pc.png)
}
/* --------------------------------
â–¡ case3
-------------------------------- */
main #case3 {
margin-bottom: 0;
}
main #case3 .leading {
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/case3-1_pc.png)
}
/* --------------------------------
â–¡ otherInn
-------------------------------- */
main #otherInn {
position: relative;
padding: 70px 0;
}
main #otherInn h3 {
font-size: 30px;
font-size: 3.0rem;
text-align: center;
margin: 0 auto;
margin-bottom: 40px;
text-align: center;
}
main #otherInn ul.items {
overflow: hidden;
margin-left: 0.5%;
}
main #otherInn ul.items li {
overflow: hidden;
position: relative;
float: left;
width: 50%;
display: table;
height: 235px;
background-color: #000;
}
main #otherInn ul.items li a {
height: 100%;
position: relative;
display: table-cell;
vertical-align: middle;
text-decoration: none;
color: #fff;
font-weight: 700;
padding-left: 30px;
padding-right: 55px;
font-size: 19px;
font-size: 1.9rem;
line-height: 1.2;
transition: all 300ms 0s ease;
}
main #otherInn ul.items li a span {
position: relative;
z-index: 1;
}
main #otherInn ul.items li a:before {
position: absolute;
content: "";
display: block;
width: 100%;
height: 235px;
top: 0;
left: 0;
background: 0 50% no-repeat;
background-size: cover;
transition: all .3s ease-out;
}
main #otherInn ul.items li a:hover {
opacity: 0.8;
}
main #otherInn ul.items li a:hover:before {
transform: scale(1.2);
}
main #otherInn ul.items li:after {
content: "";
position: absolute;
top: 50%;
right: 6%;
margin-top: -6px;
width: 14px;
height: 11px;
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/item-arrow.png) 0 50% no-repeat;
transition: all .6s ease;
}
main #otherInn ul.items li.item1 a:before {
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/other-item1.png);
}
main #otherInn ul.items li.item2 a:before {
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/other-item2.png);
}
/* 1280px以上
-------------------------------------------- */
@media only screen and (min-width: 1280px) {
main .accent h2 img {}
}
/* 1480px以上
-------------------------------------------- */
@media only screen and (min-width: 1480px) {
main .accent h2 img {}
}
/* --------------------------------
â–¡ スマートフォン用ã®è¨˜è¿°
-------------------------------- */
.pc {}
.sp,
span.textized,
br.spOnly {
display: none;
}
/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {
/* =================================
■共通指定
================================== */
body {
min-width: auto;
}
img {
max-width: 100%;
height: auto;
}
body .pc {
display: none;
}
.sp {
display: block;
}
span.textized {
display: inline;
}
br.spOnly {
display: inline-block;
}
br.pcOnly {
display: none;
}
.txtimg {
display: none;
}
/* --------------------------------
â–¡ 大æž
-------------------------------- */
main>section.contents {
overflow: hidden;
padding: 0;
}
main>section.contents>section,
main>section.contents>.chapter,
main>section.contents>.wide .container {
font-size: 100%;
width: auto;
}
main>section.contents>section.wide,
main>section.contents>.chapter.wide {
width: auto;
}
/* --------------------------------
□ ボタンスタイル
-------------------------------- */
main>section.contents .buttonStyle a,
main>section.contents .buttonStyle>span {
position: relative;
width: 100%;
padding: 8px 10px;
}
main>section.contents .buttonStyle a span,
main>section.contents .buttonStyle>span span {
display: inline-block;
font-size: 1.8rem;
font-size: 18px;
}
/* --------------------------------
â–¡ accent
-------------------------------- */
main .accent {
height: 210px;
margin: 0;
background: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/accent.jpg) 0 0 no-repeat;
background-position: 50% 0;
background-size: cover;
}
main .accent h2 {
margin: 0;
background: none;
padding-left: 5%;
}
main .accent h2 img {
width: 40%;
margin-top: 3%;
margin-right: 60%;
margin-bottom: 3%;
}
main .accent h2 {
box-sizing: border-box;
display: table-cell;
text-align: center;
vertical-align: middle;
background: #fff url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/accent.jpg) 50% 100% no-repeat;
background-size: auto 100%;
}
/* --------------------------------
â–¡ intro
-------------------------------- */
main .intro {
position: relative;
padding: 8% 0 6% 0;
background-image: url(https://s3-ap-northeast-1.amazonaws.com/contents.aws.yukoyuko.net/images/story_20181116/intro-decoration_sp.png);
background-size: 95% auto;
}
main .intro>.container .leadbox {
padding: 0 3% 0 3%;
margin-bottom: 6%;
}
main .intro>.container .leadbox h3 {
margin-bottom: 2.3%;
font-size: 21px;
font-size: 2.1rem;
}
main .intro>.container .leadbox p.text {
margin-left: 0;
margin-right: 0;
text-align: left;
}
/* --------------------------------
â–¡ outline
-------------------------------- */
main .intro ul.outline {
margin: 0 3% 4% 3%;
}
main .intro ul.outline li {
float: none;
width: auto;
margin-left: auto;
margin-bottom: 6%;
}
main .intro ul.outline li:last-child {
margin-bottom: 0;
}
main .intro ul.outline li dl dt {
margin-bottom: 4%;
font-size: 20px;
font-size: 2.0rem;
font-weight: 700;
}
main .intro ul.outline li dl dt span {
padding-top: 28px;
}
main .intro ul.outline li dl dt span em {
font-size: 24px;
font-size: 2.4rem;
padding-bottom: 12px;
}
main .intro ul.outline li dl dt span {
padding-top: 5%;
}
/* --------------------------------
â–¡ plan case
-------------------------------- */
main>section.contents>.case>.container,
#plan>.container {
box-sizing: border-box;
width: auto;
margin: 0 3%;
}
/* --------------------------------
â–¡ plan
-------------------------------- */
#plan {
margin-bottom: 7%;
}
#plan .visual {
margin: 0;
}
#plan>.container {
position: relative;
padding: 4% 4%;
margin-top: -1em;
}
#plan>.container>h3 {
font-size: 21px;
font-size: 2.1rem;
background: url(../images/plan-decoration.png) 50% 100% no-repeat;
background-size: 95% auto;
text-align: center;
color: #4d306a;
margin-bottom: 5%;
padding-bottom: 16%;
min-height: inherit;
}
#plan>.container>h3 img {
width: 50%;
}
#plan>.container>h3:before {
width: 30%;
margin-left: -15%;
}
#plan>.container>p.text {
margin-bottom: 6%;
font-size: 17px;
font-size: 1.7rem;
line-height: 1.8;
text-align: left;
}
#plan>.container>p.map {
margin-bottom: 7%;
}
/* --------------------------------
â–¡ plan-intro
-------------------------------- */
#plan-intro {
margin-bottom: 12%;
}
#plan-intro .explain {
float: none;
width: auto;
}
#plan-intro .explain h4 {
font-size: 20px;
font-size: 2.0rem;
margin-bottom: 2%;
}
#plan-intro>p.image {
margin-top: 2%;
float: none;
text-align: center;
}
/* --------------------------------
â–¡ schedule
-------------------------------- */
#schedule h5 {
font-size: 21px;
font-size: 2.1rem;
min-height: inherit;
margin-bottom: 7%;
padding: 11px 0;
background-size: auto 95%;
}
#schedule h5 em {
padding: 15px 0;
}
/* â—‡ route
-------------------------------- */
#schedule .route {
background: url(../images/plan-conductor.png) 18px 0 repeat-y;
}
#schedule .scene p.scene {
padding-bottom: 7%;
}
/* â—‡ no
-------------------------------- */
#schedule .scene>.division>.no {
margin: 0;
width: 15%;
}
#schedule .scene>.division>.no>span {
font-size: 40px;
font-size: 4.0rem;
}
#schedule .scene>.division>.no>span img {
margin-left: 8px;
}
/* â—‡ detail
-------------------------------- */
#schedule .scene>.division>.detail {
padding-top: 15px;
vertical-align: top;
padding-bottom: 10%;
}
#schedule .scene>.division>.detail h6 {
font-size: 20px;
font-size: 2.0rem;
padding-left: 32px;
margin-bottom: 5%;
background: 0 0 no-repeat;
background-size: auto 1.2em;
}
#schedule .scene>.division>.detail.sideStyle .explain {
float: none;
width: auto;
}
#schedule .scene>.division>.detail.sideStyle .image {
float: none;
margin-top: 2%;
}
#schedule .scene>.division>.detail.pickupStyle p.image {
margin-bottom: 27px;
}
#schedule .scene>.division>.detail.pickupStyle .explain>p.text {
position: relative;
margin: 0;
padding-right: 0;
}
#schedule .scene>.division>.detail.pickupStyle .explain>p.text:before {
position: static;
float: right;
background-size: auto 17vh;
background-position: 50% 50%;
margin-top: -57px;
margin-right: 4%;
}
/* â—‡ night
-------------------------------- */
#schedule .scene.night p.scene {
padding-bottom: 4%;
background: #fcfcfa url(../images/plan-background.png) 0 0 repeat;
}
/* --------------------------------
â–¡ schedule1
-------------------------------- */
#schedule .scene>#schedule1>.no>span:before {
top: -10px;
left: -2px;
width: 85%;
margin-left: 0;
background-position: 0 100%;
}
/* --------------------------------
â–¡ schedule2
-------------------------------- */
#schedule .scene>#schedule2>.detail .explain>p.text:before {
width: 30%;
height: 17vh;
}
/* --------------------------------
â–¡ schedule4
-------------------------------- */
#schedule .scene>#schedule4>.detail .explain {
width: auto;
}
#schedule .scene>#schedule4>.detail .explain .picture {
text-align: center;
margin-bottom: 3%;
}
/* --------------------------------
â–¡ schedule6
-------------------------------- */
#schedule .scene>#schedule6>.detail .explain>p.text:before {
width: 30%;
height: 17vh;
}
/* --------------------------------
â–¡ schedule7
-------------------------------- */
#schedule .scene>#schedule7>.detail .explain>p.text:before {
width: 30%;
height: 13vh;
background-size: auto 10vh;
}
/* --------------------------------
â–¡ scheduleInn1
-------------------------------- */
#schedule .scene>#scheduleInn1>.no span {
margin-top: 0px;
padding: 17px 0;
}
#schedule .scene>#scheduleInn1>.no span img {
display: block;
vertical-align: top;
}
/* --------------------------------
â–¡ scheduleInn2
-------------------------------- */
#schedule .scene>#scheduleInn2>.no {
background: #fcfcfa url(../images/plan-background.png) 0 0 repeat;
}
#schedule .scene>#scheduleInn2>.no span {
margin-top: 0px;
padding: 17px 0;
}
#schedule .scene>#scheduleInn2>.no span img {
display: block;
vertical-align: top;
}
#schedule .scene>#scheduleInn2>.detail {
padding-bottom: 0;
}
/* --------------------------------
â–¡ message
-------------------------------- */
main .intro p.message {
font-size: 19px;
font-size: 1.9rem;
line-height: 1.8;
}
/* --------------------------------
â–¡ case
-------------------------------- */
main .case {
position: relative;
padding-bottom: 0;
}
main .case .leading {
display: table;
position: relative;
box-sizing: border-box;
margin-bottom: 0;
position: relative;
height: 242px;
min-height: 242px;
width: 100%;
background-size: 180% auto;
}
main .case .leading h3 {
font-size: 20px;
font-size: 2.0rem;
line-height: 1.6;
letter-spacing: 0;
padding: 3%;
width: 88%;
}
main .case .leading p.text {
position: relative;
color: #fff;
text-align: left;
padding: 2% 4%;
margin-bottom: 0;
font-weight: 300;
text-shadow: initial;
}
main .case h3 em,
main .case p.text em {
line-height: 1.3;
}
main .case p.text em {
font-weight: 700;
}
/* â–¡ item
-------------------------------- */
main .case .item {
margin-top: 0px;
padding: 6% 3% 6% 3%;
margin: 0;
}
main .case .item:last-child {
margin-bottom: 0;
}
main .case .item .division {
margin-bottom: 7%;
}
main .case .item .division:last-child {
margin-bottom: 6%;
}
main .case .item .division .explain {
float: none;
width: auto;
}
main .case .item .division .explain h5 {
font-size: 20px;
font-size: 2.0rem;
margin-bottom: 2%;
}
main .case .item .division>.image {
float: none;
margin-top: 2%;
text-align: center;
}
main .case .item .division>.image img {
width: 90%;
}
main .case .item .division.leftStyle .explain {
float: none;
}
main .case .item .division.leftStyle>.image {
float: none;
}
/*
â–¡ lead
-------------------------------- */
main .case .item .lead .explain {
width: auto;
}
main .case .item .lead .explain h4 {
font-size: 21px;
font-size: 2.1rem;
margin-bottom: 2%;
}
main .case .item .lead>p.image {
margin-top: 2%;
text-align: center;
}
main .case .item .lead>p.image img {
width: 90%;
}
/*
â–¡ buttonStyle
-------------------------------- */
main .case .item>.buttonStyle {
clear: both;
}
main .case .item>.buttonStyle a {
min-width: 50%;
}
/* --------------------------------
â–¡ case1
-------------------------------- */
main #case1 .leading {
background-image: url(../images/case1-1_pc.png);
}
/* --------------------------------
â–¡ case2
-------------------------------- */
main #case2 .leading {
background-image: url(../images/case2-1_pc.png)
}
/* --------------------------------
â–¡ case3
-------------------------------- */
main #case3 {
padding-bottom: 6%;
}
main #case3 .leading {
background-image: url(../images/case3-1_pc.png)
}
/* --------------------------------
â–¡ otherInn
-------------------------------- */
main #otherInn {
padding-top: 7%;
padding-bottom: 0;
}
main #otherInn h3 {
font-size: 24px;
font-size: 2.4rem;
margin-bottom: 4%;
}
main #otherInn ul.items {
margin-left: 0;
}
main #otherInn ul.items li {
position: relative;
float: left;
width: auto;
margin-left: 0;
margin-bottom: 0;
display: table;
width: 100%;
height: 140px;
}
main #otherInn ul.items li a {
padding-left: 42px;
padding-right: 55px;
font-size: 20px;
font-size: 2.0rem;
}
main #otherInn ul.items li a:before {
height: 140px;
}
main #otherInn ul.items li a:hover:before {
transform: scale(1.0);
}
}
/* --------------------------------
â–¡ ãã®ä»–ã®æ¸©æ³‰ã‚¹ãƒˆãƒ¼ãƒªãƒ¼
-------------------------------- */
main>section.contents>.pageBlock-special {
padding-top: 80px;
background: #fff;
}
main>section.contents>.pageBlock-special h3 {
text-align: center;
margin-bottom: 30px;
font-size: 24px;
font-size: 2.4rem;
font-weight: 700;
}
.c-concierge {
background: #fff;
}
@media screen and (max-width:767px) {
main>section.contents>.pageBlock-special {
overflow: hidden;
}
main>section.contents>.pageBlock-special h3 {
margin-bottom: 3%;
font-size: 21px;
font-size: 2.1rem;
}
}
/* --------------------------------
â–¡ slick
-------------------------------- */
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
@media screen and (min-width:768px),
print {
.slick-slider.is-unslickPC {
padding-bottom: 0
}
.slick-slider.is-unslickPC .slick-track {
width: auto !important
}
.slick-slider.is-unslickPC .slick-dots {
display: none
}
}
@media screen and (max-width:767px) {
.slick-slider.is-unslick {
justify-content: center
}
.slick-slider.is-unslick .slick-list {
padding: 0 15px !important;
}
.slick-slider.is-unslick .c-cardItem,
.slick-slider.is-unslick .slick-track {
width: 100% !important;
margin: 0
}
.slick-slider.is-unslick+.js-cardSlidePager {
display: none
}
}
.slick-arrow {
font-size: 0;
position: absolute;
z-index: 10;
display: block;
overflow: hidden;
width: 60px;
height: 60px;
margin: auto 0;
transition: all .3s;
white-space: nowrap;
text-indent: 100%;
border-radius: 50%
}
@media screen and (max-width:767px) {
.slick-arrow {
width: 40px;
height: 40px
}
}
.slick-arrow:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background: no-repeat 50% 50%;
background-size: 24px 24px
}
.slick-prev {
left: -30px
}
.slick-prev:before {
background-image: url(https://www.yukoyuko.net/images/common/icon_arw_l_white.svg)
}
.slick-next {
right: -30px
}
.slick-next:before {
background-image: url(https://www.yukoyuko.net/images/common/icon_arw_r_white.svg)
}
.slick-dots {
font-size: 0;
line-height: 1;
letter-spacing: -.4em
}
.slick-dots li {
display: inline-block;
letter-spacing: 0
}
.slick-dots button {
font-size: 0;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
white-space: nowrap;
text-indent: 100%
}
.pageBlock .slick-slider.is-unslickPC:after,
.pageBlock .slick-slider.is-unslickPC:before {
display: none
}
@media screen and (max-width:767px) {
.pageBlock .slick-slider {
margin-right: -15px;
margin-left: -15px
}
}
@media screen and (min-width:768px),
print {
.pageBlock .slick-slider .slick-arrow {
box-sizing: border-box;
top: 60px;
border: 1px #A91F28 solid;
background-color: #A91F28
}
.no-touchevents .pageBlock .slick-slider .slick-arrow:hover,
.touchevents .pageBlock .slick-slider .slick-arrow.is-touched {
background-color: #fff
}
.no-touchevents .pageBlock .slick-slider .slick-prev:hover:before,
.touchevents .pageBlock .slick-slider .slick-prev.is-touched:before {
background-image: url(https://www.yukoyuko.net/images/common/icon_arw_l.svg)
}
.no-touchevents .pageBlock .slick-slider .slick-next:hover:before,
.touchevents .pageBlock .slick-slider .slick-next.is-touched:before {
background-image: url(https://www.yukoyuko.net/images/common/icon_arw_r.svg)
}
.pageBlock .slick-slider .slick-dots {
position: absolute;
bottom: 3px;
left: 0;
width: 100%;
text-align: center
}
.pageBlock .slick-slider .slick-dots:before {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: ''
}
.pageBlock .slick-slider .slick-dots li {
width: 10px;
height: 10px;
margin: 0 4px
}
.pageBlock .slick-slider .slick-dots li.is-active button {
background-color: #A91F28
}
.pageBlock .slick-slider .slick-dots button {
border-radius: 50%;
background-color: #d6d4d1
}
.pageBlock .slick-slider .slick-dots button.is-active {
background-color: #A91F28
}
}
@media screen and (max-width:767px) {
.pageBlock .slick-slide {
margin-right: 7.5px;
margin-left: 7.5px
}
}
/* --------------------------------
â–¡ .c-cardList
-------------------------------- */
.c-cardList {
display: flex;
justify-content: center
}
@media screen and (max-width:767px) {
.c-cardList {
display: block
}
}
@media screen and (max-width:767px) {
.c-cardList.c-cardList-small,
.c-cardList.c-cardList-sp2col,
.c-cardList.slick-slider {
flex-direction: row
}
.c-cardList.c-cardList-small .c-cardItem+.c-cardItem,
.c-cardList.c-cardList-sp2col .c-cardItem+.c-cardItem,
.c-cardList.slick-slider .c-cardItem+.c-cardItem {
margin-top: 0
}
}
@media screen and (max-width:767px) {
.c-cardList-small,
.c-cardList-sp2col {
position: relative;
display: flex;
margin-left: -15px;
flex-wrap: wrap
}
.c-cardList-small .c-cardItem:not(.slick-slide):nth-child(n+3),
.c-cardList-sp2col .c-cardItem:not(.slick-slide):nth-child(n+3) {
margin-top: 29px
}
}
.c-cardList-small .c-cardItem {
width: 208px;
margin-left: 10px
}
@media screen and (max-width:767px) {
.c-cardList-small .c-cardItem {
width: 50%;
margin-left: 0
}
.c-cardList-small .c-cardItem:not(.slick-slide) {
padding-left: 15px
}
.c-cardList-small .c-cardItem:not(.slick-slide):nth-child(n+5) {
display: none
}
}
@media screen and (max-width:767px) {
.c-cardList-sp2col .c-cardItem {
width: 50%;
margin-left: 0;
padding-left: 15px
}
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_spec {
min-height: 50px;
padding-left: 25px
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_spec {
min-height: 53px;
padding-right: 6px;
padding-left: 29px
}
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_tag {
font-size: 1rem;
top: 5px;
left: 5px
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_tag {
font-size: 1rem;
top: 8px;
left: 6px
}
}
.c-cardItem_price {
padding-top: 15px
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_price {
padding-top: 9px
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_price {
padding-top: 12px
}
}
.c-cardItem_price .value {
font-size: 20px;
font-size: 2rem
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_price .value {
font-size: 1.8rem
}
}
.c-cardItem_price .value small {
font-size: 12px;
font-size: 1.2rem
}
.c-cardItem_price .tax {
font-size: 12px;
font-size: 1.2rem;
padding-top: 5px;
opacity: .45
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_price .tax {
font-size: 1rem
}
}
.c-cardItem_review {
margin-top: 19px
}
.c-cardList-small .c-cardItem_review {
margin-top: 15px
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_review .m-reviewStar span {
width: 11px;
height: 11px;
background-size: 14px 14px
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_review .m-reviewStar span {
width: 13px;
height: 13px;
background-size: 16px 16px
}
}
.c-cardItem_review_value {
margin-top: 6px;
text-align: right
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_review_value {
font-size: 1.2rem;
margin-top: 5px
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_review_value {
margin-top: 4px
}
}
@media screen and (min-width:768px),
print {
.c-cardItem_subtitle {
line-height: 1.57;
margin-top: -2px
}
.c-cardList-small .c-cardItem_subtitle {
font-size: 1.2rem
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_subtitle,
.c-cardList-sp2col .c-cardItem_subtitle {
font-size: 1rem
}
}
.c-cardItem_title-name {
font-size: 18px;
font-size: 1.8rem
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_title-name {
font-size: 1.6rem
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_title-name {
font-size: 1.4rem
}
}
@media screen and (max-width:767px) {
.c-cardList-sp2col .c-cardItem_title-name {
font-size: 1.4rem
}
}
@media screen and (max-width:767px) {
.c-cardList.c-cardList-small,
.c-cardList.c-cardList-sp2col,
.c-cardList.slick-slider {
flex-direction: row
}
.c-cardList.c-cardList-small .c-cardItem+.c-cardItem,
.c-cardList.c-cardList-sp2col .c-cardItem+.c-cardItem,
.c-cardList.slick-slider .c-cardItem+.c-cardItem {
margin-top: 0
}
}
@media screen and (max-width:767px) {
.c-cardList-small,
.c-cardList-sp2col {
position: relative;
display: flex;
margin-left: -15px;
flex-wrap: wrap
}
.c-cardList-small .c-cardItem:not(.slick-slide):nth-child(n+3),
.c-cardList-sp2col .c-cardItem:not(.slick-slide):nth-child(n+3) {
margin-top: 29px
}
}
.c-cardList-small .c-cardItem {
width: 208px;
margin-left: 10px
}
@media screen and (max-width:767px) {
.c-cardList-small .c-cardItem {
width: 50%;
margin-left: 0
}
.c-cardList-small .c-cardItem:not(.slick-slide) {
padding-left: 15px
}
.c-cardList-small .c-cardItem:not(.slick-slide):nth-child(n+5) {
display: none
}
}
@media screen and (max-width:767px) {
.c-cardList-sp2col .c-cardItem {
width: 50%;
margin-left: 0;
padding-left: 15px
}
}
.c-cardItem {
font-size: 14px;
font-size: 1.4rem;
line-height: 1.71;
max-width: 258px;
margin-left: 16px
}
@media screen and (max-width:767px) {
.c-cardItem {
font-size: 1.4rem;
max-width: 100%;
margin-left: 0
}
.c-cardItem+.c-cardItem {
margin-top: 26px
}
}
.c-cardItem:first-child {
margin-left: 0
}
.c-cardItem a {
display: block;
height: 100%;
text-decoration: none
}
.no-touchevents .c-cardItem a:hover .c-cardItem_cover_img,
.no-touchevents .c-cardItem a:hover .c-cardItem_spec,
.touchevents .c-cardItem a.is-touched .c-cardItem_cover_img,
.touchevents .c-cardItem a.is-touched .c-cardItem_spec {
opacity: .7
}
.no-touchevents .c-cardItem a:hover .c-cardItem_cover_img,
.touchevents .c-cardItem a.is-touched .c-cardItem_cover_img {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
.no-touchevents .c-cardItem a:hover .c-cardItem_title,
.touchevents .c-cardItem a.is-touched .c-cardItem_title {
text-decoration: none
}
.c-cardItem .c-tagList {
margin-top: 8px
}
.c-cardItem .c-tagList_item {
padding: 4px 8px;
color: #958746;
background-color: #f2ebe1
}
@media screen and (min-width:768px),
print {
.c-cardItem .c-tagList_item {
font-size: 1.1rem
}
}
@media screen and (max-width:767px) {
.c-cardItem .c-tagList_item {
padding-right: 14px;
padding-left: 14px
}
}
.c-cardItem_cover {
position: relative;
overflow: hidden;
-webkit-transform: rotate(.01deg);
transform: rotate(.01deg);
background: #000
}
@media screen and (max-width:767px) {
.c-cardItem_cover {}
}
.c-cardItem_cover_img {
transition: all .3s;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
.c-cardItem_cover_img img {
width: 100%
}
.c-cardItem_spec {
line-height: 1;
position: absolute;
bottom: 0;
left: 0;
display: flex;
width: 100%;
min-height: 65px;
padding-right: 8px;
padding-left: 36px;
transition: opacity .3s;
opacity: 1;
color: #fff;
background: rgba(0, 0, 0, .6);
justify-content: space-between
}
@media screen and (max-width:767px) {
.c-cardItem_spec {
min-height: 62px;
padding-left: 40px
}
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_spec {
min-height: 50px;
padding-left: 25px
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_spec {
min-height: 53px;
padding-right: 6px;
padding-left: 29px
}
}
.c-cardItem_tag {
font-size: 12px;
font-size: 1.2rem;
position: absolute;
top: 10px;
left: 9px;
padding: 2px 3px;
letter-spacing: 1px;
-ms-writing-mode: tb-lr;
color: #fff;
background: #ef3d34;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr
}
@media screen and (max-width:767px) {
.c-cardItem_tag {
left: 13px
}
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_tag {
font-size: 1rem;
top: 5px;
left: 5px
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_tag {
font-size: 1rem;
top: 8px;
left: 6px
}
}
.c-cardItem_price {
padding-top: 15px
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_price {
padding-top: 9px
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_price {
padding-top: 12px
}
}
.c-cardItem_price .value {
font-size: 20px;
font-size: 2rem
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_price .value {
font-size: 1.8rem
}
}
.c-cardItem_price .value small {
font-size: 12px;
font-size: 1.2rem
}
.c-cardItem_price .tax {
font-size: 12px;
font-size: 1.2rem;
padding-top: 5px;
opacity: .45
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_price .tax {
font-size: 1rem
}
}
.c-cardItem_review {
margin-top: 19px
}
.c-cardList-small .c-cardItem_review {
margin-top: 15px
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_review .m-reviewStar span {
width: 11px;
height: 11px;
background-size: 14px 14px
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_review .m-reviewStar span {
width: 13px;
height: 13px;
background-size: 16px 16px
}
}
.c-cardItem_review_value {
margin-top: 6px;
text-align: right
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_review_value {
font-size: 1.2rem;
margin-top: 5px
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_review_value {
margin-top: 4px
}
}
.c-cardItem_evaluate {
padding-top: 19px;
text-align: right
}
.c-cardItem_evaluate .star {
color: #ef3d34
}
.c-cardItem_evaluate .value {
padding-top: 6px
}
@media screen and (max-width:767px) {
.c-cardItem_onsen {
letter-spacing: 2px
}
}
.c-cardItem_title {
text-decoration: underline
}
.c-cardItem_subtitle {
color: grey
}
@media screen and (min-width:768px),
print {
.c-cardItem_subtitle {
line-height: 1.57;
margin-top: -2px
}
.c-cardList-small .c-cardItem_subtitle {
font-size: 1.2rem
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_subtitle,
.c-cardList-sp2col .c-cardItem_subtitle {
font-size: 1rem
}
}
.c-cardItem_title-name {
font-size: 18px;
font-size: 1.8rem
}
@media screen and (min-width:768px),
print {
.c-cardList-small .c-cardItem_title-name {
font-size: 1.6rem
}
}
@media screen and (max-width:767px) {
.c-cardList-small:not(.c-cardList-spDefault) .c-cardItem_title-name {
font-size: 1.4rem
}
}
@media screen and (max-width:767px) {
.c-cardList-sp2col .c-cardItem_title-name {
font-size: 1.4rem
}
}
.js-cardSlidePager {
display: none
}
@media screen and (max-width:767px) {
.js-cardSlidePager {
font-size: 1rem;
display: block;
margin-top: 8px;
margin-right: -15px;
margin-left: -15px;
text-align: center
}
}
/* --------------------------------
â–¡ .js-bigSlider
-------------------------------- */
.js-bigSlider {
position: relative
}
@media screen and (min-width:768px),
print {
.js-bigSlider {
margin-bottom: 22px;
padding-bottom: 24px
}
.js-bigSlider:after,
.js-bigSlider:before {
position: absolute;
z-index: 1;
top: 0;
bottom: 28px;
width: 44px;
content: '';
transition: opacity .1s;
opacity: 1;
background: rgba(255, 255, 255, .4)
}
.js-bigSlider:before {
left: 0
}
.js-bigSlider:after {
right: 0
}
.js-bigSlider.is-sliding:after,
.js-bigSlider.is-sliding:before {
opacity: 0
}
}
@media screen and (min-width:768px),
print {
.js-bigSlider .slick-list {
padding-right: 60px;
padding-left: 60px
}
}
.js-bigSlider .c-cardItem {
width: 228px;
background-color: #f4f2ee
}
@media screen and (max-width:767px) {
.js-bigSlider .c-cardItem {
width: 230px;
}
}
.js-bigSlider .c-cardItem_detail {
overflow: hidden;
height: 80px;
height: 5rem
}
@media screen and (min-width:768px),
print {
.js-bigSlider .c-cardItem_detail {
padding: 0 16px
}
}
@media screen and (max-width:767px) {
.js-bigSlider .c-cardItem_detail {
padding: 0 10px
}
}
.js-bigSlider+.js-cardSlidePager+.c-cardList {
margin-top: 26px
}
@keyframes show {
0% {
opacity: 0;
transform: translate(0, 15px);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}