@import "common.css";

/* 丹念仕込み特設サイト */
/* 丹念仕込み やわもちうどん */

#navHeader {
    display:none;
}

ul#sns_top {
    position:absolute;
    top:inherit;
    left: 0;
    right: inherit;
    bottom: 0;
    width: 280px;
    margin: 0;
    padding-top: 0;
    text-align: right;
    transform: translateX(200px);
    z-index:1;
}

section img {
    max-width: 100%;
    height: auto;
    transition: all .3s ease;
}

section * {
    box-sizing: border-box;
}


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


/* main */
#main_img {
    position: relative;
}
#main_img h1 {
    width: 100%;
    height: 900px;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("../images/yawamochi/main_img_2000.jpg");
    text-indent: -9999px;
}

/* lead1 */
#lead1 {
    background-color: #0d0c0c;
}

/* lead2 */
#lead2 {
    background-color: #d9be2c;
    background-repeat: repeat-y;
    background-position: center top;
    background-image: url("../images/yawamochi/lead2_bg.jpg");
}
#lead2 .inner {
    position: relative;
    width: 100%;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#lead2 .inner p {
    width: 520px;
    margin-left: 17%;
    font-weight: 700;
}
#lead2 .bar {
    background-color: rgba(255,255,255,0.5);
}
#lead2 .inner p.lead2_a {
    padding: 1.5em 0;
    font-size: 1.4em;
}
#lead2 .inner p.lead2_b {
    padding: 0.5em 0;
    line-height: 1.4;
    font-size: 1.6em;
    color:#ff0000;
}
#lead2 .inner p.lead2_b strong {
    font-size: 2.4em;
}
#lead2 .inner p.lead2_c {
    position: relative;
    padding: 1.5em 0;
    font-size: 1.3em;
}
#lead2 .inner .lead2_img {
    position: absolute;
    top: 1.5em;
    right: 50%;
    transform: translateX(280px);
}

/* anchor */
#anchor {
    width: 90%;
    max-width: 850px;
    padding: 50px 0;
    margin: auto;
}
#anchor ul {
    display: flex;
    justify-content: center;
}
#anchor ul li {
    width: 33%;
    margin: 0 2%;
}

/* grandprix */
#grandprix {
    background-color: #dfbfbf;
    padding-bottom: 0.5em;
}
#grandprix h2 {
    width: 100%;
    height: 684px;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("../images/yawamochi/grandprix_2000.jpg");
    margin-bottom: 1em;
    text-indent: -9999px;
}
#grandprix h3,
#grandprix ul,
#grandprix p {
    width: 60%;
    max-width: 800px;
    margin: 0 auto;
}
#grandprix h3 {
    text-align: left;
    font-size: 1.6em;
}
#grandprix h3 span {
    font-size: 0.8em;
}
#grandprix ul {
    padding-left: 1.25em;
    text-align: left;
    font-size:1.3em;
}
#grandprix li {
    margin-bottom:0.5em;
}
#grandprix li:before {
    display:inline-block;
    margin-left:-1.2em;
    margin-right:0.2em;
    color:#ff0000;
    content:"◎";
}
#grandprix p {
    text-align: right;
    font-size: 1.1em;
}

/* method */
#method {
    padding-top:90px;
}
#method h2 {
    background-color: #b49c3d;
    margin-bottom: 1em;
}
#method h2 span {
    display: block;
    width: 90%;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    line-height: 2.0;
    font-size: 1.2em;
    font-weight: 500;
    color:#ffffff;
}
#method h3 {
    font-size: 2.0em;
}
#method p {
    width: 90%;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    text-align: left;
    font-size: 1.2em;
}
#method p.bottom {
    margin-bottom: 3em;
}
#method p.eol {
    margin-bottom: 2em;
}
#method .method_img {
    width: 90%;
    max-width: 850px;
    margin:0 auto 120px;
}

/* recipe */
#recipe {
    background-image: url("../images/yawamochi/recipe_bg.jpg");
    margin-bottom: 40px;
}
#recipe h2,
#recipe .recipe_bottom {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("../images/yawamochi/recipe_title_bg.jpg");
}
#recipe h2 img,
#recipe .recipe_bottom img {
    width: 100%;
    max-width: 640px;
}
#recipe .recipe_lead {
    width:100%;
    max-width: 640px;
    background-repeat: no-repeat;
    background-position: right top;
    background-image: url("../images/yawamochi/recipe_img.png");
    background-size: 52.65%;
    margin: -2px auto 2em;
    padding: 3% 0 8%;
}
#recipe .recipe_lead p {
    margin-left: 8%;
    text-align: left;
    font-size: 1.6em;
}
#recipe h3 {
    font-size: 2.2em;
}
#recipe h3.cat01 {color:#004600;}
#recipe h3.cat02 {color:#000050;}
#recipe h3.cat03 {color:#6e0000;}
#recipe h3.cat04 {color:#3c0064;}

#recipe ul {
    display: flex;
    justify-content: space-between;
    width: 84%;
    max-width: 640px;
    margin: 0 auto 4%;
}
#recipe ul.last {
    margin: 0 auto 8%;
}
#recipe ul li {
    width: 46.625%;
}



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


ul#sns_top {
    left:inherit;
    right: 0;
    bottom: -5px;
    transform: none;
}

/* main */
#main_img h1 {
    height: 0;
    background-image: url("../images/yawamochi/main_img_950.jpg");
    background-size: contain;
    padding-top: 94.736%;
}

/* lead2 */
#lead2 .inner p {
    width: 60%;
    margin-left: 13%;
}
#lead2 .inner .lead2_img {
    right: 4%;
    transform: none;
}
#lead2 .inner p.lead2_b {
    font-size: 1.5em;
}
#lead2 .inner p.lead2_b strong {
    font-size: 2.2em;
}

/* anchor */
#anchor {
    padding: 6% 0;
}

/* grandprix */
#grandprix h2 {
    height: 0;
    background-image: url("../images/yawamochi/grandprix_950.jpg");
    background-size: contain;
    padding-top: 72%;
}
#grandprix p {
    max-width: 800px;
}

/* method */
#method {
    padding-top:10%;
}
#method .method_img {
    margin:0 auto 14%;
}

/* recipe */
#recipe .recipe_lead p {
    font-size: 2.4vw;
}
#recipe h3 {
    font-size: 3.8vw;
}


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



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





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



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

br.sp { display:none;}


ul#sns_top {
    bottom: 1%;
}

/* main */
#main_img h1 {
    background-image: url("../images/yawamochi/main_img_sp.jpg");
    padding-top: 165.333%;
}


/* lead2 */
#lead2 {
    background-image: url("../images/yawamochi/lead2_bg_sp.jpg");
    background-size: contain;
}
#lead2 .inner {
    width: 90%;
}
#lead2 .inner p {
    width: 100%;
    margin-left: 0;
}
#lead2 .inner p.lead2_a {
    font-size: 4.0vw;
}
#lead2 .inner p.lead2_b {
    font-size: 4.2vw;
}
#lead2 .inner p.lead2_c {
    font-size: 3.8vw;
}

/* anchor */
#anchor {
    width: 100%;
}
#anchor ul li {
    width: 40%;
    margin: 0 2%;
}

/* grandprix */
#grandprix h2 {
    background-image: url("../images/yawamochi/grandprix_sp.jpg");
    padding-top: 101.733%;
}
#grandprix h3,
#grandprix ul,
#grandprix p {
    width: 90%;
}
#grandprix h3 {
    font-size: 4.8vw;
}
#grandprix ul {
    font-size:4.0vw;
}
#grandprix ul li {
    margin-right: 5%;
}
#grandprix p {
    font-size: 3.6vw;
}

/* method */
#method {
    padding-top:10%;
}
#method h2 span {
    font-size: 4.2vw;
}
#method h3 {
    font-size: 4.4vw;
}
#method p {
    font-size: 3.2vw;
}
#method .method_img {
    width:100%;
}

/* recipe */
#recipe .recipe_lead {
    background-size: 50%;
    padding: 5% 0 8%;
}
#recipe .recipe_lead p {
    font-size: 3.6vw;
}
#recipe h3 {
    font-size: 4.6vw;
}
#recipe ul {
    width: 90%;
}
#recipe ul li {
    width: 47.85%;
}


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



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







}
/* - 375px end */



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






}
/* - 320px end */