@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap');*/

/*----------------------------------------
under css
----------------------------------------*/
body {
    counter-reset: number;
}

#title_area {
    width: 100%;
    /*    background: #7a3b24;*/
}


h3 {
    margin: 0 0 .8em 0;
    padding: 0 14px;
    color: #7a3b24;
    font-size: 28px;
    line-height: 1.2;
    text-align: left;
    border-left: 5px solid #de8126;
}

h3 em {
    margin: 0 1em;
    font-size: 19px;
    color: #de8126;
    /* color: #c1aa53; */
    opacity: .7;
}

h4 {
    /*     position:relative; */
    margin: 0 0 .4em 0;
    /*    padding:0 1em;*/
    /*
    color: #928585;
    color: #888;
    color: #7a3b24;
    */
    color: #de8126;
    font-size: 18px;
    /*    font-family: 'Noto Sans JP', sans-serif;*/
    text-align: left;
    line-height: 1.4;
}


h5 {
    margin: -15px 0 15px 0;
    font-size: 18px;
    color: #de8126;
    color: #888;
}

a {
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

.bg {
    background: #f3f1ef;

}



.inner.index {
    padding: 0;
    margin: 0 auto;
}

p {
    /* font-size: 16px; */
}

.mgt10 {
    margin-top: 10px !important;
}

/* index */
#index {
    height: auto;
    margin: 0 auto border: 1px solid #7a3b24;
}

#index dt {
    width: 100%;
    margin: 0 auto;
    color: #7a3b24;
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 5px;
}


#index dt {
    position: relative;
    text-align: center;
}

#index dt span {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0 2.5em;
    padding: 0 1em;
    background: #fff;
    text-align: left;
}

#index dt::before {
    position: absolute;
    top: 50%;
    z-index: 1;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #7a3b24;
}

#index ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column; */
    margin: 0px auto 16px 8%;
    /* border-bottom: 1px solid #7a3b24; */
}

#index dd ul li {
    width: 30%;
    padding: 3px 0;
    color: #7a3b24;
    font-size: 16px;
    list-style: disc;
    margin-right: 20px;
    font-family:'Noto Sans JP',meirio, serif;
}

#index dd ul li a {
    color: #7a3b24;
    /* font-size: 16px; */
    text-decoration: none;
}

#index dd ul li a:hover {
    text-decoration: underline;
}

section .inner::after {
    content: "";
    display: block;
    clear: both;
}

section dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

section dt {
    margin: 0 50px 0 0;
}

section img {
    width: 300px;
    height: auto;
}

section img.small {
    width: 200px;
}


strong {
    margin: 0 0 .5em 0;
    color: #888;
    font-size: 18px;
    /*    font-family: 'Noto Sans JP', sans-serif;*/
    font-weight: 500;
}



/* about　アマゾン屋のこと*/
#about section#sec08 ul li {
    width: 48.5%;
    margin: 0 0 35px 0;
    padding: 24px 20px 20px 28px;
    background: #f3f0e8;
    background: #f3f1ef;
    border-radius: 3px;
}

#about section#sec08 ul li h4 {
    color: #7a3b24;
}

#about section#sec08 ul li img {
    margin: 0 30px 0 0;
    width: 190px;
    border: 6px solid #fff;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
}

#about section#sec08 ul li p {
    font-size: 14px;
}

#about section#sec08 ul li p:before {
    display: none;
}

#about .history h4,
#blog h4 {
    /* padding: 0; */
    color: #888;
}

#about .original h4:before,
#about .original h4:after,
#about .history h4:before,
#about .history h4:after,
#blog h4:before,
#blog h4:after {
    display: none;
}

#about .history dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 30px 0;
}

#about .history dl dt {
    width: 7%;
    margin: 0;
}

#about .history dl dd {
    width: 93%;
}

#about .history dd a {
    margin: 0 0 0 .5em;
}

#blog #box2 ul {
    margin: 15px 0 5px;
}

#blog ul li a {
    text-decoration: none;
}

#blog ul li a:hover {
    text-decoration: underline;
}

#blog p {
    margin: 0 0 1em 0;
    text-indent: 0;
}

/* Making 泥染めの工程 */


#making section#sec09 ul.caution li {
    width: 100%;
    margin-left: 1em;
    list-style: disc;
    list-style-position: outside;
    font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
    /* color: #666; */
    color: #717376;
}

#making .lead {
    margin-bottom: 1em;
}

#making ol.flow {
    padding: 0;
    margin: 50px 0 0;
    list-style: none;
    /* olがはき出す数字を消す */
}

#making ol.flow li {
    position: relative;
    width: 320px;
    height: auto;
    line-height: 2;
    margin-bottom: 50px;
}

#making ol.flow li p {
    position: relative;
    margin: 5px 0 12px 45px;
    line-height: 1.6;
    font-size: 14px;
}

#making ol.flow li img {
    width: 100%;
    height: auto;
}

#making ol.flow li p:before {
    counter-increment: number;
    content: counter(number);
    position: absolute;
    width: 36px;
    height: auto;
    top: -14px;
    left: -45px;
    color: #fff;
    color: #7a3b24;
    font-size: 45px;
    font-weight: 600;
    text-align: center;
    border-radius: 10%;
}




#making ol.flow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    ;
    -ms-flex-pack: justify;
    justify-content: space-between
}

#making ol.flow li:after {
    position: absolute;
    content: "";
    top: 50%;
    right: -50px;
    width: 30px;
    height: 30px;
    border-top: 4px solid #888;
    border-right: 4px solid #888;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#making ol.flow li:last-child:after {
    display: none;
}
#making.brown .bg img, #making.white .bg img {
    border: 6px solid #fff;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
}

/*----------------------------------------
for PC (641px~)
----------------------------------------*/
@media only screen and (min-width:641px),
    print {

        .inner {
            padding: 30px 0;
        }

        .bg .inner {
            padding: 70px 15px 50px;
        }

        .right {
            float: right;
            margin: 0 0 40px 60px;
        }

        .left {
            float: left;
            margin: 0 70px 40px 0;
        }

        .center {
            display: block;
            width: 780px;
            margin: 0 auto;
        }

        .pdb50 {
            padding-bottom: 50px !important;
        }
        .pdt70 {
            padding-top: 70px !important;
        }
        #title_area .inner {
            position: relative;
            width: 1140px;
            height: 420px;
            margin: 0 auto;
            padding: 0;
        }

        #shipibo #title_area .inner {
            background: url("/img/shipibo/img00.jpg") center center;
            background-size: cover;
        }

        #about #title_area .inner {
            background: url("/img/about/img00.jpg") bottom center;
        }

        #making #title_area .inner {
            background: url("/img/making/img00.jpg") bottom center;
        }

        #news #title_area .inner {
            background: url("/img/news/img00.jpg") bottom center;
        }

        #contact #title_area .inner {
            background: url("/img/contact/img00.jpg") bottom center;
        }

        h2 {
            position: absolute;
            top: 40%;
            padding: 5px 20px;
            color: #fff;
            font-size: 40px;
            text-align: center;
            letter-spacing: 3px;
            font-weight: 500;
            background-color: rgba(0, 0, 0, 0.5);
        }

        #index {
            width: 1140px;
            height: auto;
            margin: 20px auto 0;
            padding: 0 0 10px 0;
            border-bottom: 1px solid #7a3b24;
            font-family: 'Open Sans', 'Noto Sans JP';
        }

        /* シピボ族の人々 */
        #shipibo h3 {
            margin-left: 370px;
        }

        #shipibo .bg p {
            padding: 0 0 20px 0;
        }

        #shipibo img.right {
            width: 220px;
        }


        #shipibo section .inner,
        #about section.history .inner {
            padding: 70px 15px 50px;
        }

        /* about*/
        #about section#sec01 .inner,
        #making.index section#sec01 .inner {
            padding: 70px 15px 20px;
        }


        #about section#sec09 .inner {
            padding: 0 15px 50px;
        }

        #about section.histor .inner,
        #making section.bg .inner {
            padding: 70px 15px 50px;
        }


        #about section#sec01 h3,
        #about section#sec01 h4,
        #about section#sec03 h3,
        #about section#sec03 h4 {
            margin-left: 370px;
        }

        #about section#sec05 h3,
        #about section#sec05 h4,
        #about section#sec09 h3,
        #about section#sec09 h4 {
            margin-left: 450px;
        }

        #about section#sec02 img,
        #about section#sec05 img,
        #about section#sec06 img,
        #about section#sec09 img,
        #making.index section#sec04 img {
            width: 380px;
        }

        #about section#sec07 {
            margin-top: -90px;
        }

        #about section#sec08 ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            margin: 30px auto;
        }

        #blog .inner {
            width: 1050px;
        }

        #blog h3 {
            margin-left: 320px;
        }

        #blog img {
            width: 240px;
        }

        /* making */
        #making.index section#sec01 h3,
        #making.index section#sec01 h4 {
            margin-left: 370px;
        }

        #making.index section#sec04 h3 {
            margin-left: 450px;
        }

        #making.index section#sec07 h3,
        #making.index section#sec07 h4{
            margin-left: 490px;
        }
        #making.index section#sec07 img,
        #making.index section#sec08 img{
            width: 420px;
        }
        #making section#sec09 ul:not(.caution) {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 20px;
        }

        #making section#sec09 ul li {
            width: 46%;
            font-size: 14px;
        }

        #making.brown .bg .inner,
        #making.white .bg .inner {
            padding-left: 100px;
        }

        #making.brown .bg h4,
        #making.white .bg h4 {
            margin-left: 270px;
        }

        #making.brown .bg img,
        #making.white .bg img {
            width: 200px;
        }

        #making.brown section.inner,
        #making.white section.inner {
            padding: 70px 15px 50px;
        }

        #making.brown section.inner,
        #making.white section.inner {
            padding: 70px 15px 50px;
        }
        #making.white .bg h3,
        #making.brown  .bg h3{
            margin: 0 0 .8em 270px;
        }

}

/*************************
for SP (~640px)
**************************/
@media only screen and (max-width:640px),
    print {
        #title_area {
            position: relative;
            margin: 0 0 0 0;
        }

        #title_area .inner {
            margin: 0;
            padding: 0;
            /* top: 20px; */
            /* height: 170px; */
            /* padding: 25px 6%; */
            /* background-position: center 20px !important; */
        }

        .inner {
            padding: 20px 6% 10px;
        }

        h2 {
            width: 100%;
            top: 0;
            left: 0;
            margin: 0;
            padding: 5px 0;
            color: #fff;
            font-size: 22px;
            text-align: center;
            /* line-height: 1; */
            background: #222;
            background: #7a3b24;
        }

        h2 em {
            position: relative;
            top: 0;
            font-size: 14px;
        }

        h3 {
            margin: 10px 0;
            padding: 0 0 0 10px;
            font-size: 20px;
            line-height: 1.6;
            text-align: left;
            font-weight: bold;
        }

        /* index */
        #index {
            width: 88%;
            /* height: auto; */
            margin: 0 6% 20px;
            padding: 0;
            border-bottom: 1px solid #7a3b24;
        }

        #index dt {
            color: #7a3b24;
            font-size: 24px;
            text-align: center;
            font-weight: 600;
        }

        #index ul {
            width: 88%;
            display: block;
            /* flex-wrap: wrap; */
            /* flex-direction: column; */
            /* justify-content: space-around; */
            /* margin: 0px  0 16px 5%; */
        }

        #index dd ul li {
            width: 100%;
            margin-right: 0;
            padding: 0;
            font-size: 14px;
        }

        #index dd ul li a {
            color: #7a3b24;
            font-size: 14px;
            text-decoration: none;
        }

        #index dd ul li a:hover {
            text-decoration: underline;
        }

        /*
        #index{
        width:100%;
        height: auto;
        margin: 10px auto 0;
        padding: 0 20px 12px;

}
        #index dt{
        font-size: 24px;
}
        #index ul {
        width: 100%;
        display: block;
        margin: 10px 10%;
}
        #index dd ul li{
        width:100%;
        color: #7a3b24;
        font-size: 16px;
        list-style: disc;
}
        */
        section dl {
            display: block;
        }

        section dt {
            margin: 0;
        }

        section .txt {
            width: 100%;
            height: auto;
        }

        section img {
            width: 100%;
            height: auto;
        }



        /* shipibo シピボ族の人々*/
        #shipibo .bg h3 {
            /* margin: 10px 0; */
        }

        #shipibo .bg p {
            margin: 0 0 20px 0;
        }

        #shipibo section img:nth-of-type(2),
        #shipibo section#sec05 p img {
            display: none;
        }

        /* about アマゾン屋のこと */

        #about h4 {
            padding: 0 0 7px 0;
            /*            font-family: 'kosugi Maru', sans-serif;*/
            /* font-size: 19px; */
            font-weight: 700;
            line-height: initial;
        }

        #about p:not(.readmore) {
            margin: 0 0 20px 0;
        }

        #about section.inner {
            padding: 30px 6% 0;
        }

        #about section.inner#sec02 {
            padding: 0 6% 10px;
        }

        #about section#sec08 ul li {
            width: 100%;
            margin: 0 0 20px 0;
            padding: 20px 20px 10px;
        }
        #about section#sec08  ul li h4{
            padding: 5px 0 0 0;
            font-size: 20px;
            text-align: center;
        }
        #about section#sec08 ul li  img {
            width: 100%;
            margin: 0;
            border:none ;
        }

        #about .history dl {
            margin: 0 0 30px 0;
            border-bottom: 1px solid #ccc;
        }

        #about .history dl:first-of-type {
            margin: 0 0 30px 0;
            display: block;
        }

        #about .history dl dt {
            width: 100%;
            margin: 10px 0 0;
            padding: 10px 0 0 0;
            font-size: 18px;
            /*            font-weight: 600;*/
            border-top: 1px solid #ccc;
            line-height: 1.2;
        }

        #about .history dl dd {
            width: 100%;
            /* padding: 0 0 10px 0; */
            font-size: 14px;
        }

        /* MAKING 泥染めの工程 */
        #making .lead {
            margin: 1em 0;
        }

        /*
        #making.index #box2 ul li:first-child {
        margin: 20px 0 30px;
}
        */
        #making.index section#sec09 ul{
            margin-bottom: 30px;
        }

        #making.white section.inner,
        #making.brown section.inner{
            padding: 0 6% 20px;
        }

        #making ol.flow {
            margin: 30px 0 20px;
        }

        #making ol.flow li {
            width: 100%;
            margin: 0 0 30px 0;
        }

        #making ol.flow li p {
            margin: 5px 0 10px 40px;
            line-height: 1.6;
        }

        #making ol.flow li:after {
            position: absolute;
            content: "";
            bottom: -20px;
            left: 48%;
            width: 20px;
            height: 20px;
            border-top: 4px solid #ccc;
            border-right: 4px solid #ccc;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
        }

        #making ol.flow li:last-child {
            margin: 0 0 0 0;
        }

        #making ol.flow li:last-child:after {
            display: none;
        }
        #making.white .bg,
        #making.brown .bg{
            padding-bottom:20px;
        }
        #making.white .bg img,
        #making.brown  .bg img{
            display: block;
            width: 75%;
            margin: 0 auto 20px;
        }
}