ああああああああああああああああああああああああああああああああああああ
```
*/
.mod-penetrationContent {
margin: 1em -500%;
padding: 1em 500%;
background: #bbb;
/*
---
name: ブラウザ幅いっぱいの背景
category: penetration content
---
ラッパーを貫通してwidthフルなコンテンツエリアを作る（背景を変えたい時用）。
ただし、背景画像をcoverしたい場合は使えない＞＜
```jade
.mod-penetrationContent
p.mod-para ああああああああああああああああああああああああああああああああああああ
```
*/
}
.mod-penetrationContent:first-child {
margin-top: 0;
}
.mod-penetrationContent:last-child {
margin-top: 0;
}
/*
---
name: faq
category:
- faq
---
QをクリックでAを開閉。
```jade
dl.mod-faq
dt.sub-q
div.sub-inner
p.mod-para しつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもんしつもん
dd.sub-a
div.sub-inner
p.mod-para かいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとうかいとう
```
*/
.mod-faq {
padding-bottom: 15px;
margin-top: 15px;
border-bottom: 1px dotted #999;
}
.mod-faq .sub-q {
*zoom: 1;
/*
---
name: clearfix
category: -mixin
---
```scss
@include clearfix;
```
*/
}
.mod-faq .sub-q:after {
content: '';
display: table;
clear: both;
}
.mod-faq .sub-q:before {
content: "Q:";
display: inline-block;
width: 2em;
height: 1em;
float: left;
margin-right: 10px;
}
.mod-faq .sub-q .sub-inner {
overflow: hidden;
}
.mod-faq .sub-q:hover {
cursor: pointer;
}
.mod-faq .sub-a {
*zoom: 1;
/*
---
name: clearfix
category: -mixin
---
```scss
@include clearfix;
```
*/
display: none;
margin-top: 15px;
}
.mod-faq .sub-a:after {
content: '';
display: table;
clear: both;
}
.mod-faq .sub-a:before {
content: "A:";
display: inline-block;
width: 2em;
height: 1em;
float: left;
margin-right: 10px;
}
.mod-faq .sub-a .sub-inner {
overflow: hidden;
}
.mod-faq .mod-para:last-child {
margin-bottom: 0;
}
.mod-faq:first-child {
border-top: 1px dotted #999;
padding: 15px 0;
}
.sns {
padding: 15px 30px;
background: #3c2105;
}
.sns > ul {
text-align: center;
letter-spacing: -.34em;
}
.sns > ul li {
display: inline-block;
text-align: left;
width: 25%;
}
.sns > ul li.line img {
display: block;
}
@media screen and (min-width: 768px) {
.sns {
position: fixed;
z-index: 100;
top: 80px;
right: 13px;
padding: 0;
background: transparent;
}
.sns > ul {
margin: auto;
}
.sns > ul li {
display: inline-block;
width: 31px;
background: white;
border-radius: 3px;
overflow: hidden;
margin-left: 5px;
}
.sns > ul li.line {
display: none;
}
.sns > ul li img {
display: block;
}
.sns > ul li:hover img {
opacity: .5;
}
}
.mod-narrowContent {
width: 90%;
margin-left: auto;
margin-right: auto;
/*
---
name: コンテンツの幅を狭くしたい時に使う
category: narrow content
---
コンテンツの幅を狭くしサイドにマージンが付きます。
```jade
.mod-narrowContent
p.mod-para PC/SPとも
```
*/
}
@media screen and (min-width: 768px) {
.mod-narrowContentPc {
width: 90%;
margin-left: auto;
margin-right: auto;
/*
---
name: コンテンツの幅を狭くしたい時に使う(PC)
category: narrow content
---
コンテンツの幅を狭くしサイドにマージンが付きます。
```jade
.mod-narrowContentPc
p.mod-para PCのみ
```
*/
}
}
@media screen and (max-width: 767px) {
.mod-narrowContentSp {
width: 90%;
margin-left: auto;
margin-right: auto;
/*
---
name: コンテンツの幅を狭くしたい時に使う(SP)
category: narrow content
---
コンテンツの幅を狭くしサイドにマージンが付きます。
```jade
.mod-narrowContentSp
p.mod-para SPのみ
```
*/
}
}
/*
---
name: group
category:
- grouping
---
枠や背景色でグルーピングしたい時や、見出しを伴わないが、コンテンツ間にマージンがほしい時に使用
*/
/*
---
name: カラムレイアウトの中で使った例
category:
- grouping
---
```jade
.mod-column
.sub-cell._x1of4
.sub-inner
.mod-group.-typeDummy
.mod-image: img(src="https://placehold.jp/fff/500x350.png?text=dummy",alt="")
.sub-cell._x1of4
.sub-inner
.mod-group.-typeDummy
.mod-image: img(src="https://placehold.jp/fff/500x350.png?text=dummy",alt="")
.sub-cell._x1of4
.sub-inner
.mod-group.-typeDummy
.mod-image: img(src="https://placehold.jp/fff/500x350.png?text=dummy",alt="")
.sub-cell._x1of4
.sub-inner
.mod-group.-typeDummy
.mod-image: img(src="https://placehold.jp/fff/500x350.png?text=dummy",alt="")
```
*/
.mod-group {
margin: 30px 0;
/*
---
name: マージンがほしいだけ
category:
- grouping
---
```jade
.mod-group
.mod-para first-childなので下マージのみ
.mod-group
.mod-para あああああああああああああああああああああああああああああああああああああああああああああああああああああああ
.mod-group
.mod-para last-childなので上マージのみ
```
*/
}
.mod-group.-typeDummy {
padding: 10px;
border: 2px solid #bbb;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*
---
name: 枠
category:
- grouping
---
```jade
.mod-group.-typeDummy
.mod-para あああああああああああああああああああああああああああああああああああああああああああああああああああああああ
.mod-group.-typeDummy
.mod-para あああああああああああああああああああああああああああああああああああああああああああああああああああああああ
```
*/
}
.mod-group.-typeDummy2 {
background: #eee;
padding: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*
---
name: 背景色
category:
- grouping
---
```jade
.mod-group.-typeDummy2
.mod-para あああああああああああああああああああああああああああああああああああああああああああああああああああああああ
.mod-group.-typeDummy2
.mod-para あああああああああああああああああああああああああああああああああああああああああああああああああああああああ
```
*/
}
.mod-group.-roundWhite {
background: white;
border-radius: 3px;
padding: 30px 15px;
}
@media screen and (min-width: 768px) {
.mod-group.-roundWhite {
border-radius: 6px;
padding: 60px 30px;
}
}
.mod-group.-roundBlue {
background: #e4f0fa;
border-radius: 3px;
padding: 30px 15px;
}
@media screen and (min-width: 768px) {
.mod-group.-roundBlue {
border-radius: 6px;
}
}
.mod-group.-inner {
margin: 15px 0;
}
@media screen and (min-width: 768px) {
.mod-group.-inner {
margin: 35px 0;
}
}
.mod-group.-dot {
margin: 15px 0;
margin-left: -15px;
margin-right: -15px;
padding: 15px;
border: 2px dotted #d5d5d5;
border-radius: 5px;
}
@media screen and (min-width: 768px) {
.mod-group.-dot {
padding: 30px 45px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.mod-group.-dot {
margin-left: 1px;
margin-right: 1px;
}
}
.mod-group.-pattern {
margin: 40px 0;
}
@media screen and (min-width: 768px) {
.mod-group.-pattern {
margin: 80px 0;
}
}
.mod-group.-white {
background: white;
/*
---
name: 背景色
category:
- grouping
---
```jade
.mod-group.-white
.mod-para 白背景のグルーピング
```
*/
}
.mod-group.-newsGray {
padding: 25px 50px;
background: #eeeeee;
/*
---
name: 背景色
category:
- grouping
---
```jade
.mod-group.-white
.mod-para 白背景のグルーピング
```
*/
}
@media screen and (min-width: 768px) {
.mod-group.-newsGray {
padding: 50px 100px;
}
}
.mod-group.-margin {
margin: 30px 0 60px;
/*
---
name: マージン
category:
- grouping
---
```jade
.mod-group.-margin
.mod-para SP時 margin:30px 0 60px;
.mod-para PC時 margin:60px 0 120px;
```
*/
}
@media screen and (min-width: 768px) {
.mod-group.-margin {
margin: 60px 0 120px;
}
}
.mod-group.-margin2 {
margin: 25px 0;
/*
---
name: マージン2
category:
- grouping
---
```jade
.mod-group.-margin
.mod-para SP時 margin:25px 0;
.mod-para PC時 margin:45px 0;
```
*/
}
@media screen and (min-width: 768px) {
.mod-group.-margin2 {
margin: 45px 0;
}
}
.mod-group.-gray {
background: #eeeeee;
padding: 20px;
}
@media screen and (min-width: 768px) {
.mod-group.-gray {
padding: 40px;
}
}
.mod-group:first-child {
margin-top: 0;
}
.mod-group:last-child {
margin-bottom: 0;
}
.modalmovie {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.modalmovie .movwrap {
width: 100%;
height: 0;
max-width: 960px;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.modalmovie .movwrap .inner {
position: absolute;
height: 100%;
width: 100%;
}
.modalmovie .movwrap .inner iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.modalmovie .movwrap .inner .close {
position: absolute;
left: 0;
right: 0;
bottom: -50px;
margin: auto;
border: 1px solid blue;
color: black;
display: inline-block;
padding: 5px 10px;
background: white;
width: 5em;
text-align: center;
border-radius: 2px;
font-size: 10px;
font-size: 1rem;
/*
---
name: fontsize
category: -mixin
---
font-size:引数px; font-size:引数/10rem;
に設定
```scss
@include fontsize(引数);
```
*/
}
.modalmovie .movwrap .inner .close:hover {
cursor: pointer;
opacity: .8;
}
/*
---
name: モーダル動画再生
category: modal movie
---
何故か動画が再生できない。いったん保留
```jade
p.mod-image
a.js-movPlay.mod-playicon(href="https://www.youtube.com/embed/JCmoYYQcWTk" data-w="960" data-h="540")
img(src="https://placehold.jp/fff/800x400.png?text=dummy" alt="")
```
*/
.mod-playicon {
position: relative;
display: inline-block;
}
.mod-playicon::before {
content: "";
display: block;
width: 15.217%;
height: 0;
padding-top: 15.217%;
border-radius: 1000px;
background: #0f525e url("/ex/meitantei_pikachu/common/images/icon/playArrow.png") 55% 50% no-repeat;
background-size: 30% auto;
color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 1;
}
@media screen and (min-width: 768px) {
.mod-playicon::before {
width: 12.5%;
height: 0;
padding-top: 12.5%;
}
}
.mod-playicon::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: white;
opacity: 0;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
}
.mod-playicon:hover::after {
opacity: .4;
}
.mod-playicon img {
width: 100%;
}
.mod-footerlogo {
text-align: left;
padding: 0 15px 50px;
}
@media screen and (min-width: 768px) {
.mod-footerlogo {
text-align: center;
}
}
.mod-footerlogo > li {
display: inline-block;
vertical-align: middle;
margin-right: .5em;
}
.mod-footerlogo > li a {
display: block;
}
.mod-footerlogo > li.sub-3ds a {
width: 65px;
padding-top: 10px;
height: 0;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 785% 4395%;
background-position: 83.95062% 90.80326%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerlogo > li.sub-3ds a:after {
content: '';
display: block;
padding-top: 15.38462%;
}
@media screen and (min-width: 768px) {
.mod-footerlogo > li.sub-3ds a {
width: 109px;
padding-top: 15px;
}
}
.mod-footerlogo > li.sub-pokemon a {
width: 113px;
padding-top: 12px;
height: 0;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 452% 3663%;
background-position: 0% 100%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerlogo > li.sub-pokemon a:after {
content: '';
display: block;
padding-top: 10.61947%;
}
@media screen and (min-width: 768px) {
.mod-footerlogo > li.sub-pokemon a {
width: 180px;
padding-top: 19px;
}
}
.mod-footerlogo > li.sub-nintendo a {
width: 47px;
padding-top: 12px;
height: 0;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 1086% 3663%;
background-position: 97.73463% 23.39181%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerlogo > li.sub-nintendo a:after {
content: '';
display: block;
padding-top: 25.53191%;
}
@media screen and (min-width: 768px) {
.mod-footerlogo > li.sub-nintendo a {
width: 79px;
padding-top: 20px;
}
}
.mod-newsindex {
background: #fdd000;
padding: 20px 500% 35px;
margin: 0 -500%;
position: relative;
}
@media screen and (min-width: 768px) {
.mod-newsindex {
padding: 36px 500% 60px;
}
}
.mod-newsindex::after {
content: "";
display: block;
width: auto;
height: 5px;
background: url("/ex/meitantei_pikachu/common/images//gizagiza.png") bottom left repeat-x;
background-size: auto 5px;
position: absolute;
bottom: -5px;
left: 0;
right: 0;
margin: auto;
z-index: 2;
}
@media screen and (min-width: 768px) {
.mod-newsindex::after {
height: 12px;
background-size: auto 12px;
bottom: -12px;
}
}
.mod-newsindex > .sub-header {
margin-bottom: 13px;
*zoom: 1;
/*
---
name: clearfix
category: -mixin
---
```scss
@include clearfix;
```
*/
}
.mod-newsindex > .sub-header:after {
content: '';
display: table;
clear: both;
}
.mod-newsindex > .sub-header > h2.sub-heading {
float: left;
}
.mod-newsindex > .sub-header > h2.sub-heading > img {
max-width: 129px;
}
@media screen and (min-width: 768px) {
.mod-newsindex > .sub-header > h2.sub-heading > img {
max-width: 189px;
margin-left: -13px;
}
}
.mod-newsindex > .sub-header > a.mod-button {
float: right;
}
.mod-news > .sub-wrapper > .sub-item {
background: white;
border-radius: 5px;
padding: 15px;
margin-bottom: 3px;
display: block;
}
.mod-news > .sub-wrapper > .sub-item > .sub-date {
font-size: 12px;
font-size: 1.2rem;
/*
---
name: fontsize
category: -mixin
---
font-size:引数px; font-size:引数/10rem;
に設定
```scss
@include fontsize(引数);
```
*/
font-weight: bold;
color: #6a3906;
}
.mod-news > .sub-wrapper > .sub-item > .sub-text {
font-size: 13px;
font-size: 1.3rem;
/*
---
name: fontsize
category: -mixin
---
font-size:引数px; font-size:引数/10rem;
に設定
```scss
@include fontsize(引数);
```
*/
color: #341c02;
}
.mod-news > .sub-wrapper > a.sub-item {
position: relative;
padding-right: 35px;
}
.mod-news > .sub-wrapper > a.sub-item:hover > .sub-text {
text-decoration: underline;
}
.mod-news > .sub-wrapper > a.sub-item::before {
content: "";
width: 21px;
height: 21px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 2836% 2442%;
background-position: 91.9797% 31.6726%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
position: absolute;
top: 15px;
bottom: 15px;
right: 15px;
margin: auto;
}
.mod-news > .sub-wrapper > a.sub-item::before:after {
content: '';
display: block;
padding-top: 100%;
}
.mod-news > .sub-wrapper > a.sub-item[target="_blank"] > .sub-text:after {
font-family: 'icon';
content: "\F006";
font-size: smaller;
font-weight: normal;
margin-left: 5px;
vertical-align: middle;
display: inline-block;
}
@media screen and (min-width: 768px) {
.mod-news {
margin-right: -4px;
margin-bottom: -4px;
letter-spacing: -.34em;
}
.mod-news > .sub-wrapper {
width: 33.33333%;
display: inline-block;
letter-spacing: 0;
vertical-align: top;
}
.mod-news > .sub-wrapper > .sub-item {
padding: 25px 15px;
margin-right: 4px;
margin-bottom: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.mod-news > .sub-wrapper > .sub-item > .sub-date {
font-size: 14px;
font-size: 1.4rem;
/*
---
name: fontsize
category: -mixin
---
font-size:引数px; font-size:引数/10rem;
に設定
```scss
@include fontsize(引数);
```
*/
}
.mod-news > .sub-wrapper > .sub-item > .sub-text {
font-size: 16px;
font-size: 1.6rem;
/*
---
name: fontsize
category: -mixin
---
font-size:引数px; font-size:引数/10rem;
に設定
```scss
@include fontsize(引数);
```
*/
line-height: 1.75;
}
.mod-news > .sub-wrapper > a.sub-item::before {
width: 20px;
height: 20px;
top: auto;
bottom: 10px;
right: 10px;
}
}
.mod-newsindex .mod-news > .sub-wrapper > .sub-item {
background: #fff6cc;
}
@media screen and (min-width: 768px) {
.mod-newscontents {
max-width: 820px;
}
}
.mod-topmoviearea {
padding: 35px 15px;
background: url("/ex/meitantei_pikachu/common/images/top/bg_moviearea@2x.jpg");
background-size: cover;
position: relative;
font-size: 0;
text-align: center;
}
.mod-topmoviearea::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
background: url("/ex/meitantei_pikachu/common/images/overlaydot.png");
opacity: .8;
}
.mod-topmoviearea > .sub-head {
position: relative;
z-index: 1;
*zoom: 1;
/*
---
name: clearfix
category: -mixin
---
```scss
@include clearfix;
```
*/
max-width: 980px;
margin: 0 auto 15px;
}
.mod-topmoviearea > .sub-head:after {
content: '';
display: table;
clear: both;
}
@media screen and (min-width: 768px) {
.mod-topmoviearea > .sub-head {
margin: 0 auto 25px;
}
}
.mod-topmoviearea > .sub-head > .sub-heading {
float: left;
width: 140px;
}
@media screen and (min-width: 768px) {
.mod-topmoviearea > .sub-head > .sub-heading {
width: 215px;
}
}
.mod-topmoviearea > .sub-head > .sub-link {
float: right;
}
.mod-topmoviearea > .sub-head > .sub-link > .mod-button {
width: 126px;
}
@media screen and (min-width: 768px) {
.mod-topmoviearea > .sub-head > .sub-link > .mod-button {
width: 160px;
}
}
.mod-topmoviearea > .sub-thumb {
display: inline-block;
border-radius: 5px;
overflow: hidden;
position: relative;
z-index: 2;
}
.mod-topmoviearea > .sub-thumb > .sub-title {
text-align: left;
background: white;
font-size: 13px;
font-size: 1.3rem;
/*
---
name: fontsize
category: -mixin
---
font-size:引数px; font-size:引数/10rem;
に設定
```scss
@include fontsize(引数);
```
*/
font-weight: bold;
padding: .5em 1.5em;
}
@media screen and (min-width: 768px) {
.mod-topmoviearea {
background: url("/ex/meitantei_pikachu/common/images/top/bg_moviearea.jpg");
background-size: cover;
padding: 64px 15px 64px;
}
.mod-topmoviearea > .sub-thumb {
max-width: 640px;
}
.mod-topmoviearea > .sub-thumb > .sub-title {
font-size: 16px;
font-size: 1.6rem;
/*
---
name: fontsize
category: -mixin
---
font-size:引数px; font-size:引数/10rem;
に設定
```scss
@include fontsize(引数);
```
*/
padding: 1.0em 2.5em;
}
}
.mod-topsummary {
padding: 0 30px;
position: relative;
}
.mod-topsummary > .sub-wrapper > .sub-content > .sub-inner > .sub-textarea {
background: #fdd000;
padding: 30px;
}
.mod-topsummary.-right {
background: url("/ex/meitantei_pikachu/common/images/top/bg_summary_right@2x.jpg") top left no-repeat;
background-size: 95% auto;
}
.mod-topsummary.-right > .sub-wrapper > .sub-content > .sub-inner > .sub-textarea {
background: #fdd000;
padding: 30px;
margin-left: -30px;
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.mod-topsummary.-right {
background: url("/ex/meitantei_pikachu/common/images/top/bg_summary_right.jpg") top left no-repeat;
background-size: auto;
}
.mod-topsummary.-right > .sub-wrapper {
max-width: 980px;
margin: auto;
position: relative;
*zoom: 1;
/*
---
name: clearfix
category: -mixin
---
```scss
@include clearfix;
```
*/
}
.mod-topsummary.-right > .sub-wrapper:after {
content: '';
display: table;
clear: both;
}
.mod-topsummary.-right > .sub-wrapper > .sub-content {
width: 50%;
}
.mod-topsummary.-right > .sub-wrapper > .sub-content:nth-child(1) {
float: right;
position: relative;
z-index: 1;
}
.mod-topsummary.-right > .sub-wrapper > .sub-content:nth-child(1) > .sub-inner {
padding-left: 20px;
}
.mod-topsummary.-right > .sub-wrapper > .sub-content:nth-child(2) {
float: left;
}
.mod-topsummary.-right > .sub-wrapper > .sub-content:nth-child(2) > .sub-inner {
padding-right: 20px;
}
.mod-topsummary.-right > .sub-wrapper > .sub-content:nth-child(2) > .sub-inner > .sub-textarea {
padding: 40px 0;
position: relative;
}
.mod-topsummary.-right > .sub-wrapper > .sub-content:nth-child(2) > .sub-inner > .sub-textarea::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
margin-right: -108%;
width: 500%;
height: 100%;
background: #fdd000;
z-index: 0;
}
.mod-topsummary.-right > .sub-wrapper > .sub-content > .sub-inner > .sub-textarea {
background: #fdd000;
padding: 30px;
margin-left: 0px;
margin-top: 40px;
}
.mod-topsummary.-right > .sub-wrapper > .sub-content > .sub-inner > .sub-textarea > .mod-para {
position: relative;
}
}
.mod-topsummary.-left {
background: url("/ex/meitantei_pikachu/common/images/top/bg_summary_left@2x.jpg") top right no-repeat;
background-size: 95% auto;
}
.mod-topsummary.-left > .sub-wrapper > .sub-content > .sub-inner > .sub-textarea {
background: #fdd000;
padding: 30px;
margin-right: -30px;
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.mod-topsummary.-left {
background: url("/ex/meitantei_pikachu/common/images/top/bg_summary_left.jpg") top right no-repeat;
background-size: auto;
}
.mod-topsummary.-left > .sub-wrapper {
max-width: 980px;
margin: auto;
position: relative;
*zoom: 1;
/*
---
name: clearfix
category: -mixin
---
```scss
@include clearfix;
```
*/
}
.mod-topsummary.-left > .sub-wrapper:after {
content: '';
display: table;
clear: both;
}
.mod-topsummary.-left > .sub-wrapper > .sub-content {
width: 50%;
}
.mod-topsummary.-left > .sub-wrapper > .sub-content:nth-child(1) {
float: left;
position: relative;
z-index: 1;
}
.mod-topsummary.-left > .sub-wrapper > .sub-content:nth-child(1) > .sub-inner {
padding-right: 20px;
}
.mod-topsummary.-left > .sub-wrapper > .sub-content:nth-child(2) {
float: right;
}
.mod-topsummary.-left > .sub-wrapper > .sub-content:nth-child(2) > .sub-inner {
padding-left: 20px;
}
.mod-topsummary.-left > .sub-wrapper > .sub-content:nth-child(2) > .sub-inner > .sub-textarea {
padding: 40px 0;
position: relative;
}
.mod-topsummary.-left > .sub-wrapper > .sub-content:nth-child(2) > .sub-inner > .sub-textarea::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
margin-left: -108%;
width: 500%;
height: 100%;
background: #fdd000;
z-index: 0;
}
.mod-topsummary.-left > .sub-wrapper > .sub-content > .sub-inner > .sub-textarea {
background: #fdd000;
padding: 30px;
margin-right: 0px;
margin-top: 40px;
}
.mod-topsummary.-left > .sub-wrapper > .sub-content > .sub-inner > .sub-textarea > .mod-para {
position: relative;
}
}
.mod-topsummary > .sub-wrapper > .sub-content > .sub-inner > .sub-textarea .mod-button {
padding: .6em 1em;
min-width: 60%;
}
@media screen and (min-width: 768px) {
.mod-topsummary > .sub-wrapper > .sub-content > .sub-inner > .sub-textarea .mod-button {
min-width: 228px;
}
}
.mod-topsummary.-adjust1 {
z-index: 5;
}
@media screen and (max-width: 767px) {
.mod-topsummary.-adjust1 > .sub-wrapper > .sub-content:nth-child(1) .mod-image img {
margin: 10% 0 -10% 25%;
}
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust1 > .sub-wrapper > .sub-content:nth-child(1) .mod-image img {
margin: 75px -22px 0 40px;
}
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust1 > .sub-wrapper > .sub-content:nth-child(2) .mod-image {
margin-right: -60px;
margin-top: 150px;
}
}
.mod-topsummary.-adjust2 {
z-index: 4;
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust2 {
margin-top: -40px;
padding-top: 160px;
}
}
.mod-topsummary.-adjust2 > .sub-wrapper > .sub-content:nth-child(1) .mod-image {
margin-left: -193px;
}
@media screen and (max-width: 767px) {
.mod-topsummary.-adjust2 > .sub-wrapper > .sub-content:nth-child(1) .mod-image {
margin: -30px -30px 25px -30px;
}
.mod-topsummary.-adjust2 > .sub-wrapper > .sub-content:nth-child(1) .mod-image img {
margin-top: 80px;
}
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust2 > .sub-wrapper > .sub-content:nth-child(2) .mod-image {
margin-top: 34px;
}
}
.mod-topsummary.-adjust3 {
z-index: 3;
margin-top: -25px;
padding-top: 75px;
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust3 {
margin-top: -55px;
padding-top: 60px;
}
}
@media screen and (max-width: 767px) {
.mod-topsummary.-adjust3 > .sub-wrapper > .sub-content:nth-child(1) .mod-image img {
margin: 0 -10% -13% 5%;
}
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust3 > .sub-wrapper > .sub-content:nth-child(1) .mod-image img {
margin: 0 -22px 0 40px;
}
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust3 > .sub-wrapper > .sub-content:nth-child(2) .mod-image {
margin-right: -60px;
margin-top: 130px;
}
}
.mod-topsummary.-adjust4 {
z-index: 2;
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust4 {
margin-top: -86px;
padding-top: 120px;
}
}
@media screen and (max-width: 767px) {
.mod-topsummary.-adjust4 > .sub-wrapper > .sub-content:nth-child(1) .mod-image {
margin: -30px 20px 25px 20px;
}
.mod-topsummary.-adjust4 > .sub-wrapper > .sub-content:nth-child(1) .mod-image img {
margin-top: 80px;
}
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust4 > .sub-wrapper > .sub-content:nth-child(1) .mod-image {
margin-right: 80px;
}
}
@media screen and (min-width: 1023px) {
.mod-topsummary.-adjust4 > .sub-wrapper > .sub-content:nth-child(1) .mod-image {
margin-left: -50px;
}
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust4 > .sub-wrapper > .sub-content:nth-child(2) .mod-image {
margin-top: 34px;
}
}
@media screen and (min-width: 768px) {
.mod-topsummary.-adjust4 > .sub-wrapper > .sub-content:nth-child(2) .sub-textarea {
min-height: 240px;
}
}
._iconNew {
position: relative;
}
._iconNew::before {
content: "";
display: block;
width: 39px;
height: 14px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 1595% 3822%;
background-position: 94.67085% 27.33645%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
position: absolute;
}
._iconNew::before:after {
content: '';
display: block;
padding-top: 35.9375%;
}
@media screen and (min-width: 768px) {
._iconNew::before {
width: 64px;
height: 23px;
}
}
.mod-topsummary ._iconNew {
position: relative;
margin-top: 45px;
}
@media screen and (min-width: 768px) {
.mod-topsummary ._iconNew {
margin-top: 0;
}
}
.mod-topsummary ._iconNew::before {
top: -22px;
left: 0;
}
@media screen and (min-width: 768px) {
.mod-topsummary ._iconNew::before {
top: -60px;
left: 0;
}
}
.mod-specarea {
margin-top: 60px;
background: url("/ex/meitantei_pikachu/common/images/top/bg_specarea@2x.jpg") top center no-repeat;
background-size: cover;
padding: 40px 15px 60px;
position: relative;
}
.mod-specarea::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
background: url("/ex/meitantei_pikachu/common/images/overlaydot.png");
opacity: .8;
}
@media screen and (min-width: 768px) {
.mod-specarea {
margin-top: 120px;
background: url("/ex/meitantei_pikachu/common/images/top/bg_specarea.jpg") top center no-repeat;
background-size: cover;
padding: 60px 15px 80px;
}
.mod-specarea > .sub-inner {
max-width: 980px;
margin: auto;
}
}
.mod-specarea h2 {
position: relative;
z-index: 2;
margin-bottom: 20px;
}
.mod-specarea h2 img {
width: 31.884058%;
}
@media screen and (min-width: 768px) {
.mod-specarea h2 {
text-align: left;
margin-bottom: 30px;
}
.mod-specarea h2 img {
width: 147px;
}
}
.mod-specarea .sub-spec {
position: relative;
z-index: 2;
background: white;
padding: 30px;
}
@media screen and (min-width: 768px) {
.mod-specarea .sub-spec {
padding: 55px;
}
}
.mod-specarea .sub-spec .mod-image.-package img {
width: 64%;
}
@media screen and (min-width: 768px) {
.mod-specarea .sub-spec .mod-image.-package {
padding-right: 18%;
}
.mod-specarea .sub-spec .mod-image.-package img {
width: auto;
}
}
.mod-specarea .sub-spec .mod-column > .sub-cell:nth-child(1) {
margin-bottom: 15px;
}
.mod-specarea .sub-spec .mod-column > .sub-cell .mod-likeTable2 dt.sub-dt {
min-width: 7em;
}
@media screen and (min-width: 768px) {
.mod-specarea .sub-spec .mod-column > .sub-cell:nth-child(3) .mod-likeTable2 {
padding-left: 30px;
}
.mod-specarea .sub-spec .mod-column > .sub-cell:nth-child(3) .mod-likeTable2 dt.sub-dt {
min-width: 7em;
}
}
.mod-character {
min-height: 410px;
}
@media screen and (min-width: 768px) {
.mod-character {
min-height: 515px;
}
.mod-character.-last > .sub-inner {
padding-bottom: 120px;
}
}
.mod-character:nth-child(2n) {
background: url("/ex/meitantei_pikachu/common/images/character/bg_r@2x.png") top right no-repeat;
background-size: 307px auto;
}
@media screen and (min-width: 768px) {
.mod-character:nth-child(2n) {
background: url("/ex/meitantei_pikachu/common/images/character/bg_r.png") top right no-repeat;
}
}
.mod-character:nth-child(2n+1) {
background: url("/ex/meitantei_pikachu/common/images/character/bg_l@2x.png") top left no-repeat;
background-size: 307px auto;
}
@media screen and (min-width: 768px) {
.mod-character:nth-child(2n+1) {
background: url("/ex/meitantei_pikachu/common/images/character/bg_l.png") top left no-repeat;
}
}
@media screen and (max-width: 767px) {
.mod-character > .sub-inner {
margin: -62px 0 62px;
padding: 40px 30px 40px;
}
}
@media screen and (min-width: 768px) {
.mod-character > .sub-inner {
padding: 40px 30px 60px;
}
}
@media screen and (max-width: 767px) {
.mod-character.-adjust1 {
margin-top: -72px;
padding-top: 110px;
}
}
@media screen and (min-width: 768px) {
.mod-character .mod-twoColContent > .sub-content:nth-child(1) {
width: 40%;
}
.mod-character .mod-twoColContent > .sub-content:nth-child(2) {
width: 60%;
}
.mod-character.-adjust1 {
margin-top: -137px;
padding-top: 130px;
}
}
._relative {
position: relative;
}
.mod-button.-red.-ch1 {
position: absolute;
top: 27%;
left: 35%;
}
@media screen and (min-width: 768px) {
.mod-button.-red.-ch1 {
top: 33%;
left: 26%;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.mod-button.-red.-ch1 {
top: 33%;
left: 36%;
}
}
.mod-button.-red.-ch1-02 {
position: absolute;
top: 35%;
left: 30%;
}
@media screen and (min-width: 768px) {
.mod-button.-red.-ch1-02 {
top: 38%;
left: 23%;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.mod-button.-red.-ch1-02 {
top: 38%;
left: 31%;
}
}
.mod-button.-red.-ch12 {
position: absolute;
top: 24%;
left: 32%;
}
@media screen and (min-width: 768px) {
.mod-button.-red.-ch12 {
top: 30%;
left: 23%;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.mod-button.-red.-ch12 {
top: 29%;
left: 27%;
}
}
.mod-cvBase {
background: rgba(0, 0, 0, 0.5);
display: none;
opacity: 0;
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.mod-cvBase.-view {
display: block;
opacity: 1;
}
.mod-cvBase > .sub-inner {
position: relative;
background: white;
display: block;
max-width: 760px;
padding: 30px;
margin: auto;
}
@media screen and (min-width: 768px) {
.mod-cvBase > .sub-inner {
padding: 40px;
}
}
.mod-cvBase > .sub-inner::before {
content: "";
display: block;
text-align: center;
width: 57px;
height: 57px;
border-radius: 100%;
position: absolute;
top: -28px;
right: -10px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 888% 764%;
background-position: 100% 0%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
@media screen and (min-width: 768px) {
.mod-cvBase > .sub-inner::before {
top: -28px;
right: -28px;
}
}
.mod-cvBase > .sub-inner::before:after {
content: '';
display: block;
padding-top: 100%;
}
.mod-cvBase > .sub-inner .mod-column.-cv {
display: none;
}
.mod-footerNav {
background: #fdd000;
padding: 30px 15px;
position: relative;
}
.mod-footerNav::before {
content: "";
position: absolute;
top: -5px;
left: 0;
display: block;
width: 100%;
height: 5px;
background: url("/ex/meitantei_pikachu/common/images/gizagiza2.png") top left repeat-x;
background-size: auto 5px;
}
@media screen and (min-width: 768px) {
.mod-footerNav::before {
height: 11px;
top: -11px;
background-size: auto;
}
}
@media screen and (min-width: 768px) {
.mod-footerNav .mod-nav {
max-width: 980px;
margin: auto;
}
}
.mod-footerNav .mod-nav > ul.sub-navlist {
list-style: none;
letter-spacing: -.34em;
line-height: 0;
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem {
display: inline-block;
letter-spacing: 0;
width: 50%;
}
@media screen and (min-width: 768px) {
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem {
width: 20%;
}
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem > a {
display: block;
margin: 3px 3px 0 0;
border-radius: 5px;
height: 0;
}
@media screen and (min-width: 768px) {
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem > a {
margin: 0px 4px 0 0;
}
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.top a {
width: auto;
padding-top: 35.087719%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 299% 733%;
background-position: 0% 0%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.top a:after {
content: '';
display: block;
padding-top: 35.08772%;
}
@media screen and (min-width: 768px) {
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.top {
display: none;
}
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.news a {
width: auto;
padding-top: 35.087719%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 299% 733%;
background-position: 0% 34.2556%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.news a:after {
content: '';
display: block;
padding-top: 35.08772%;
}
@media screen and (min-width: 768px) {
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.news a {
width: auto;
padding-top: 83.3333%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 532% 549%;
background-position: 48.73341% 69.54103%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.news a:after {
content: '';
display: block;
padding-top: 83.33333%;
}
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.pikachu a {
width: auto;
padding-top: 35.087719%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 299% 733%;
background-position: 51.84094% 34.2556%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.pikachu a:after {
content: '';
display: block;
padding-top: 35.08772%;
}
@media screen and (min-width: 768px) {
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.pikachu a {
width: auto;
padding-top: 83.3333%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 532% 549%;
background-position: 0% 69.54103%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.pikachu a:after {
content: '';
display: block;
padding-top: 83.33333%;
}
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.about a {
width: auto;
padding-top: 35.087719%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 299% 733%;
background-position: 51.84094% 17.1278%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.about a:after {
content: '';
display: block;
padding-top: 35.08772%;
}
@media screen and (min-width: 768px) {
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.about a {
width: auto;
padding-top: 83.3333%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 532% 549%;
background-position: 84.92159% 0%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.about a:after {
content: '';
display: block;
padding-top: 83.33333%;
}
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.character a {
width: auto;
padding-top: 35.087719%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 299% 733%;
background-position: 0% 17.1278%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.character a:after {
content: '';
display: block;
padding-top: 35.08772%;
}
@media screen and (min-width: 768px) {
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.character a {
width: auto;
padding-top: 83.3333%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 532% 549%;
background-position: 24.36671% 69.54103%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.character a:after {
content: '';
display: block;
padding-top: 83.33333%;
}
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.game a {
width: auto;
padding-top: 35.087719%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 299% 733%;
background-position: 51.84094% 0%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.game a:after {
content: '';
display: block;
padding-top: 35.08772%;
}
@media screen and (min-width: 768px) {
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.game a {
width: auto;
padding-top: 83.3333%;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
font-size: 0;
background-image: url("/ex/meitantei_pikachu/common/images/sprite.png");
background-size: 532% 549%;
background-position: 84.92159% 23.64395%;
/*
---
name: sprite
category: -mixin
---
[gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith#documentation)を使用しています。
レスポンシブ対応mixinは「[gulp.spritesmithをレスポンシブに対応させる](https://qiita.com/masterkey1009/items/f0b46bca302e193ad1a2)」をまるっと採用させていただいてます。
```jade
.sprite
```
```css
.sprite {
max-width:$dummy-01-width / 2;
max-height:$dummy-01-height / 2;
@include screen_l() {
max-width:$dummy-01-width;
max-height:$dummy-01-height;
}
@include sprite-responsive($dummy-01);
&:hover {
@include sprite-responsive($dummy-02);
}
}
```
*/
}
.mod-footerNav .mod-nav > ul.sub-navlist > li.sub-navitem.game a:after {
content: '';
display: block;
padding-top: 83.33333%;
}
}
/*
---
name: ブレイクポイントで表示切り替え
category: -helper
---
```jade
._showSp SPで表示
._showPc PCで表示
```
*/
@media screen and (min-width: 768px) {
._showSp {
display: none !important;
}
}
@media screen and (max-width: 767px) {
._showPc {
display: none !important;
}
}
/*
---
name: 横幅設定
category: -helper
---
横幅指定
おもにmod-columnでセルの幅指定に使用する
```jade
._x1of1: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of2: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of3: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of3: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of4: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of4: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of5: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of5: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of5: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x4of5: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of6: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of6: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x4of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x6of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of8: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of8: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of8: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x7of8: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x4of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x7of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x8of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of10: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of10: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x7of10: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x9of10: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
```
*/
._x1of1 {
width: 100%;
}
._x1of2 {
width: 50%;
}
._x1of3 {
width: 33.333%;
}
._x2of3 {
width: 66.666%;
}
._x1of4 {
width: 25%;
}
._x3of4 {
width: 75%;
}
._x1of5 {
width: 20%;
}
._x2of5 {
width: 40%;
}
._x3of5 {
width: 60%;
}
._x4of5 {
width: 80%;
}
._x1of6 {
width: 16.666%;
}
._x5of6 {
width: 83.333%;
}
._x1of7 {
width: 14.285%;
}
._x2of7 {
width: 28.571%;
}
._x3of7 {
width: 42.857%;
}
._x4of7 {
width: 57.142%;
}
._x5of7 {
width: 71.428%;
}
._x6of7 {
width: 85.714%;
}
._x1of8 {
width: 12.5%;
}
._x3of8 {
width: 37.5%;
}
._x5of8 {
width: 62.5%;
}
._x7of8 {
width: 87.5%;
}
._x1of9 {
width: 11.111%;
}
._x2of9 {
width: 22.222%;
}
._x4of9 {
width: 44.444%;
}
._x5of9 {
width: 55.555%;
}
._x7of9 {
width: 77.777%;
}
._x8of9 {
width: 88.888%;
}
._x1of10 {
width: 10%;
}
._x3of10 {
width: 30%;
}
._x7of10 {
width: 70%;
}
._x9of10 {
width: 90%;
}
/*
---
name: 横幅指定(スマホ時)
category: -helper
---
横幅指定(スマホ時)
おもにmod-columnでセルの幅指定に使用する
```jade
._x1of1_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of2_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of3_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of3_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of4_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of4_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of5_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of5_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of5_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x4of5_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of6_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of6_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x4of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x6of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of8_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of8_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of8_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x7of8_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x4of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x7of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x8of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of10_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of10_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x7of10_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x9of10_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
```
*/
@media screen and (max-width: 767px) {
._x1of1_sp {
width: 100% !important;
}
._x1of2_sp {
width: 50% !important;
}
._x1of3_sp {
width: 33.333% !important;
}
._x2of3_sp {
width: 66.666% !important;
}
._x1of4_sp {
width: 25% !important;
}
._x3of4_sp {
width: 75% !important;
}
._x1of5_sp {
width: 20% !important;
}
._x2of5_sp {
width: 40% !important;
}
._x3of5_sp {
width: 60% !important;
}
._x4of5_sp {
width: 80% !important;
}
._x1of6_sp {
width: 16.666% !important;
}
._x5of6_sp {
width: 83.333% !important;
}
._x1of7_sp {
width: 14.285% !important;
}
._x2of7_sp {
width: 28.571% !important;
}
._x3of7_sp {
width: 42.857% !important;
}
._x4of7_sp {
width: 57.142% !important;
}
._x5of7_sp {
width: 71.428% !important;
}
._x6of7_sp {
width: 85.714% !important;
}
._x1of8_sp {
width: 12.5% !important;
}
._x3of8_sp {
width: 37.5% !important;
}
._x5of8_sp {
width: 62.5% !important;
}
._x7of8_sp {
width: 87.5% !important;
}
._x1of9_sp {
width: 11.111% !important;
}
._x2of9_sp {
width: 22.222% !important;
}
._x4of9_sp {
width: 44.444% !important;
}
._x5of9_sp {
width: 55.555% !important;
}
._x7of9_sp {
width: 77.777% !important;
}
._x8of9_sp {
width: 88.888% !important;
}
._x1of10_sp {
width: 10% !important;
}
._x3of10_sp {
width: 30% !important;
}
._x7of10_sp {
width: 70% !important;
}
._x9of10_sp {
width: 90% !important;
}
}
/*
---
name: 横幅指定(PC時)
category: -helper
---
横幅指定(PC時)
おもにmod-columnでセルの幅指定に使用する
```jade
._x1of1_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of2_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of3_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of3_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of4_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of4_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of5_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of5_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of5_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x4of5_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of6_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of6_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x4of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x6of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of8_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of8_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of8_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x7of8_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x2of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x4of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x5of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x7of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x8of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x1of10_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x3of10_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x7of10_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
._x9of10_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='')
```
*/
@media screen and (min-width: 768px) {
._x1of1_pc {
width: 100% !important;
}
._x1of2_pc {
width: 50% !important;
}
._x1of3_pc {
width: 33.333% !important;
}
._x2of3_pc {
width: 66.666% !important;
}
._x1of4_pc {
width: 25% !important;
}
._x3of4_pc {
width: 75% !important;
}
._x1of5_pc {
width: 20% !important;
}
._x2of5_pc {
width: 40% !important;
}
._x3of5_pc {
width: 60% !important;
}
._x4of5_pc {
width: 80% !important;
}
._x1of6_pc {
width: 16.666% !important;
}
._x5of6_pc {
width: 83.333% !important;
}
._x1of7_pc {
width: 14.285% !important;
}
._x2of7_pc {
width: 28.571% !important;
}
._x3of7_pc {
width: 42.857% !important;
}
._x4of7_pc {
width: 57.142% !important;
}
._x5of7_pc {
width: 71.428% !important;
}
._x6of7_pc {
width: 85.714% !important;
}
._x1of8_pc {
width: 12.5% !important;
}
._x3of8_pc {
width: 37.5% !important;
}
._x5of8_pc {
width: 62.5% !important;
}
._x7of8_pc {
width: 87.5% !important;
}
._x1of9_pc {
width: 11.111% !important;
}
._x2of9_pc {
width: 22.222% !important;
}
._x4of9_pc {
width: 44.444% !important;
}
._x5of9_pc {
width: 55.555% !important;
}
._x7of9_pc {
width: 77.777% !important;
}
._x8of9_pc {
width: 88.888% !important;
}
._x1of10_pc {
width: 10% !important;
}
._x3of10_pc {
width: 30% !important;
}
._x7of10_pc {
width: 70% !important;
}
._x9of10_pc {
width: 90% !important;
}
}
/*
---
name: ブロックポジション
category: -helper
---
ブロックポジション
```jade
._x1of3._blockCenter(style="background:#ccc;") block center
._x1of3._blockLeft(style="background:#ccc;") block left
._x1of3._blockRight(style="background:#ccc;") block right
```
*/
._blockCenter {
margin-left: auto !important;
margin-right: auto !important;
}
._blockLeft {
margin-left: 0 !important;
margin-right: auto !important;
}
._blockRight {
margin-left: auto !important;
margin-right: 0 !important;
}
/*
---
name: フロート
category: -helper
---
フロート
```jade
._clearfix
._x1of3._floatLeft(style="background:#ccc;") floatLeft
._x1of3._floatRight(style="background:#ccc;") floatRight
```
*/
._floatLeft {
float: left !important;
}
._floatRight {
float: right !important;
}
._clearfix {
*zoom: 1;
/*
---
name: clearfix
category: -mixin
---
```scss
@include clearfix;
```
*/
}
._clearfix:after {
content: '';
display: table;
clear: both;
}
/*
---
name: インラインのポジション
category: -helper
---
インラインのポジション
```jade
._clearfix
p.mod-para._inlineCenter(style="background:#ccc;") inlineCenter
p.mod-para._inlineLeft(style="background:#ccc;") inlineLeft
p.mod-para._inlineRight(style="background:#ccc;") inlineRight
```
*/
._inlineCenter {
text-align: center !important;
}
._inlineLeft {
text-align: left !important;
}
._inlineRight {
text-align: right !important;
}
/*
---
name: インラインのポジション（PCのみ）
category: -helper
---
インラインのポジション（PCのみ）
```jade
._clearfix
p.mod-para._inlineCenterPc(style="background:#ccc;") inlineCenterPC
p.mod-para._inlineLeftPc(style="background:#ccc;") inlineLeftPC
p.mod-para._inlineRightPc(style="background:#ccc;") inlineRightPC
```
*/
@media screen and (min-width: 768px) {
._inlineCenterPc {
text-align: center !important;
}
._inlineLeftPc {
text-align: left !important;
}
._inlineRightPc {
text-align: right !important;
}
}
/*
---
name: インラインのポジション（SPのみ）
category: -helper
---
インラインのポジション（SPのみ）
```jade
._clearfix
p.mod-para._inlineCenterSp(style="background:#ccc;") inlineCenterSP
p.mod-para._inlineLeftSp(style="background:#ccc;") inlineLeftSP
p.mod-para._inlineRightSp(style="background:#ccc;") inlineRightSP
```
*/
@media screen and (max-width: 767px) {
._inlineCenterSp {
text-align: center !important;
}
._inlineLeftSp {
text-align: left !important;
}
._inlineRightSp {
text-align: right !important;
}
}
/*
---
name: 縦のポジション
category: -helper
---
縦のポジション
```jade
p
span(style="display:inline-block; height:5em; vertical-align:middle;")
span._vAlignTop 上
span._vAlignMiddle 中央
span._vAlignBottom 下
```
*/
._vAlignTop {
vertical-align: top;
}
._vAlignBottom {
vertical-align: bottom;
}
._vAlignMiddle {
vertical-align: middle;
}
/*
---
name: 縦のポジション（PCのみ）
category: -helper
---
縦のポジション（PCのみ）
```jade
p
span(style="display:inline-block; height:5em; vertical-align:middle;")
span._vAlignTopPc 上
span._vAlignMiddlePc 中央
span._vAlignBottomPc 下
```
*/
@media screen and (min-width: 768px) {
._vAlignTopPc {
vertical-align: top;
}
._vAlignBottomPc {
vertical-align: bottom;
}
._vAlignMiddlePc {
vertical-align: middle;
}
}
/*
---
name: 縦のポジション（SPのみ）
category: -helper
---
縦のポジション（SPのみ）
```jade
p
span(style="display:inline-block; height:5em; vertical-align:middle;")
span._vAlignTopSp 上
span._vAlignMiddleSp 中央
span._vAlignBottomSp 下
```
*/
@media screen and (max-width: 767px) {
._vAlignTopSp {
vertical-align: top;
}
._vAlignBottomSp {
vertical-align: bottom;
}
._vAlignMiddleSp {
vertical-align: middle;
}
}
/*
---
name: マージン
category: -helper
---
|マージンの削除|
|-|
|._rm|
|._rmTop|
|._rmBottom|
|._rmLeft|
|._rmRight|
|上マージン|下マージン|左マージン|右マージン|
|--|--|--|--|
|._addTopXS|._addBottomXS|._addLeftXS|._addRightXS|
|._addTopSS|._addBottomSS|._addLeftSS|._addRightSS|
|._addTopS|._addBottomS|._addLeftS|._addRightS|
|._addTopM|._addBottomM|._addLeftM|._addRightM|
|._addTopL|._addBottomL|._addLeftL|._addRightL|
|._addTopLL|._addBottomLL|._addLeftLL|._addRightLL|
|._addTopXL|._addBottomXL|._addLeftXL|._addRightXL|
*/
/*
---
name: パディング
category: -helper
---
|パディングの削除|
|-|
|._rmPad|
|._rmPadTop|
|._rmPadBottom|
|._rmPadLeft|
|._rmPadRight|
|上パディング|下パディング|左パディング|右パディング|
|--|--|--|--|
|._addPadTopXS|._addPadBottomXS|._addPadLeftXS|._addPadRightXS|
|._addPadTopSS|._addPadBottomSS|._addPadLeftSS|._addPadRightSS|
|._addPadTopS|._addPadBottomS|._addPadLeftS|._addPadRightS|
|._addPadTopM|._addPadBottomM|._addPadLeftM|._addPadRightM|
|._addPadTopL|._addPadBottomL|._addPadLeftL|._addPadRightL|
|._addPadTopLL|._addPadBottomLL|._addPadLeftLL|._addPadRightLL|
|._addPadTopXL|._addPadBottomXL|._addPadLeftXL|._addPadRightXL|
*/
._rm {
margin: 0 !important;
}
._rmTop {
margin-top: 0 !important;
}
._rmBottom {
margin-bottom: 0 !important;
}
._rmLeft {
margin-left: 0 !important;
}
._rmRight {
margin-right: 0 !important;
}
._rmPad {
padding: 0 !important;
}
._rmPadTop {
padding-top: 0 !important;
}
._rmPadBottom {
padding-bottom: 0 !important;
}
._rmPadLeft {
padding-left: 0 !important;
}
._rmPadRight {
padding-right: 0 !important;
}
@media screen and (min-width: 768px) {
._addTopXS {
margin-top: 0.2em !important;
}
._addTopSS {
margin-top: 0.5em !important;
}
._addTopS {
margin-top: 0.8em !important;
}
._addTopM {
margin-top: 1em !important;
}
._addTopL {
margin-top: 1.5em !important;
}
._addTopLL {
margin-top: 2em !important;
}
._addTopXL {
margin-top: 3em !important;
}
._addBottomXS {
margin-bottom: 0.2em !important;
}
._addBottomSS {
margin-bottom: 0.5em !important;
}
._addBottomS {
margin-bottom: 0.8em !important;
}
._addBottomM {
margin-bottom: 1em !important;
}
._addBottomL {
margin-bottom: 1.5em !important;
}
._addBottomLL {
margin-bottom: 2em !important;
}
._addBottomXL {
margin-bottom: 3em !important;
}
._addLeftXS {
margin-left: 0.2em !important;
}
._addLeftSS {
margin-left: 0.5em !important;
}
._addLeftS {
margin-left: 0.8em !important;
}
._addLeftM {
margin-left: 1em !important;
}
._addLeftL {
margin-left: 1.5em !important;
}
._addLeftLL {
margin-left: 2em !important;
}
._addLeftXL {
margin-left: 3em !important;
}
._addRightXS {
margin-right: 0.2em !important;
}
._addRightSS {
margin-right: 0.5em !important;
}
._addRightS {
margin-right: 0.8em !important;
}
._addRightM {
margin-right: 1em !important;
}
._addRightL {
margin-right: 1.5em !important;
}
._addRightLL {
margin-right: 2em !important;
}
._addRightXL {
margin-right: 3em !important;
}
._addPadXS {
padding: 0.2em !important;
}
._addPadSS {
padding: 0.5em !important;
}
._addPadS {
padding: 0.8em !important;
}
._addPadM {
padding: 1em !important;
}
._addPadL {
padding: 1.5em !important;
}
._addPadLL {
padding: 2em !important;
}
._addPadXL {
padding: 3em !important;
}
._addPadTopXS {
padding-top: 0.2em !important;
}
._addPadTopSS {
padding-top: 0.5em !important;
}
._addPadTopS {
padding-top: 0.8em !important;
}
._addPadTopM {
padding-top: 1em !important;
}
._addPadTopL {
padding-top: 1.5em !important;
}
._addPadTopLL {
padding-top: 2em !important;
}
._addPadTopXL {
padding-top: 3em !important;
}
._addPadBottomXS {
padding-bottom: 0.2em !important;
}
._addPadBottomSS {
padding-bottom: 0.5em !important;
}
._addPadBottomS {
padding-bottom: 0.8em !important;
}
._addPadBottomM {
padding-bottom: 1em !important;
}
._addPadBottomL {
padding-bottom: 1.5em !important;
}
._addPadBottomLL {
padding-bottom: 2em !important;
}
._addPadBottomXL {
padding-bottom: 3em !important;
}
._addPadLeftXS {
padding-left: 0.2em !important;
}
._addPadLeftSS {
padding-left: 0.5em !important;
}
._addPadLeftS {
padding-left: 0.8em !important;
}
._addPadLeftM {
padding-left: 1em !important;
}
._addPadLeftL {
padding-left: 1.5em !important;
}
._addPadLeftLL {
padding-left: 2em !important;
}
._addPadLeftXL {
padding-left: 3em !important;
}
._addPadRightXS {
padding-right: 0.2em !important;
}
._addPadRightSS {
padding-right: 0.5em !important;
}
._addPadRightS {
padding-right: 0.8em !important;
}
._addPadRightM {
padding-right: 1em !important;
}
._addPadRightL {
padding-right: 1.5em !important;
}
._addPadRightLL {
padding-right: 2em !important;
}
._addPadRightXL {
padding-right: 3em !important;
}
}
@media screen and (max-width: 767px) {
._addTopXS {
margin-top: 0.2em !important;
}
._addTopSS {
margin-top: 0.5em !important;
}
._addTopS {
margin-top: 0.8em !important;
}
._addTopM {
margin-top: 1em !important;
}
._addTopL {
margin-top: 1.5em !important;
}
._addTopLL {
margin-top: 1.8em !important;
}
._addTopXL {
margin-top: 2em !important;
}
._addBottomXS {
margin-bottom: 0.2em !important;
}
._addBottomSS {
margin-bottom: 0.5em !important;
}
._addBottomS {
margin-bottom: 0.8em !important;
}
._addBottomM {
margin-bottom: 1em !important;
}
._addBottomL {
margin-bottom: 1.5em !important;
}
._addBottomLL {
margin-bottom: 1.8em !important;
}
._addBottomXL {
margin-bottom: 2em !important;
}
._addLeftXS {
margin-left: 0.2em !important;
}
._addLeftSS {
margin-left: 0.5em !important;
}
._addLeftS {
margin-left: 0.8em !important;
}
._addLeftM {
margin-left: 1em !important;
}
._addLeftL {
margin-left: 1.5em !important;
}
._addLeftLL {
margin-left: 1.8em !important;
}
._addLeftXL {
margin-left: 2em !important;
}
._addRightXS {
margin-right: 0.2em !important;
}
._addRightSS {
margin-right: 0.5em !important;
}
._addRightS {
margin-right: 0.8em !important;
}
._addRightM {
margin-right: 1em !important;
}
._addRightL {
margin-right: 1.5em !important;
}
._addRightLL {
margin-right: 1.8em !important;
}
._addRightXL {
margin-right: 2em !important;
}
._addPadXS {
padding: 0.2em !important;
}
._addPadSS {
padding: 0.5em !important;
}
._addPadS {
padding: 0.8em !important;
}
._addPadM {
padding: 1em !important;
}
._addPadL {
padding: 1.5em !important;
}
._addPadLL {
padding: 1.8em !important;
}
._addPadXL {
padding: 2em !important;
}
._addPadTopXS {
padding-top: 0.2em !important;
}
._addPadTopSS {
padding-top: 0.5em !important;
}
._addPadTopS {
padding-top: 0.8em !important;
}
._addPadTopM {
padding-top: 1em !important;
}
._addPadTopL {
padding-top: 1.5em !important;
}
._addPadTopLL {
padding-top: 1.8em !important;
}
._addPadTopXL {
padding-top: 2em !important;
}
._addPadBottomXS {
padding-bottom: 0.2em !important;
}
._addPadBottomSS {
padding-bottom: 0.5em !important;
}
._addPadBottomS {
padding-bottom: 0.8em !important;
}
._addPadBottomM {
padding-bottom: 1em !important;
}
._addPadBottomL {
padding-bottom: 1.5em !important;
}
._addPadBottomLL {
padding-bottom: 1.8em !important;
}
._addPadBottomXL {
padding-bottom: 2em !important;
}
._addPadLeftXS {
padding-left: 0.2em !important;
}
._addPadLeftSS {
padding-left: 0.5em !important;
}
._addPadLeftS {
padding-left: 0.8em !important;
}
._addPadLeftM {
padding-left: 1em !important;
}
._addPadLeftL {
padding-left: 1.5em !important;
}
._addPadLeftLL {
padding-left: 1.8em !important;
}
._addPadLeftXL {
padding-left: 2em !important;
}
._addPadRightXS {
padding-right: 0.2em !important;
}
._addPadRightSS {
padding-right: 0.5em !important;
}
._addPadRightS {
padding-right: 0.8em !important;
}
._addPadRightM {
padding-right: 1em !important;
}
._addPadRightL {
padding-right: 1.5em !important;
}
._addPadRightLL {
padding-right: 1.8em !important;
}
._addPadRightXL {
padding-right: 2em !important;
}
}
html {
font: 62.5%/2 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Osaka,sans-serif;
color: #341c02;
-webkit-text-size-adjust: 100%;
}
.outline {
overflow: hidden;
}
body {
font-size: 14px;
font-size: 1.4rem;
/*
---
name: fontsize
category: -mixin
---
font-size:引数px; font-size:引数/10rem;
に設定
```scss
@include fontsize(引数);
```
*/
line-height: 1.714;
}
@media screen and (min-width: 768px) {
body {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
font-size: 16px;
font-size: 1.6rem;
/*
---
name: fontsize
category: -mixin
---
font-size:引数px; font-size:引数/10rem;
に設定
```scss
@include fontsize(引数);
```
*/
line-height: 2;
}
}
.mod-hide {
opacity: 0;
-webkit-transition: all 300ms 0s ease;
-o-transition: all 300ms 0s ease;
transition: all 300ms 0s ease;
}
.mod-hide._fadein {
opacity: 1;
}
._pokename {
width: 112px;
}
@media screen and (min-width: 768px) {
._pokename {
width: 178px;
}
}
/*
---
name: アイコンフォント一覧
category: -iconfont
---
```jade
.mod-list.-horizontal
li.sub-li: span.mod-icon.-arrow1 ："\F001"
li.sub-li: span.mod-icon.-arrow1Left ："\F002"
li.sub-li: span.mod-icon.-arrow2 ："\F003"
li.sub-li: span.mod-icon.-arrow2Left ："\F004"
li.sub-li: span.mod-icon.-blankWindow ："\F005"
li.sub-li: span.mod-icon.-blankWindow2 ："\F006"
li.sub-li: span.mod-icon.-dotarrow ："\F007"
li.sub-li: span.mod-icon.-dotarrow_l ："\F008"
li.sub-li: span.mod-icon.-monbo ："\F009"
```
*/