/* CSS Document */
#nav{}
#nav menu{
order: 1;
}
#nav #sns{
width: 100%;
}
#nav #sns .wrap{
width: 100%;
}
#pagePath{
display: none;
}
#main{
overflow: hidden;
}
#main article{
position: relative;
}
#main footer{
display: flex;
justify-content: center;
padding: 0;
}
#main footer a{
position: relative;
width: 100%;
width: 390px;
padding: 1.5em;
background: #fff;
border: 1px solid #b2b6bc;
border-radius: 6px;
color: inherit;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#main footer a:hover{
background: #e6f3f5;
border-color: currentColor;
color: #1696ac;
}
#main footer i{
position: absolute;
top: calc(50% - 0.5em);
right: 1em;
}
#hero{}
#hero dl{
position: relative;
}
#hero dt{
position: absolute;
left: 1em;
bottom: 1em;
display: flex;
flex-direction: column;
align-items: flex-start;
width: calc(100% - 2em);
pointer-events: none;
z-index: 1;
}
#hero dt span{
padding: 0.5em;
max-width: calc(100% - 2em);
background: rgba(0,0,0,0.6);
color: #fff;
font-weight: bold;
}
#hero dt i{
pointer-events: all;
}
#hero dd{}
#hero dd a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
#heroSlide{}
#heroSlide .slick-dots{
position: absolute;
}
#heroSlide .slick-arrow{
margin: 0;
}
#heroFixed{
display: flex;
}
#alert{
padding: 1.5em 0;
background: #27344d;
}
#alert h2{
align-self: center;
padding-bottom: 0.5em;
border-bottom: 4px solid #1696ac;
font-weight: bold;
font-size: 1.25em;
line-height: 1.5em;
}
#alert h2+div{
margin-top: 1.5em;
line-height: 1.7em;
}
#alert h2+div p{
line-height: inherit;
}
#alert h2+div+div{
align-self: center;
margin-top: 1.5em;
}
#alert h2+div+div a{
display: flex;
align-items: center;
color: inherit;
font-size: 0.8em;
text-decoration: none;
}
#alert h2+div+div i{
display: flex;
align-items: center;
margin-left: 0.5em;
}
#alert h2+div+div svg{
transform: scale(1.25);
}
#alert .wrap{
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
border-radius: 12px;
}
#recommended{
position: relative;
padding-top: 0;
}
#recommended:before{
content: "";
position: absolute;
right: max(calc(50% - 726px), -10%);
bottom: 0;
aspect-ratio: 380 / 345;
width: min(75%, 380px);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: #E3E0CE;
opacity: 0.3;
}
#recommended header{
padding-bottom: 0;
overflow: hidden;
}
#recommended section{
counter-reset: count;
padding-top: 2em;
}
#recommended h3{
display: none;
}
#recommended dl{
position: relative;
display: flex;
}
#recommended dl:before{
counter-increment: count;
content: 'Feature 0'counter(count);
color: #1696ac;
font-size: 0.875em;
letter-spacing: 0.05em;
}
#recommended dl:nth-of-type(n+10):before{
content: 'Feature 'counter(count);
}
#recommended dt{
font-weight: bold;
line-height: 1.5em;
}
#recommended dd{}
#recommended dd:last-child{
margin-left: auto;
}
#recommended dd a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#recommended dd i{
position: relative;
display: block;
width: 2.4em;
height: 2.4em;
background: #fff;
border: 1px solid #acacac;
border-radius: 100%;
fill: #4d596a;
pointer-events: none;
}
#recommended dd svg{
position: absolute;
top: 30%;
left: 30%;
width: 40%;
height: 40%;
}
#recommended dt+dd{
order: -1;
}
#gifujin{}
#gifujin header{
padding: 0;
}
#gifujin section{
padding-top: 2em;
}
#gifujin h3{
display: none;
}
#gifujin dl{}
#gifujin dl:first-child{}
#gifujin dl:first-child dd{}
#gifujin dl:first-child dd:nth-of-type(2){
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
height: calc(1.7em * 3);
text-align: left;
line-height: 1.7em;
overflow: hidden;
}
#gifujin dl:first-child dd a{
display: inline-flex;
align-items: center;
color: inherit;
font-weight: bold;
text-decoration: none;
}
#gifujin dl:first-child dd i{
position: relative;
top: 0;
right: 0;
width: 2.4em;
height: 2.4em;
margin-left: 0.5em;
background: #fff;
border: 1px solid #acacac;
border-radius: 100%;
fill: #4d596a;
cursor: pointer;
}
#gifujin dl:first-child dd svg{
position: absolute;
top: 30%;
left: 30%;
width: 40%;
height: 40%;
}
#gifujin dl:nth-of-type(n+2){
position: relative;
display: flex;
}
#gifujin dl:nth-of-type(n+2) dd{}
#gifujin dl:nth-of-type(n+2) dd:nth-of-type(2){
display: none;
}
#gifujin dl:nth-of-type(n+2) dd a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
#gifujin dt{
font-weight: bold;
line-height: 1.5em;
}
#gifujin dt+dd{
order: -1;
}
#column{
position: relative;
}
#column:before{
content: "";
position: absolute;
top: 0;
left: max(calc(50% - 770px), -10%);
aspect-ratio: 438 / 260;
width: min(75%, 438px);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center top no-repeat;
-webkit-mask-size: contain;
background: #CEDBE2;
opacity: 0.3;
}
#column header{
padding: 0;
}
#column h2{
margin-left: 1em;
}
#column section{
padding-top: 2em;
}
#column h3{
display: none;
}
#column h3+div{
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: start;
}
#column dl{
position: relative;
display: grid;
}
#column dl:nth-child(1){
grid-column: 1 / 3;
}
#column dl:nth-child(n + 6){
display: none;
}
#column dt{
font-size: 1.125em;
font-weight: bold;
line-height: 1.5em;
}
#column dt+dd{
margin-bottom: 1em;
order: -1;
}
#column dd{}
#column dd:nth-of-type(2){
margin-top: 0.5em;
color: #222;
font-weight: bold;
line-height: 1.5em;
text-align: left;
word-break: break-word;
}
#column dd:nth-of-type(2):first-line{
font-size: 0.875em;
font-weight: normal;
}
#column dd a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
#column .thumb{
border-radius: 12px;
}
#theme{
background: #fff;
}
#theme header{
padding: 0;
}
#theme section{
padding-top: 0;
}
#theme h3{
display: none;
}
#theme h3+div{
counter-reset: count;
margin-top: 2em;
}
#theme dl{
position: relative;
display: flex;
flex-direction: column;
}
#theme dl:before{
counter-increment: count;
content: 'Theme 0'counter(count);
align-self: center;
margin-bottom: 0.5em;
color: #1696ac;
font-size: 0.8em;
letter-spacing: 0.05em;
}
#theme dl:nth-of-type(n+10):before{
content: 'Theme 'counter(count);
}
#theme dt{
font-weight: bold;
line-height: 1.5em;
text-align: center;
}
#theme dt+dd{
margin-bottom: 1em;
order: -1;
}
#theme dd{}
#theme dd a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
#theme .thumb{
padding-top: 100%;
border-radius: 100%;
}
#theme .wrap{
position: relative;
z-index: 1;
}
#ranking{}
#ranking header{
padding: 0;
}
#ranking section{
padding-top: 2em;
counter-reset: count;
}
#ranking section:not(.select){
display: none;
}
#ranking h3{
display: none;
}
#ranking dl{
position: relative;
display: flex;
flex-direction: column;
}
#ranking dl:first-child{}
#ranking dl:first-child dt{
font-size: 1.25em;
}
#ranking dl:nth-of-type(n+2){}
#ranking dl:nth-of-type(n+2) dt+dd+dd{
display: none;
}
#ranking dt{
font-weight: bold;
line-height: 1.5em;
word-break: break-word;
text-align: left;
}
#ranking dt+dd{
order: -1;
}
#ranking dt+dd:after{
counter-increment: count;
content: "0"counter(count);
display: block;
margin: 1em 0;
color: #16A0B6;
font-size: 0.875em;
font-weight: bold;
}
#ranking dd{}
#ranking dd:nth-of-type(2){
margin-top: 1em;
color: #000;
font-size: 0.875em;
line-height: 1.7em;
}
#ranking dd a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
#ranking footer{
display: flex;
justify-content: center;
padding: 0;
}
#ranking footer a{
position: relative;
width: 100%;
width: 390px;
padding: 1.5em;
background: #fff;
border: 1px solid #b2b6bc;
border-radius: 6px;
color: inherit;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#ranking footer i{
position: absolute;
top: calc(50% - 0.5em);
right: 1em;
}
#ranking footer .wrap{
}
#ranking .thumb{
border-radius: 12px;
}
#experience{
background: #fff;
padding-bottom: 8em;
}
#experience header{
padding: 0;
}
#experience h2{
margin-left: 1em;
}
#experience section{
padding-top: 2em;
}
#experience h3{
display: none;
}
#experience h3+div{
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: start;
}
#experience dl{
position: relative;
display: grid;
}
#experience dl:nth-child(1){
grid-column: 1 / 3;
}
#experience dl:nth-child(n + 6){
display: none;
}
#experience dt{
font-size: 1.125em;
font-weight: bold;
line-height: 1.5em;
}
#experience dt+dd{
margin-bottom: 1em;
order: -1;
}
#experience dd{}
#experience dd a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
#experience .thumb{
border-radius: 12px;
}
#area{
position: relative;
padding-bottom: 6em;
}
#area:before,
#area:after{
content: "";
position: absolute;
}
#area:before{
top: 0;
left: max(calc(50% - 726px), -5%);
aspect-ratio: 220 / 280;
width: min(25%, 220px);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: #CEDBE2;
opacity: 0.3;
transform: translateY(-80%);
}
#area:after{
bottom: 0;
right: max(calc(50% - 700px), 0%);
aspect-ratio: 652 / 320;
width: clamp(240px, 45%, 652px);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: #E3E0CE;
opacity: 0.4;
transform: translateY(50%);
}
#area header,
#area section{
position: relative;
z-index: 1;
}
#area header{
padding: 0;
}
#area nav{
display: flex;
flex-direction: column;
}
#area nav:before{
content: "他の季節に切り替える";
align-self: center;
margin-bottom: 2em;
font-size: 0.875em;
}
#area section{
pointer-events: none;
}
#area section:not(.select){
display: none;
}
#area h3{
display: none;
}
#area dl{
position: relative;
display: flex;
flex-direction: column;
pointer-events: all;
}
#area dt{
font-weight: bold;
line-height: 1.5em;
}
#area dt+dd{
margin-bottom: 1em;
order: -1;
}
#area dd{}
#area dd ul{
position: absolute;
top: 0.5em;
left: 0.5em;
display: flex;
}
#area dd li{
padding: 0.4em 0.6em;
background: #000;
border-radius: 4px;
color: #fff;
font-size: 0.875em;
font-weight: bold;
}
#area dd a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
#area dd .gifu{
background: #d99a44;
}
#area dd .hida{
background: #806787;
}
#area dd .nishi{
background: #55a2c9;
}
#area dd .higashi{
background: #b95268;
}
#area figure{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#area figure svg{
position: absolute;
top: -4em;
left: calc(50% - 700px);
width: 1400px;
}
#area figure a{
fill: #27344D;
}
#area figure .gifu:hover{
fill: #d99a44;
}
#area figure .hida:hover{
fill: #806787;
}
#area figure .nishi:hover{
fill: #b95268;
}
#area figure .higashi:hover{
fill: #55a2c9;
}
#area .thumb{
border-radius: 12px;
}
#information{
position: relative;
padding-top: 0;
}
#information:before{
content: "";
position: absolute;
top: 20em;
left: calc(50% - 380px);
aspect-ratio: 148 / 505;
width: min(25%, 148px);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: #E7DCC7;
opacity: 0.3;
transform: translate(-50%, 0);
}
#information header{
padding-bottom: 0;
}
#information nav{
padding-bottom: 0;
}
#information section{}
#information section:not(.select){
display: none;
}
#information h3{
display: none;
}
#information footer{
display: flex;
justify-content: center;
padding: 0;
}
#information footer a{
position: relative;
width: 100%;
width: 390px;
padding: 1.5em;
background: #fff;
border: 1px solid #b2b6bc;
border-radius: 6px;
color: inherit;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#information footer i{
position: absolute;
top: calc(50% - 0.5em);
right: 1em;
}
#movie{}
#movie h2{
margin-left: 1em;
}
#movie h2:after{
margin-top: -1.2em;
}
#movie h2+div{}
#movie h2+div a{
position: relative;
display: block;
}
#movie h2+div i{
position: absolute;
top: 50%;
left: 50%;
margin: -0.5em;
transform: scale(5);
}
#movie h2+div+div{
display: flex;
justify-content: center;
}
#movie h2+div+div a{
position: relative;
width: 100%;
width: 390px;
padding: 1.5em;
background: #fff;
border: 1px solid #b2b6bc;
border-radius: 6px;
color: inherit;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#movie h2+div+div a:hover{
background: #e6f3f5;
border-color: currentColor;
color: #1696ac;
}
#movie h2+div+div i{
position: absolute;
top: calc(50% - 0.5em);
right: 1em;
}
#movie .thumb{
padding-top: 56.25%;
}
#sns{
padding-top: 0;
}
#sns ul{
display: flex;
justify-content: center;
}
#sns li{}
#sns li a{
display: flex;
flex-direction: column;
align-items: center;
color: #4D596A;
font-weight: bold;
text-decoration: none;
}
#sns li i{
position: relative;
width: 3em;
height: 3em;
margin-bottom: 1em;
border: 1px solid currentColor;
border-radius: 100%;
}
#sns li svg{
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
}
#sns li+li{
margin-left: 2em;
}
.subject{
position: relative;
display: flex;
flex-direction: column;
}
.subject:before{
margin-left: 2em;
}
.subject:after{
content: "";
position: absolute;
top: -6em;
left: 0;
height: 7em;
border-left: 1px solid #1696ac;
}
.topicsList{}
.topicsList dt{
font-size: inherit;
font-weight: bold;
}
.topicsList dd:nth-of-type(2) span{
display: inline-block;
margin-bottom: 0.5em;
}
/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
#main{}
#main #navTool{
display: none;
}
#information{
padding-bottom: 12em;
}
#information:before{
top: auto;
left: 50%;
bottom: 0;
}
}
/* for mobile */
@media (max-width: 767.98px) {
/*767以下px*/
#nav{}
#nav #sns{
margin-top: 2em;
}
#hero{}
#hero dt{
left: 1em;
bottom: 1em;
width: calc(100% - 2em);
}
#heroScroll{
display: none;
}
#alert{}
#alert .wrap{
padding: 1.5em;
}
#recommended{}
#recommended span{
display: block;
}
#recommended span:first-child{
margin-bottom: 2em;
}
#recommended span:first-child dl{
flex-wrap: wrap;
align-items: center;
}
#recommended span:first-child dl:before{
margin-bottom: 0.5em;
}
#recommended span:first-child dt{
width: calc(100% - 3em);
}
#recommended span:first-child dt+dd{
width: 100vw;
margin: 0 -1.5em;
margin-bottom: 1em;
}
#recommended span:nth-of-type(n+2){}
#recommended span:nth-of-type(n+2) dl{
position: relative;
align-items: flex-start;
}
#recommended span:nth-of-type(n+2) dl:before{
position: absolute;
top: 0;
left: 50%;
margin-left: 0.8em;
}
#recommended span:nth-of-type(n+2) dt,
#recommended span:nth-of-type(n+2) dt+dd{
width: calc(50% - 0.5em);
}
#recommended span:nth-of-type(n+2) dt{
margin: 1.5em 0 0 auto;
}
#recommended span:nth-of-type(n+2) dd{}
#recommended span:nth-of-type(n+2) dd a{
opacity: 0;
}
#recommended span:nth-of-type(n+2) dd i{
display: none;
}
#recommended span:nth-of-type(n+2) .thumb{
border-radius: 6px;
}
#gifujin{}
#gifujin h3+div+div{
margin-top: 2em;
}
#gifujin dl{}
#gifujin dl:first-child{
display: flex;
flex-direction: column;
}
#gifujin dl:first-child dt{
font-size: 1.1em;
}
#gifujin dl:first-child dt+dd{
margin-bottom: 1em;
}
#gifujin dl:first-child dd{}
#gifujin dl:first-child dd:nth-of-type(2){
margin: 1em 0;
}
#gifujin dl:first-child dd i{
width: 2.4em;
height: 2.4em;
}
#gifujin dl:first-child .thumb{
border-radius: 8px;
}
#gifujin dl:nth-of-type(n+2){}
#gifujin dl:nth-of-type(n+2) .thumb{
border-radius: 6px;
}
#column{}
#column h3+div+div{
margin-top: 2em;
}
#column dt{}
#column dt.over{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: calc(1.5em * 2);
text-align: left;
overflow: hidden;
}
#theme{}
#theme h3+div{
display: flex;
flex-wrap: wrap;
margin-top: 2em;
counter-reset: count;
}
#experience{}
#experience h3+div+div{
margin-top: 2em;
}
#experience dt{}
#experience dt.over{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: calc(1.5em * 2);
text-align: left;
overflow: hidden;
}
#area{}
#area h3+div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#area dl{}
#area dl:nth-of-type(n+3){
margin-top: 2em;
}
#area figure{}
#area figure svg{
height: 1123px;
}
#movie{}
#movie h2+div{
margin: 2em -1.5em;
}
.subject{
margin-left: 0.5em;
}
.topicsList{}
.topicsList dd:nth-of-type(2) span{
margin-bottom: 0;
}
.topicsList dd:nth-of-type(2) span+span{
margin-left: 0.5em;
}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
#hero{
position: relative;
padding: 0;
overflow: hidden;
}
#heroSlide{}
#heroSlide.slide{
padding-bottom: 0;
}
#heroSlide.slide dt{
bottom: 4em;
}
#heroSlide .slick-dots{
left: 5em;
bottom: 0.5em;
width: calc(100% - 10em);
height: 2.8em;
}
#heroSlide .slick-arrow{
position: absolute;
bottom: 0.5em;
display: none;
}
#heroSlide dl .slick-arrow{
bottom: -3.5em;
}
#heroSlide .slick-prev{
left: 1.5em;
z-index: 1;
}
#heroSlide .slick-next{
right: 1.5em;
z-index: 1;
}
#heroFixed{
justify-content: space-between;
margin-top: 4px;
}
#heroFixed dl{
width: calc(50% - 2px);
}
#alert{
margin-top: 4px;
}
#recommended{
padding-bottom: 8em;
}
#recommended span{}
#recommended span:nth-of-type(n+2){
margin-top: 1em;
}
#gifujin{
z-index: 1;
}
#gifujin dl{}
#gifujin dl:first-child{
margin-bottom: 2em;
}
#gifujin dl:nth-of-type(n+2){
justify-content: space-between;
margin-top: 1em;
}
#gifujin dl:nth-of-type(n+2) dt,
#gifujin dl:nth-of-type(n+2) dt+dd{
width: calc(50% - 0.5em);
}
#column{
padding-bottom: 6em;
}
#column h3+div{
grid-gap: 2em 1em;
}
#theme{
margin-top: 2em;
padding-bottom: 6em;
}
#theme h3+div{
justify-content: space-between;
}
#theme .slide{}
#theme .slide span{
width: calc(50% - 0.75em);
}
#theme .slide span:nth-of-type(n+3){
margin-top: 2em;
}
#ranking{
padding-bottom: 8em;
}
#ranking nav{
padding-bottom: 0;
}
#ranking nav li{
width: 50%;
}
#ranking h3+div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#ranking dl{}
#ranking dl:first-child{
width: 100%;
}
#ranking dl:nth-of-type(n+2){
width: calc(50% - 0.5em);
margin-top: 2em;
}
#experience{}
#experience h3+div{
grid-gap: 2em 1em;
}
#area{}
#area:after{
transform: translateY(10%);
}
#area header{
padding: 0;
}
#area nav{}
#area nav li{
width: 25%;
}
#area section{
padding-top: 100%;
}
#area dl{
width: calc(50% - 0.5em);
}
#area figure{}
#area figure svg{
transform: translate(-1.5em,-5em) scale(0.9);
}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
#heroSlide{}
#heroSlide .slick-next{
margin-left: -1em
}
#recommended{}
#recommended h3+div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#recommended span{}
#recommended span:nth-of-type(n+2){
width: calc(50% - 0.75em);
}
#recommended span:nth-of-type(n+4){
margin-top: 1.5em;
}
#theme{}
#theme .slide{}
#theme .slide span{
width: calc(33.33% - 1em);
}
#theme .slide span:nth-of-type(n+4){
margin-top: 2em;
}
#theme .slide span:not(:nth-of-type(3n+1)){
margin-left: 1.5em;
}
#area{}
#area section{
padding-top: 60%;
}
#area dl{
width: calc(50% - 0.75em);
}
#area figure{}
#area figure svg{
transform: translate(-1em, -13em);
}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#hero{
display: flex;
justify-content: space-between;
padding: 1em;
}
#hero .thumb{
padding-top: 66.66%;
border-radius: 12px;
}
#heroSlide{
position: relative;
width: calc(66.66% + 3px);
padding-right: 4px;
}
#heroSlide dt i{
position: absolute;
top: -4em;
left: 0;
display: flex;
}
#heroSlide .slick-dots{
flex-direction: column;
top: 0;
left: 1em;
height: 100%;
pointer-events: none;
}
#heroSlide .slick-dots li{
pointer-events: all;
}
#heroSlide .slick-dots li:not(.slick-active){
background: #fff;
}
#heroSlide > .slick-arrow{
display: none !important;
}
#heroSlide .slick-arrow{
background: none;
fill: #fff;
z-index: 10;
}
#heroSlide .slick-next{
left: 4em;
}
#heroFixed{
display: flex;
flex-direction: column;
width: calc(33.34% - 3px);
}
#heroFixed dl+dl{
margin-top: 4px;
}
#recommended{
padding-bottom: 6em;
}
#recommended h2{
margin: 0;
align-items: center;
}
#recommended h2:before{
align-self: flex-end;
width: 50%;
padding-left: 2em;
}
#recommended h2:after{
left: 50%;
}
#gifujin{}
#gifujin h3+div{
display: flex;
flex-wrap: wrap;
}
#gifujin dl{}
#gifujin dl:first-child{
width: 100%;
}
#gifujin dl:nth-of-type(n+2){
flex-direction: column;
}
#gifujin dl:nth-of-type(n+2) dt+dd{
margin-bottom: 1em;
}
#column{}
#column h3+div{
grid-gap: 2em 1.5em;
}
#ranking{}
#ranking header{
display: flex;
align-items: flex-end;
justify-content: space-between;
}
#ranking nav{
padding: 0;
}
#ranking nav li{
width: 12em;
}
#ranking h3+div{
display: -ms-grid;
-ms-grid-columns: 1.5fr 2em 1fr 2em 1fr;
-ms-grid-rows: auto 2em auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
grid-gap: 2em 1.5em;
}
#ranking dl{
width: 100%;
}
#ranking dl:nth-of-type(1){
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 5;
grid-column: 1;
grid-row: 1 / 3;
}
#ranking dl:nth-of-type(2){
-ms-grid-column: 3;
-ms-grid-row: 1;
}
#ranking dl:nth-of-type(3){
-ms-grid-column: 5;
-ms-grid-row: 1;
}
#ranking dl:nth-of-type(4){
-ms-grid-column: 3;
-ms-grid-row: 3;
}
#ranking dl:nth-of-type(5){
-ms-grid-column: 5;
-ms-grid-row: 3;
}
#ranking dl:nth-of-type(even){
margin-left: auto;
}
#experience{}
#experience h3+div{
grid-gap: 2em 1.5em;
}
#area{}
#area header{
display: flex;
align-items: flex-end;
justify-content: space-between;
}
#area nav{
padding: 0;
}
#area nav li{
width: 5em;
}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
#gifujin{}
#gifujin dl{}
#gifujin dl:first-child{
margin-bottom: 3em;
}
#gifujin dl:nth-of-type(n+2){
width: calc(33.33% - 1.5em);
}
#gifujin dl:nth-of-type(n+2):not(:nth-of-type(3n+2)){
margin-left: 2em;
}
#gifujin dl:nth-of-type(n+5){
display: none;
}
#column{}
#column h3+div{
grid-template-columns: repeat(3, 1fr);
}
#experience{}
#experience h3+div{
grid-template-columns: repeat(3, 1fr);
}
}
/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#hero{
position: relative;
}
#hero dt{
left: 1.5em;
bottom: 1.5em;
width: calc(100% - 3em);
}
#heroScroll{
position: absolute;
left: calc(50% - 5em);
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 10em;
padding-bottom: 6.2em;
color: #fff;
pointer-events: none;
z-index: 10;
}
#heroScroll span{
font-size: 0.875em;
}
#heroScroll:before,
#heroScroll:after{
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 1px;
height: 6em;
}
#heroScroll:before{
background: currentColor;
}
#heroScroll:after{
background: #1696ac;
animation: heroScroll infinite 3s none;
}
@keyframes heroScroll{
0% {
transform-origin: center top;
transform: scaleY(0);
}
30% {
transform-origin: center top;
transform: scaleY(1);
}
31% {
transform-origin: center bottom;
transform: scaleY(1);
}
60% {
transform-origin: center bottom;
transform: scaleY(0);
}
100% {
transform-origin: center bottom;
transform: scaleY(0);
}
}
#alert{}
#alert .wrap{
padding: 2em;
}
#recommended{}
#recommended section{
display: flex;
flex-direction: column;
}
#recommended h3+div{
align-self: center;
width: 100vw;
}
#recommended dl{
flex-wrap: wrap;
align-items: flex-start;
}
#recommended dl:before{
width: 100%;
margin-bottom: 1em;
}
#recommended dt{
width: calc(100% - 3em);
font-size: 1.5em;
}
#recommended dt+dd{
width: 100%;
margin-bottom: 1em;
}
#recommended .thumb{
border-radius: 12px;
}
#recommended .slick-list{
margin: 0 -1.5em;
overflow: visible;
}
#recommended .slick-slide{
margin: 0 1.5em;
}
#recommended .slick-arrow{
position: absolute;
top: -5em;
margin: 0;
}
#recommended .slick-prev{
transform: translate(-4em,0);
}
#gifujin{}
#gifujin dl{}
#gifujin dl:first-child{
display: -ms-grid;
display: grid;
}
#gifujin dl:first-child dt{
-ms-grid-column: 3;
-ms-grid-row: 1;
margin-top: 1em;
font-size: 1.75em;
}
#gifujin dl:first-child dt+dd{
position: relative;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 5;
grid-row: 1 / 5;
}
#gifujin dl:first-child dd{}
#gifujin dl:first-child dd:nth-of-type(2){
-ms-grid-column: 3;
-ms-grid-row: 2;
margin: 1em 0 2em 0;
}
#gifujin dl:first-child dd:nth-of-type(3){
-ms-grid-column: 3;
-ms-grid-row: 3;
}
#gifujin .thumb{
border-radius: 12px;
}
#theme{}
#theme .slick-list{
margin: 0 -1em;
}
#theme .slick-slide{
margin: 0 1em;
}
#theme .slick-dots{
margin-top: 2em;
}
#area{
padding-bottom: 8em;
}
#area h3+div{
display: -ms-grid;
-ms-grid-columns: 1fr 1.5fr 1fr;
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
}
#area dl{
width: 100%;
max-width: 300px;
}
#area dl:nth-of-type(1){
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-column: 1;
grid-row: 1;
}
#area dl:nth-of-type(2){
-ms-grid-column: 3;
-ms-grid-row: 1;
grid-column: 3;
grid-row: 1;
}
#area dl:nth-of-type(3){
-ms-grid-column: 1;
-ms-grid-row: 2;
grid-column: 1;
grid-row: 2;
}
#area dl:nth-of-type(4){
-ms-grid-column: 3;
-ms-grid-row: 2;
grid-column: 3;
grid-row: 2;
}
#area dl:nth-of-type(even){
margin-left: auto;
}
#movie{}
#movie h2+div{
width: calc(100% - 15em);
padding-left: 5vw;
}
#movie h2+div+div{
width: 100%;
}
#movie .wrap{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.subject{
margin-left: 1em;
}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#nav{}
#nav #sns{
margin-top: 3em;
}
#recommended{}
#recommended .slick-list{
padding: 0 calc(50% - 360px);
}
#recommended .slick-arrow{
right: calc(50% - 360px);
}
#gifujin{}
#gifujin h3+div+div{
margin-top: 3em;
}
#gifujin dl{}
#gifujin dl:first-child{
-ms-grid-columns: 1fr 3em 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 0 3em;
}
#gifujin dl:first-child .thumb{
width: calc(50vw - 1.5em);
}
#column{}
#column h3+div{
grid-gap: 3em 2em;
}
#column h3+div+div{
margin-top: 3em;
}
#ranking{}
#ranking h3+div{
grid-gap: 3em 2em;
}
#experience{}
#experience h3+div{
grid-gap: 3em 2em;
}
#experience h3+div+div{
margin-top: 3em;
}
#area{}
#area nav{}
#area nav li{
width: 4em;
}
#area dl{}
#area dl:nth-of-type(n+3){
margin-top: 2em;
}
#area figure{}
#area figure svg{
height: 800px;
}
#movie{}
#movie h2+div+div{
margin-top: 3em;
}
}
/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#nav{}
#nav #sns{
margin-top: 4em;
}
#main{}
#main #navTool{
height: auto;
padding: calc(50vw + 12em) 0 0 0;
}
#main #navTool a{
color: inherit;
text-decoration: none;
}
#gifujin{}
#gifujin h3+div+div{
margin-top: 4em;
}
#gifujin dl{}
#gifujin dl:first-child{
-ms-grid-columns: 1fr 4em 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 0 4em;
margin-bottom: 4em;
}
#gifujin dl:first-child .thumb{
}
#gifujin dl:nth-of-type(n+2){
width: calc(25% - 1.5em);
}
#gifujin dl:nth-of-type(n+2):not(:nth-of-type(4n+2)){
margin-left: 2em;
}
#gifujin dl:nth-of-type(n+6){
margin-top: 2em;
}
#column{}
#column h3+div{
grid-template-columns: 1.5fr 1fr 1fr;
grid-gap: 3em 3em;
}
#column h3+div+div{
margin-top: 4em;
}
#column dl{}
#column dl:nth-child(1){
grid-column: 1;
grid-row: 1 / 3;
}
#ranking{}
#ranking h3+div{
grid-gap: 3em 3em;
}
#experience{}
#experience h3+div{
grid-template-columns: 1.5fr 1fr 1fr;
grid-gap: 3em 3em;
}
#experience h3+div+div{
margin-top: 4em;
}
#experience dl{}
#experience dl:nth-child(1){
grid-column: 1;
grid-row: 1 / 3;
}
#area{
padding-bottom: 8em;
}
#area nav{}
#area nav li{
width: 6em;
}
#area dl{}
#area dl:nth-of-type(n+3){
margin-top: 4em;
}
#area figure{}
#area figure svg{
height: 1123px;
}
#information{}
#information header{
width: 20em;
}
#information section{
width: calc(100% - 22em);
}
#information footer{
width: 100%;
}
#information .wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#movie{}
#movie h2+div+div{
margin-top: 4em;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
#recommended{}
#recommended .slick-list{
padding: 0 calc(50% - 480px);
}
#recommended .slick-arrow{
right: calc(50% - 480px);
}
#area{}
#area:after{
transform: translateY(70%);
}
}
@media (min-width: 1200px) {
/*1200px以上*/
#recommended{}
#recommended .slick-list{
padding: 0 calc(50% - 570px);
}
#recommended .slick-arrow{
right: calc(50% - 570px);
}
}