@import "common.css";

/* 丹念仕込み特設サイト */
/* SANUKI PRIDE */

#navHeader {
    display:none;
}

.fb-like iframe {
    z-index:1;
}



/* PCレイアウト */
/*-------------------------------------------------------------------------------------------*/


/* title */
#title {
    width:100%;
    background:#b49c3d;
}
#title_inner {
    position:relative;
    max-width:950px;
    height:auto;
    margin:0 auto;
}
#title_inner h1 {
    display:block;
    width:54.73%;
    height:0;
    background-repeat:no-repeat;
    background-position:left top;
    background-size:contain;
    background-image:url("../images/pride/title.png");
    padding-top:21.05%;
    text-indent:-9999px;
}

.package img {
    width:100%;
    height:auto;
}

/* text setting */
.section_inner .txt {
    margin-left:5.0%;
    text-align:left;
}
.section_inner .txt h2 {
    margin-bottom:0.5em;
    line-height:1.6;
    font-size:1.8em;
}
.section_inner .txt h3 {
    margin-bottom:0.5em;
    line-height:1.6;
    font-size:1.6em;
}
.section_inner .txt p {
    line-height:2.0;
    font-size:1.2em;
}


/* bg01 */
.section_bg01 {
    width:100%;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    background-image:url("../images/pride/bg01.jpg");
}
.section_bg01 .section_inner {
    height:700px;
}
.section_bg01 .txt p {
    padding-top:1em;
    font-size:1.4em;
    font-weight:bold;
}
.section_bg01 .section_inner .package {
    position:absolute;
    left:50%;
    bottom:8%;
    width:30%;
    max-width:300px;
}
.bg01_package_sp {display:none;}

/* bg02 */
.section_bg02 {
    width:100%;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    background-image:url("../images/pride/bg02.jpg");
}
.section_bg02 .section_inner {
    height:650px;
}
.section_bg02 .txt {
    position:absolute;
    left:0;
    bottom:3%;
}
.section_bg02 .txt p {
    font-size:1.4em;
    font-weight:bold;
}

/* product section */
.section_product {
    width:100%;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    background-image:url("../images/pride/product_bg.jpg");
}
.section_product .section_inner {
    padding:3% 0;
}
.section_product .package {
    width:60%;
    margin:0 auto 1em;
}
.section_product h3 {
    margin:0 auto;
    text-align:center;
    line-height:1.4;
    font-size:2.0em;
}

/* bg03 */
.section_bg03 {
    width:100%;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    background-image:url("../images/pride/bg03.jpg");
}
.section_bg03 .section_inner {
    height:1000px;
}
.section_bg03 .txt {
    padding-top:8%;
}
.section_bg03 h3 {
    color:#fff;
}
.section_bg03 p {
    color:#fff;
}

/* section img01 */
.section_img01 {
    width:100%;
    height:470px;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    background-image:url("../images/pride/img01.jpg");
}

/* section img02 */
.section_img02 {
    width:100%;
    max-width:950px;
    height:406px;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:contain;
    background-image:url("../images/pride/img02.jpg");
    margin:0 auto;
}

/* section img03 
.section_img03 {
    width:100%;
    height:470px;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
    background-image:url("../images/pride/img03.jpg");
}*/

/* section img04 */
.section_img04 {
    width:100%;
    max-width:950px;
    height:500px;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:contain;
    background-image:url("../images/pride/img04.jpg");
    margin:0 auto;
}

/* section text */
.section_txt .section_inner {
    padding:5% 0;
}
.section_txt .txt {
    width:91%;
}



/* accrdion section */
.section_secret_title {
    padding:8% 0 0;
}
.section_secret_title h2 {
    margin-bottom:0.5em;
    text-align:center;
    line-height:1.6;
    font-size:1.8em;
}

input.check {display:none;}
.btn_line {
    width:100%;
    background:#b49c3d;
    margin:0 auto 2px;
}
label.btn {
    display:block;
    width:80%;
    max-width:760px;
    background:url("../images/pride/btn_open.png") no-repeat right center;
    background-size:auto 64%;
    margin:0 auto;
    padding:0;
    text-align:left;
    line-height:2.2;
    font-size:1.6em;
    color:#fff;
    transition:all 0.3s ease-in;
}
label.btn:hover {
    cursor:pointer;
}


.section_secret {
    overflow:hidden;
    width:100%;
    height:0;
    background:#fff;
    padding:0;
    transition:all 0.3s ease-in;
}
.section_secret .section_inner {
}

.section_secret .txt {
    width:86%;
}

input.check:checked ~ .section_secret {
    height:auto;
    padding:3% 0;
}


input.check:checked + label {
    background-image:url("../images/pride/btn_close.png");
}




/* 949px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 949px) {


/* text setting */
.section_inner .txt {
}
.section_inner .txt h2 {
    margin-bottom:0.5em;
    line-height:1.6;
    font-size:1.6em;
}
.section_inner .txt h3 {
    margin-bottom:0.5em;
    line-height:1.6;
    font-size:1.4em;
}
.section_inner .txt p {
    line-height:2.0;
    font-size:1.1em;
}



/* bg01 / 02 */
.section_bg01 .txt p,
.section_bg02 .txt p {
    font-size:1.3em;
}


/* section img02 */
.section_img02 {
    height:0;
    padding-top:42.73%;
}



}
/*-------------------------------------------------------------------------------------------*/
/* 949px以下 END */



/* 768px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {




/* section text */
.section_txt .section_inner {
    padding:3% 0;
}
.section_txt .txt {
    width:84%;
    margin:0 auto;
}

label.btn {
    font-size:1.4em;
}


}
/*-------------------------------------------------------------------------------------------*/
/* 768px以下 END */



/* 640px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 640px) {

br.sp { display:none;}


ul#sns_top {
    position:static;
    width:98%;
    margin:0 1%;
    padding-top:0;
}


/* text setting */
.section_inner .txt {
    width:90%;
    margin:0 auto;
}



/* section text */
.section_txt .section_inner {
    padding:10% 0;
}
.section_txt .txt {
    width:84%;
    margin:0 auto;
}


/* title */
#title {
}
#title_inner {
    padding:3% 0 0 2%;
}
#title_inner h1 {
    width:60%;
    background-size:contain;
    background-image:url("../images/pride/title_sp.png");
    padding-top:17.333%;
}

/* bg01 */
.section_bg01 {
    position:relative;
    height:0;
    background-size:contain;
    background-image:url("../images/pride/bg01_sp.jpg");
    padding-top:133.33%;
}
.section_bg01 .section_inner {
    position:absolute;
    top:0;
    width:100%;
    height:auto;
}
.section_bg01 .section_inner .package {display:none;}
.bg01_package_sp {
    display:block;
    position:absolute;
    right:5%;
    bottom:5%;
    width:40%;
}

/* bg02 */
.section_bg02 {
    position:relative;
    height:0;
    background-size:contain;
    background-image:url("../images/pride/bg02_sp.jpg");
    padding-top:160%;
}
.section_bg02 .section_inner {
    height:auto;
}
.section_bg02 .txt {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:90%;
    margin:auto;
    padding-bottom:2em;
}

/* product section */
.section_product {
    background-image:url("../images/pride/product_bg_sp.jpg");
}
.section_product .section_inner {
    padding:10% 0;
}
.section_product .package {
    width:84%;
}
.section_product h3 {
    width:90%;
	text-align:left;
    font-size:1.6em;
}

/* bg03 */
.section_bg03 {
    height:auto;
    background-size:100% auto;
    background-image:url("../images/pride/bg03_sp.jpg");
    margin-bottom:10%;
    padding-top:63.333%;
}
.section_bg03 .section_inner {
    height:auto;
}
.section_bg03 .txt {
    padding-top:8%;
}
.section_bg03 h3,
.section_bg03 p {
    color:#000;
}
.section_bg03 p {
}

/* section img01 */
.section_img01 {
    height:0;
    background-size:contain;
    background-image:url("../images/pride/img01_sp.jpg");
    padding-top:64%;
}

/* section img02 */
.section_img02 {
    height:0;
    background-size:contain;
    background-image:url("../images/pride/img02_sp.jpg");
    padding-top:126.66%;
}

/* section img03 */
.section_img03 {
    height:0;
    background-size:contain;
    background-image:url("../images/pride/img03_sp.jpg");
    padding-top:63.33%;
}

/* section img04 */
.section_img04 {
    height:0;
    background-size:contain;
    background-image:url("../images/pride/img04_sp.jpg");
    padding-top:60.66%;
}

/* section text */
.section_txt .section_inner {
    padding:10% 0;
}
.section_txt .txt {
    width:90%;
}




/* accrdion section */
.section_secret_title h2 {
    font-size:1.4em;
}

label.btn {
    width:94%;
    background-size:6%;
    background-position:right 10% center 100%;
    margin:0 auto;
    padding:0;
    line-height:2.6;
    font-size:1.2em;
    box-sizing:border-box;
}


}
/*-------------------------------------------------------------------------------------------*/
/* 640px以下 END */



/* - 375px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 375px) {



/* text setting */
.section_inner .txt h2 {
    font-size:1.3em;
}
.section_inner .txt h3 {
    font-size:1.2em;
}
.section_inner .txt p {
    line-height:1.8;
    font-size:1.0em;
}

.section_product h3 {
    font-size:1.3em;
}
.section_secret_title h2 {
    font-size:1.3em;
}
.section_secret .txt p {
    line-height:1.7;
    font-size:0.9em;
	letter-spacing:-0.07em;
}






}
/* - 375px end */



/* - 320px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 320px) {

/* text setting */
.section_inner .txt h3 {
    font-size:1.1em;
}

/* bg02 */
.section_bg02 .txt {
    padding-bottom:0.5em;
}


.section_secret_title h2 {
    font-size:1.2em;
}


label.btn {
    font-size:1.0em;
}






}
/* - 320px end */