jscss
pg.css（全記事ページ）
/* pg_demo */
@charset "utf-8";
/*基本設定ここから*/
.pg { max-width: 730px; margin: 0px auto;}
@media screen and (max-width:1024px) {
.pg {padding:0 1%;box-sizing:border-box;}
}
/*画像共通*/
.pg img , #tinymce img { display: block; text-align:center;}
/*要素の余白*/
.fit_t {padding-top:0 !important;}
.fit_b {padding-bottom:0 !important;}
.fit_r {padding-right:0 !important;}
.fit_l {padding-left:0 !important;}
.fit_all {padding:0 !important;}
/*テキスト赤文字*/
.pg strong, #tinymce strong ,body#tinymce.webkit strong {color: red;font-weight: normal !important;}
.pg b>strong, .pg strong>b, body#tinymce.webkit b>strong, body#tinymce.webkit strong>b{font-weight:bold !important;}
/*ボックス*/
.pg_box { width:100%; max-width:730px; margin: 10px auto; padding:10px; box-sizing:border-box;}
@media screen and (max-width:1024px) {
.pg_box { margin: 2% auto; padding:2%;}
}
/*インナー*/
.pg_inner { width:100%; padding:0 10px 10px; box-sizing:border-box;}
.pg_inner:first-child { padding:10px;}
:not(.pg_inner)+.pg_inner { padding:10px;}
@media screen and (max-width:1024px) {
.pg_inner { padding:0 2% 2%;}
.pg_inner:first-child { padding:2%;}
:not(.pg_inner)+.pg_inner { padding:2%;}
}
/*インナーの子要素*/
.pg_inner>div { width:100%; padding:0 10px 10px; box-sizing:border-box;}
.pg_inner>div:first-child { padding:10px;}
.pg_inner>:not(div)+div{ padding:10px;}
@media screen and (max-width:1024px) {
.pg_inner>div { padding:0 2% 2%;}
.pg_inner>div:first-child { padding:2%;}
.pg_inner>:not(div)+div{ padding:2%;}
}
/*テキスト*/
.pg p, #tinymce p{ width:100%; /*font-size:14px;*/ line-height: 1.6em; padding:0 10px 10px; text-align: left; /*overflow: hidden;*/ box-sizing:border-box;}
.pg p:first-child, #tinymce p:first-child{ padding:10px;}
:not(.pg p)+.pg p, :not(#tinymce p)+#tinymce p { padding:10px;}
/*.fontS .pg p { font-size:14px;}
.fontM .pg p { font-size:15px;}
.fontL .pg p { font-size:17px;}*/
@media screen and (max-width:1024px) {
.pg p { padding:0 2% 2%;}
.pg p:first-child { padding:2%;}
:not(.pg p)+.pg p { padding:2%;}
}
@media screen and (max-width:640px) {
/*.pg p { font-size:13px;}
.fontS .pg p,.fontM .pg p,.fontL .pg p { font-size:13px;}*/
}
/*導線上下の余白*/
.pg_btn { margin: 20px auto;}
@media screen and (max-width:1024px) {
.pg_btn { margin: 2% auto;}
}
/*シャドウ*/
.pg .sdw{ box-shadow: 3px 3px 2px 0px #9d9d9d;
-moz-box-shadow: 3px 3px 2px 0px #9d9d9d;
-webkit-box-shadow: 3px 3px 2px 0px #9d9d9d;
-ms-box-shadow: 3px 3px 2px 0px #9d9d9d;}
/*吹き出し用シャドウ*/
.pg .sdw.pg_balloon:after { box-shadow: 2px 3px 2px 0px #9d9d9d;
-moz-box-shadow: 2px 3px 2px 0px #9d9d9d;
-webkit-box-shadow: 2px 3px 2px 0px #9d9d9d;
-ms-box-shadow: 2px 3px 2px 0px #9d9d9d;
}
/*テキスト右側 sp画像w50%表示*/
.txt_r_1per2 p img { float: left; width: auto !important; margin: 0 10px 10px 0;}
/*テキスト右側 sp画像w33%表示*/
.txt_r_1per3 p img { float: left; width: auto !important; margin: 0 10px 10px 0;}
/*テキスト左側 sp画像w50%表示*/
.txt_l_1per2 p img { float: right; width: auto !important; margin: 0 0 10px 10px;}
/*テキスト左側 sp画像w33%表示*/
.txt_l_1per3 p img { float: right; width: auto !important; margin: 0 0 10px 10px;}
@media screen and (max-width:1024px) {
.txt_r_1per2 p img,
.txt_l_1per2 p img { max-width: 50% !important;}
.txt_r_1per2 p img,
.txt_r_1per3 p img { margin: 0 2% 2% 0;}
.txt_l_1per2 p img,
.txt_l_1per3 p img { margin: 0 0 2% 2%;}
}
@media screen and (max-width:640px) {
.txt_r_1per3 p img,
.txt_l_1per3 p img { max-width: 30% !important;}
}
/*hタグ左側*/
.htag_l h2,
.htag_l h3 { text-align: left;}
.htag_l p img { float: right; width: auto !important; margin: 0 0 20px 20px;}
/*hタグ右側*/
.htag_r h2,
.htag_r h3 { text-align: right;}
.htag_r p img { float: left; width: auto !important; margin: 0 20px 20px 0;}
@media screen and (max-width:1024px) {
.htag_l p img { margin: 0 0 2% 2%;}
.htag_r p img { margin: 0 2% 2% 0;}
}
.htag_l p,
.htag_r p { overflow: visible;}
/*導線テンプレート用、等分テンプレート用共通*/
.pg .cnt_box_inner { max-width: 730px; padding: 0 10px; box-sizing: border-box;}
.pg .is_1per1 div { padding: 0 10px;}
@media screen and (max-width:1024px) {
.pg .cnt_box_inner,
.pg .is_1per1 div { padding: 0 1%;}
}
/*2,3,4カラム*/
.pg .is_1per2 li,
.pg .is_1per3 li,
.pg .is_1per4 li { padding: 0 10px;}
.pg .is_1per3 li { width : 33.33333% ; width : -webkit-calc(100% / 3) ;}
@media screen and (max-width:1024px) {
.pg .is_1per2 li,
.pg .is_1per3 li,
.pg .is_1per4 li { padding: 0 1%;}
}
@media screen and (max-width:640px) {
.pg .is_1per4 li { margin-bottom: 2%;}
.pg .is_1per4 li:last-child,
.pg .is_1per4 li:nth-last-child(2) { margin-bottom: 0;}
}
/*2,3カラム リキッド*/
@media screen and (max-width:640px) {
.pg .is_1per2.pg_riquid li,
.pg .is_1per3.pg_riquid li { width: 100%; float:none;}
}
/*基本設定ここまで*/
/* TOP事例導線共通部分ここから */
.pg .is_eq li{float: left; box-sizing: border-box; padding: 10px;}
@media screen and (max-width: 1024px){
.pg .is_eq li{ padding: 10px 2%;}
}
@media screen and (max-width: 640px){
.pg .is_eq li{ padding: 2%;}
}
/* one item */
.pg .is_eq li:first-child:nth-last-child(1) {
width: 100%;
}
/* two items */
.pg .is_eq li:first-child:nth-last-child(2),
.pg .is_eq li:first-child:nth-last-child(2) ~ li {
width: 360px;
}
/* three items */
.pg .is_eq li:first-child:nth-last-child(3),
.pg .is_eq li:first-child:nth-last-child(3) ~ li {
width: 240px;
}
/* four items */
.pg .is_eq li:first-child:nth-last-child(4),
.pg .is_eq li:first-child:nth-last-child(4) ~ li {
width: 180px;
}
/* five items */
.pg .is_eq li:first-child:nth-last-child(5),
.pg .is_eq li:first-child:nth-last-child(5) ~ li {
width: 144px;
}
/* six items */
.pg .is_eq li:first-child:nth-last-child(6),
.pg .is_eq li:first-child:nth-last-child(6) ~ li {
width: 120px;
}
@media screen and (max-width: 1024px){
/* one item */
.pg .is_eq li:first-child:nth-last-child(1) {
width: 100%;
}
/* two items */
.pg .is_eq li:first-child:nth-last-child(2),
.pg .is_eq li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
/* three items */
.pg .is_eq li:first-child:nth-last-child(3),
.pg .is_eq li:first-child:nth-last-child(3) ~ li {
width: 33.3%;
}
/* four items */
.pg .is_eq li:first-child:nth-last-child(4),
.pg .is_eq li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
/* five items */
.pg .is_eq li:first-child:nth-last-child(5),
.pg .is_eq li:first-child:nth-last-child(5) ~ li {
width: 20%;
}
/* six items */
.pg .is_eq li:first-child:nth-last-child(6),
.pg .is_eq li:first-child:nth-last-child(6) ~ li {
width: 16.6%;
}
}
/*回り込み*/
.pg figure+p, #tinymce figure+p,
/*.pg .mceTemp+p, #tinymce .mceTemp+p{overflow:visible;}*/
figure.alignleft, .wp-caption.alignleft { margin: 0 2% 2% 2%;}
figure.alignright, .wp-caption.alignright { margin: 0 2% 2% 2%;}