/* pg_demo */
@charset "utf-8";

/*基本設定ここから*/
.pg { max-width: 730px; margin: 0px auto;}

/*画像共通*/
.pg 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 {color: red;font-weight: normal;}

/*ボックス*/
.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 { width:100%; line-height: 1.8em; padding:0 10px 10px; text-align: left; overflow: hidden; box-sizing:border-box;}
.pg p:first-child { padding:10px;}
:not(.pg p)+.pg 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;}
}
/*基本設定ここまで*/


/*パターン01ここから*/
.pg_box_01 h2 img { max-width: 74% !important; display: inline;}
.pg_box_01 p img { max-width: 22% !important; margin-top: -10%;}
/*パターン01ここまで*/

/*パターン04ここから*/
.pg_box_04 {max-width:730px; width:100%;}
/*パターン04ここまで*/

/*パターン02ここから*/
.pg_box_02 { border: 2px solid #f00; background-color: #fdd;}
.pg_box_02 .pg_inner { border: 2px solid #fc0; background-color: #ffb;}
.pg_box_02 .pg_inner div { border: 2px solid #0d0; background-color: #bfb;}
.pg_box_02 p { border: 2px solid #00d; background-color: #ccf;}
/*パターン02ここまで*/


/*パターン10ここから*/
.pg_box_10.pg_balloon .pg_inner,
.pg_box_10.pg_balloon:before,
.pg_box_10.pg_balloon:after { background-color:#f90;}
.pg_balloon { padding: 0 !important; position: relative;}
.pg_balloon:before,
.pg_balloon:after {
    content: " ";
    position: absolute;
    width: 140px;
    height: 140px;
    left: 50%;
    bottom: -50px;
    margin-left: -70px;
    z-index: 2;
    -webkit-transform: rotate(-40deg) skew(11deg);
    -moz-transform: rotate(-40deg) skew(11deg);
    transform: rotate(-40deg) skew(11deg);
}
.pg_balloon:after { z-index: 1;}
.pg_balloon .pg_inner { margin-bottom: 70px; position: relative; z-index:3;}
.pg_balloon .pg_inner>div { background-color:#fff;}
@media screen and (max-width:640px) {
.pg_balloon:before,
.pg_balloon:after {bottom: -10px;}
.pg_balloon .pg_inner { margin-bottom: 30px;}
}
/*パターン10ここまで*/

/*パターン12ここから*/
.pg_box_12 { background-color: #666;}
.pg_box_12 .pg_inner div { background-color: #fff;}
/*パターン12ここまで*/

/*パターン13ここから*/
.pg_box_13 { background-color: #666; color: #fff;}
.pg_box_13 h3 img { max-width: 73% !important; margin-right: 2%; display: inline;}
.pg_box_13 p img { max-width: 22% !important; margin-top: -8.5%;}
/*パターン13ここまで*/

/*※※実際の使用の際は削除して下さい※※ マニュアル用装飾ここから*/
.pg div.anchor>h2 { margin-top:4%; padding: 1% 0; color:#fff; background-color:#333;}
.pg #pattern_05 li,
.pg #pattern_06 li,
.pg #pattern_07 li,
.pg #pattern_08 li { font-size:18px; line-height: 1.6em; text-align:left; background-color:#ddf;}
.pg #pattern_05 li:first-child,
.pg #pattern_06 li:first-child,
.pg #pattern_07 li:first-child,
.pg #pattern_08 li:first-child { background-color:#fdd;}
.pg #pattern_05 li:last-child,
.pg #pattern_06 li:last-child,
.pg #pattern_07 li:last-child,
.pg #pattern_08 li:last-child { background-color:#dfd;}
@media screen and (max-width:640px) {
.pg #pattern_05 li,
.pg #pattern_06 li,
.pg #pattern_07 li,
.pg #pattern_08 li { font-size:14px;}
}
/*※※実際の使用の際は削除して下さい※※ マニュアル用装飾ここまで*/
            
            
/* 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%;
}
}