/* CSS Document */
#pagePath{
@media (max-width: 1199.98px) {
display: none;
}
@media (min-width: 1200px) {
grid-template-columns: 1fr var(--wrap-fit) 1fr;
width: min(100%, 1360px);
margin: 24px auto 0 auto;
border-top: 1px solid #b3b3b3;
grid-row: 3;
}
& li:last-child a{
text-decoration: none;
pointer-events: none;
}
}
#main{
@media (min-width: 1200px) {
display: contents;
}
}
#hero{
overflow: hidden;
margin-top: 8px;
@media (min-width: 1200px) {
margin-top: 16px;
}
}
#heroPhoto{
display: grid;
grid-template-columns: auto 1fr auto;
@media (min-width: 1200px) {
width: min(var(--wrap-fit), 1120px);
margin: 0 auto;
}
&:before{
content: "";
aspect-ratio: 1120 / 540;
grid-column: 1 / 4;
grid-row: 1;
visibility: hidden;
}
&>dl{
grid-column: 1 / 4;
grid-row: 1;
&:nth-child(n+2){
visibility: hidden;
}
}
& dl{
display: grid;
grid-row-gap: 16px;
margin: 0 10px;
}
& dt{
font-size: clamp(16px, calc(24 / 768 * 100vw), 24px);
letter-spacing: 0.18em;
text-align: center;
}
& dd{
display: contents;
& a{
grid-column: 1;
grid-row: 1;
display: block;
z-index: 1;
}
& picture{
grid-column: 1;
grid-row: 1;
display: grid;
&>*{
grid-column: 1;
grid-row: 1;
}
}
& img{
aspect-ratio: 390 / 590;
object-fit: cover;
@media (min-width: 576px) {
aspect-ratio: 3 / 2;
}
@media (min-width: 1200px) {
aspect-ratio: 1120 / 540;
border-radius: 10px;
}
}
}
.slick-list{
grid-column: 1 / 4;
grid-row: 1 / 3;
margin: 0 -10px;
overflow: visible;
}
.slick-arrow{
all: unset;
align-self: center;
grid-row: 1;
position: relative;
z-index: 1;
aspect-ratio: 36 / 80;
width: 40px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.6);
font-size: 0;
cursor: pointer;
&:before{
content: "";
position: absolute;
top: 0;
width: calc(100% - 8px);
height: 100%;
background: var(--color);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 24px;
}
}
.slick-prev{
grid-column: 1;
transform: translateX(-8px);
&:before{
right: 0;
transform: scale(-1, 1);
}
}
.slick-next{
grid-column: 3;
transform: translateX(8px);
&:before{
left: 0;
}
}
.slick-dots{
grid-column: 1 / 4;
grid-row: 3;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
grid-gap: 16px clamp(24px, calc(32 / 576 * 100vw), 32px);
margin-top: 24px;
&:has(li:only-child){
display: none;
}
li{
display: contents;
}
button{
all: unset;
box-sizing: border-box;
aspect-ratio: 1;
width: 9px;
background: #b3b3b3;
border-radius: 100%;
font-size: 0;
overflow: hidden;
.slick-active &{
background: var(--color-theme-sub);
}
}
}
}
#heroMovie{
position: relative;
overflow: hidden;
aspect-ratio: 390 / 590;
@media (min-width: 576px) {
aspect-ratio: 3 / 2;
}
@media (min-width: 1200px) {
aspect-ratio: 1120 / 540;
}
[class^="moviePlayer_"]{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center center !important;
background-attachment: inherit !important;
background-size: cover !important;
pointer-events: none;
}
.inline-YTPlayer,
.ytp{
position: static !important;
}
.playerBox{
top: 50% !important;
left: 50% !important;
margin: 0 !important;
transform: translate(-50%, -50%);
}
}
#emergency{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
margin-top: 16px;
&>*{
grid-column: 2;
}
& h2{
display: none;
}
& h2+div{
display: grid;
grid-row-gap: 24px;
}
& section{
display: grid;
grid-row-gap: 16px;
padding: 24px;
background: #f2f2f2;
border-radius: 10px;
}
& h3{
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
column-gap: 16px;
font-size: clamp(16px, calc(20 / 768 * 100vw), 20px);
letter-spacing: 0.1em;
&:before{
content: "";
aspect-ratio: 1;
width: 40px;
background: var(--color-theme);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& h3+div{
display: flex;
justify-content: center;
}
& a{
display: grid;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
column-gap: 16px;
min-width: min(100%, 420px);
min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
padding: 8px 16px;
border-radius: clamp(24px, calc(28 / 768 * 100vw), 28px);
background: var(--color-theme);
color: #fff;
font-weight: 700;
font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
letter-spacing: 0.1em;
text-align: center;
text-decoration: none;
&:before,
&:after{
content: "";
aspect-ratio: 1;
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: center;
}
&:before{
width: clamp(24px, calc(32 / 768 * 100vw), 32px);
background: currentColor;
border-radius: 100%;
}
&:after{
width: 16px;
background: inherit;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
@media (max-width: 767.98px) {
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
&:hover{
background: var(--color);
border-color: transparent;
color: #fff;
}
}
}
#movie{
justify-self: center;
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
width: min(100%, 1360px);
margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
overflow: hidden;
&>*{
grid-column: 2;
}
& h2{
display: grid;
justify-items: center;
grid-row-gap: 0.25em;
font: 700 clamp(24px, calc(32 / 768 * 100vw), 32px) var(--font-title);
letter-spacing: 0.1em;
text-align: center;
word-break: keep-all;
overflow-wrap: anywhere;
&:after{
content: attr(data-caption);
padding-left: 2em;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat left center / 1.556em;
color: #808080;
font-size: 0.5625em;
}
}
& h2+div{
width: min(100%, 640px);
margin: 24px auto 0 auto;
}
& iframe{
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
}
#reasons{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
margin-top: clamp(80px, calc(160 / 1200 * 100vw), 160px);
&>*{
grid-column: 2;
}
& h2{
grid-column: 2;
justify-self: center;
aspect-ratio: 300 / 47;
width: min(100%, clamp(358px, calc(448 / 768 * 100vw), 448px));
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
font-size: 0;
}
& h2+div{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
align-items: start;
grid-gap: clamp(48px, calc(80 / 1200 * 100vw), 80px) clamp(20px, calc(56 / 1200 * 100vw), 56px);
margin-top: 40px;
}
& section{
counter-increment: count;
display: grid;
grid-row-gap: 16px;
&:before{
content: counter(count);
justify-self: center;
display: grid;
place-content: center;
aspect-ratio: 1;
width: 72px;
padding-top: 38px;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / cover;
color: #fff;
font-weight: 700;
font-size: 18px;
}
}
& h3{
font-weight: 700;
font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
text-align: center;
}
& h3+div{
order: 1;
margin: 0 20px;
}
& figure{
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 10px;
}
}
}
#pickup{
justify-self: center;
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
grid-row-gap: 32px;
width: min(100%, 1360px);
margin-top: clamp(80px, calc(144 / 1200 * 100vw), 144px);
overflow: hidden;
&>*{
grid-column: 2;
}
& h2{
justify-self: center;
aspect-ratio: 3 / 1;
width: clamp(164px, calc(200 / 768 * 100vw), 200px);
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
font-size: 0;
}
@media (min-width: 1200px) {
grid-template-columns: 300px 1fr;
& h2{
grid-column: 1;
grid-row: 1;
align-self: center;
}
#pickupList{
grid-column: 2;
grid-row: 1;
border-left: 1px solid #b3b3b3;
}
}
}
#pickupList{
display: grid;
@media (min-width: 1200px) {
padding: 20px 0 0 20px;
}
& article{
grid-column: 1;
grid-row: 1;
&:not(.select){
visibility: hidden;
}
}
& h2{
display: none;
}
& section{
position: relative;
display: grid;
grid-row-gap: 16px;
margin: 0 10px;
&:not(:has(figure)){
&:before{
content: "";
order: -1;
aspect-ratio: 3 / 2;
background: var(--dummy);
border-radius: 10px;
}
}
@media (min-width: 576px) {
width: 360px;
}
}
& h3{
text-align: center;
font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
}
& h3+div{
display: contents;
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
& figure{
order: -1;
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 10px;
&[src]{
display: block;
background: #ccc;
}
}
}
.slick-slider{
display: grid;
grid-template-columns: auto 1fr auto;
overflow: hidden;
&:before{
content: "";
grid-column: 1 / 4;
grid-row: 1;
aspect-ratio: 3 / 2;
}
@media (max-width: 575.98px) {
&:before{
margin-right: 100px;
}
}
@media (min-width: 576px) {
&:before{
width: 360px;
}
}
}
.slick-list{
grid-column: 1 / 4;
grid-row: 1 / 3;
margin: 0 -10px;
@media (max-width: 575.98px) {
padding-right: 100px;
}
}
.slick-arrow{
all: unset;
align-self: center;
grid-row: 1;
position: relative;
z-index: 1;
aspect-ratio: 36 / 80;
width: 40px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.6);
font-size: 0;
cursor: pointer;
&:before{
content: "";
position: absolute;
top: 0;
width: calc(100% - 8px);
height: 100%;
background: var(--color);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 24px;
}
}
.slick-prev{
grid-column: 1;
transform: translateX(-8px);
&:before{
right: 0;
transform: scale(-1, 1);
}
}
.slick-next{
grid-column: 3;
transform: translateX(8px);
&:before{
left: 0;
}
}
}
#production{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
grid-row-gap: clamp(40px, calc(56 / 1200 * 100vw), 56px);
margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
background: #e6e6e6;
&>*{
grid-column: 2;
}
& h2{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 0.5em;
font-weight: 700;
font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
letter-spacing: 0.1em;
&:before,
&:after{
content: "";
border-top: 1px solid currentColor;
}
}
& h2+div{
display: grid;
grid-gap: clamp(40px, calc(56 / 1200 * 100vw), 56px);
@media (min-width: 992px) {
grid-template-columns: repeat(2, 1fr);
& section:nth-child(3){
grid-column: 1 / 3;
}
}
}
& section{
display: grid;
grid-template-rows: auto 1fr;
grid-row-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px);
padding: 24px;
background: #fff;
border-radius: 10px;
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
& h3{
display: grid;
grid-template-columns: auto auto;
justify-content: center;
column-gap: 1em;
padding-bottom: 16px;
border-bottom: 1px solid #b3b3b3;
font-weight: 700;
font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
letter-spacing: 0.1em;
text-align: center;
&:before{
content: "";
aspect-ratio: 1;
width: 36px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& p{
font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
}
& div:has(p){
justify-self: center;
width: min(calc(100% - 40px), 940px);
}
& div:has(a){
display: flex;
flex-wrap: wrap;
grid-gap: 16px 40px;
justify-content: center;
margin: clamp(16px, calc(24 / 1200 * 100vw), 24px) 0;
}
}
& a{
display: grid;
grid-template-columns: auto auto;
grid-gap: 1em;
justify-content: center;
align-items: center;
min-width: min(100%, 400px);
min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
padding: 0.5em 2em;
background: var(--color);
border-radius: clamp(28px, calc(32 / 768 * 100vw), 32px);
color: #fff;
font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
letter-spacing: 0.1em;
text-align: center;
text-decoration: none;
&:before,
&:after{
content: "";
aspect-ratio: 1;
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: center;
}
&:before{
width: clamp(24px, calc(32 / 768 * 100vw), 32px);
background: currentColor;
border-radius: 100%;
}
&:after{
width: 16px;
background: var(--color);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
&[href="/fc/location/index.html"]{
&:before{
content: none;
}
&:after{
content: "";
grid-column: 1;
aspect-ratio: 1;
width: 16px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
&[href="/fc-inquiry"]{
&:before{
content: none;
}
&:after{
content: "";
grid-column: 1;
aspect-ratio: 1;
width: 28px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
}
#productionInquiry{
& strong{
display: inline-block;
margin: 16px 0;
font-weight: 700;
font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
}
}
#local{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
grid-row-gap: clamp(40px, calc(56 / 1200 * 100vw), 56px);
padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
background: #d0eaff;
&>*{
grid-column: 2;
}
& h2{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 0.5em;
font-weight: 700;
font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
letter-spacing: 0.1em;
&:before,
&:after{
content: "";
border-top: 1px solid currentColor;
}
}
& h2+div{
display: grid;
grid-gap: clamp(40px, calc(56 / 1200 * 100vw), 56px);
@media (min-width: 992px) {
grid-template-columns: repeat(2, 1fr);
& section:nth-child(1){
grid-column: 1 / 3;
}
}
}
& section{
display: grid;
grid-template-rows: auto 1fr;
grid-row-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px);
padding: 24px;
background: #fff;
border-radius: 10px;
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
& h3{
display: grid;
grid-template-columns: auto auto;
justify-content: center;
column-gap: 1em;
padding-bottom: 16px;
border-bottom: 1px solid #b3b3b3;
font-weight: 700;
font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
letter-spacing: 0.1em;
text-align: center;
&:before{
content: "";
aspect-ratio: 1;
width: 36px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
& p{
font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
}
& div:has(p){
justify-self: center;
width: min(calc(100% - 40px), 940px);
}
& div:has(a){
display: flex;
flex-wrap: wrap;
grid-gap: 16px 40px;
justify-content: center;
margin: clamp(16px, calc(24 / 1200 * 100vw), 24px) 0;
}
}
& a{
display: grid;
grid-template-columns: auto auto;
grid-gap: 1em;
justify-content: center;
align-items: center;
min-width: min(100%, 400px);
min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
padding: 0.5em 2em;
background: var(--color);
border-radius: clamp(28px, calc(32 / 768 * 100vw), 32px);
color: #fff;
font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
letter-spacing: 0.1em;
text-align: center;
text-decoration: none;
&:before,
&:after{
content: "";
aspect-ratio: 1;
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: center;
}
&:before{
width: clamp(24px, calc(32 / 768 * 100vw), 32px);
background: currentColor;
border-radius: 100%;
}
&:after{
width: 16px;
background: var(--color);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
@media (max-width: 767.98px) {
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
&[href="http://s-kantan.com/pref-okayama-u/offer/offerList_detail.action?tempSeq=527"],
section:nth-child(2) &{
min-width: min(100%, 280px);
}
&[href="/fc-inquiry"]{
&:before{
content: none;
}
&:after{
content: "";
grid-column: 1;
aspect-ratio: 1;
width: 28px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
}
}
}
}
#localExtra{
& dl{
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 24px;
grid-gap: 8px 24px;
font-weight: 700;
}
& dt{
padding: 4px 8px;
background: #000;
color: #fff;
}
& dd{
font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
}
}
#topics{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
&>*{
grid-column: 2;
}
& h2{
justify-self: center;
aspect-ratio: 149 / 75;
width: clamp(104px, calc(130 / 576 * 100vw), 130px);
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
font-size: 0;
}
#topicsList{
margin-top: clamp(16px, calc(40 / 1200 * 100vw), 40px);
}
#topicsLink{
margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
}
}
#topicsList{
& section{
position: relative;
display: flex;
flex-wrap: wrap;
column-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
padding: clamp(16px, calc(24 / 768 * 100vw), 24px);
&:has(figure){
min-height: clamp(76px, calc(148 / 768 * 100vw), 116px);
padding-right: clamp(80px, calc(160 / 1200 * 100vw), 160px);
}
&:has(a):hover{
& h3{
color: var(--color-theme-sub);
}
}
&:nth-of-type(even){
background: #f2f2f2;
}
}
& h3{
order: 1;
width: 100%;
margin-top: 8px;
font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
transition: color 0.2s ease-out;
}
& h3+div{
display: contents;
& time{
align-self: center;
font-size: clamp(12px, calc(16 / 768 * 100vw), 16px);
}
& ul{
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: clamp(4px, calc(8 / 768 * 100vw), 8px);
}
& li{
display: flex;
align-items: center;
font-size: clamp(10px, calc(14 / 768 * 100vw), 14px);
&[class]{
min-width: clamp(20px, calc(32 / 768 * 100vw), 32px);
padding: 0.25em 1em;
background: var(--color-tagNew);
border-radius: clamp(10px, calc(16 / 768 * 100vw), 16px);
color: #fff;
font-size: clamp(10px, calc(16 / 768 * 100vw), 16px);
&.tagCheck{
background: var(--color-tagCheck);
}
}
&:not([class]){
&:before,
&:after{
content: "-";
}
}
}
& a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
}
}
& figure{
position: absolute;
right: 8px;
top: 50%;
width: clamp(60px, calc(150 / 1200 * 100vw), 150px);
transform: translateY(-50%);
& img{
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: clamp(4px, calc(10 / 768 * 100vw), 10px);
}
}
}
#topicsLink{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 16px 40px;
& a{
display: grid;
grid-template-columns: auto auto;
grid-gap: 1em;
justify-content: center;
align-items: center;
min-width: min(100%, 400px);
min-height: clamp(64px, calc(80 / 768 * 100vw), 80px);
padding: 0.5em 1.5em;
background: #fff;
border: 1px solid #b3b3b3;
border-radius: clamp(32px, calc(40 / 768 * 100vw), 40px);
color: inherit;
font-size: clamp(14px, calc(20 / 768 * 100vw), 20px);
letter-spacing: 0.1em;
text-align: center;
text-decoration: none;
&:before,
&:after{
content: "";
aspect-ratio: 1;
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: center;
}
&:before{
width: clamp(24px, calc(32 / 768 * 100vw), 32px);
background: currentColor;
border-radius: 100%;
}
&:after{
width: 16px;
background: #fff;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / contain;
@media (max-width: 767.98px) {
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
}
&:hover{
background: var(--color);
border-color: transparent;
color: #fff;
&:after{
background: inherit;
}
}
}
}
#access{
display: grid;
grid-template-columns: 1fr var(--wrap) 1fr;
grid-row-gap: clamp(40px, calc(56 / 1200 * 100vw), 56px);
margin: clamp(80px, calc(120 / 1200 * 100vw), 120px) 0;
&>*{
grid-column: 2;
}
& h2{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 0.5em;
font-weight: 700;
font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
letter-spacing: 0.1em;
&:before,
&:after{
content: "";
border-top: 1px solid currentColor;
}
}
& h2+div{
display: grid;
grid-gap: 24px 56px;
@media (min-width: 992px) {
grid-template-columns: 1fr min(50vw, 600px);
}
}
& img{
&:nth-child(1){
max-width: 480px;
margin: 0 auto;
}
}
}