@charset "utf-8";


/* common ---------------- */
#contents {  }

.name em { font-size: 1.6em; font-weight: normal;}
.name span.en { margin-left: 1em; }
.wlineBox { padding: 40px; border: 4px double #bd757b; }

/*pageHead*/
.pageHead { position: relative; margin-bottom: 80px; min-height: 250px; /*background: #961b21; */ }
.pageHead .sitename { position: absolute; max-width: 164px; top: 20px; left: 20px; }
.pageHead h1 { width: 100%; position: absolute; bottom:-15px; left: 50%; text-align: center;
    transform: translate(-50%,0); -webkit-transform: translate(-50%,0);
    color: #f0c424;  font-size: 22px; line-height: 1.2; letter-spacing: .2em;}
.pageHead h1 span.en { font-size: 3.2em; }

#pan { margin-top: 80px; padding: 8px 0; border-bottom:1px solid rgba(255, 255, 255, .1); }
#pan li { display: inline-block; font-size: 13px; color: #f0c424; }
#pan li a { color: #f0c424; }
#pan li a:hover { color: #fff; }
#pan li:not(:last-child)::after { content: ">"; padding-left: 15px; padding-right: 10px; }


/* contents ---------------- */

/*ページ内リンク*/
.pageLink { padding: 20px;background: #941b25; }
.pageLink li:not(:first-child) { margin-left: 2em; }
.pageLink a { position: relative; padding-left: 1.2em; font-size: 1.2em; }
.pageLink a::before { content: ""; position: absolute; top: 70%; left: 0;
    width: 0; height: 0;
    transform: translate(0,-50%); -webkit-transform: translate(0,-50%);
    border-top: solid 10px #f0c424;
    border-right: solid 6px transparent;
    border-bottom: solid 10px transparent;
    border-left: solid 6px transparent;}

/*------------------------------
about
--------------------------------*/
#contents>section#intro { position: relative;overflow: hidden; padding-bottom: 0; }
#intro::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 400px;
    background:url(../img/about/bg_intro.jpg) no-repeat top -200px right /100%; }
#intro .inner { width: 75%; margin-top:280px; }
#intro .txtBox { position: relative; padding: 40px; background: #9e1e29; }
#intro .txtBox::before { content: ""; position: absolute; bottom: 0; right: -150px;
    background: url(../img/bg_shell.png) no-repeat; width: 346px; height: 326px; background-size: 316px; }
#intro .txtBox h3 { text-align: center;margin-bottom: 40px; font-size: 2em; color: #f0c424; }
#intro .txtBox>p { margin: 1.5em auto; }
#intro .txtBox p.en { margin-top: 40px; font-size: 12px; color: #e0b2b6;  }


/*沿革*/
#history { position: relative; }
#history::before { content: ""; z-index: -1; position: absolute; left: -180px; top: -50px;
    background: url(../img/shadow_shell_02.png) no-repeat; width: 143px; height: 141px; }

.hisBox { margin-top: 65px; }
.his_years { margin-right: 60px; padding: 30px 0 0 0; width: 200px; border-top: 4px solid #d8868d; }
.his_years h3 { font-size: 1.6em; line-height: 1; letter-spacing: -0.02em;  }
.his_month { -webkit-box-flex: 1; flex: 1; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.his_month>dl { display: -webkit-box; display: flex;
    -webkit-box-pack: start; justify-content: flex-start;
    -webkit-box-align: stretch; align-items: stretch;
    -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row;
    letter-spacing: 0.1em;}
.his_month>dl:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.2);  }
.his_month>dl>dt { padding: 32px 10px 30px 20px; width: 174px; }
.his_month>dl>dd { -webkit-box-flex: 1; flex: 1; padding: 32px 0 30px 0; }
.his_month ul li { padding: 22px 0 20px 0; }
.his_month ul li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.2);}

#history .btn { margin: 40px auto; }
#history .btn a { max-width: 300px; margin: 0 0 0 auto; }


/*わかちがたく*/
#contents>section#about_theme { overflow: hidden; position: relative; padding: 0; background: #fcfafc url("../img/shell_circle.png") no-repeat right  -100px bottom -120px; }

#about_theme>.inner { padding: 80px 0; }
#about_theme .ribbon { position: relative; }
#about_theme .ribbon::before { content: ""; position: absolute; top: 0; left: 0; background: url("../img/about/ribbon.png") no-repeat; width: 103px; height: 100%; }

#about_theme .theme_ttl { position: relative; float: right;
    width: 100%; max-width: 200px; height: 100%;
    margin-left: auto; margin-right: 8%; color: #a6020f;}
#about_theme .theme_ttl h2 { font-size: 2.5em; line-height: 1.5;}
#about_theme .theme_ttl h2>span>span { display: block; margin-top: .2em; }
#about_theme .theme_ttl p { font-size: 17px; }

#about_theme .txtBox { width: 100%; max-width: 580px; margin-left: 13%; padding-top: 60px; color: #000; }

.note { padding: 20px; margin-top: 40px;
    justify-content: flex-start; -webkit-justify-content: flex-start;
    width: 100%; max-width: 580px; margin-left: 13%;
    background: #fff; color: #a6020f;
}
.note figure { text-align: center; width: 120px; margin-right: 20px;}
.note figcaption { display: block; margin-top: .5em; font-size: 12px; color: #000; }
.note p { margin: 0; width: 70%; }

/*プロフィール*/
#profile>div { margin-top: 65px; }

.profile { flex-wrap: nowrap; -webkit-flex-wrap: nowrap; }
.profile figure { order: 2; }
.profile .txtBox { order: 1; width: 48%; margin-right: 60px; }
.profile .txtBox .name { color: #f0c424; }

.message { padding: 20px; background: #f8f6fa; border: 20px solid #eee8f2; color: #000; }
.message h3 { text-align: center; color: #a6020f; font-size: 2em; }
.message h3 span { position: relative; padding: 0 90px; }
.message h3 span::before,.message h3 span::after { content: "";
    position: absolute; top: 50%;
    width: 70px; height: 4px; border-bottom: 4px double rgba(166, 2, 15, 0.5); }
.message h3 span::before { left: 0; }
.message h3 span::after { right: 0; }
.message a { color: #000; }

.character .txtBox { margin-left: 60px; }
.character>div { flex-wrap: nowrap; -webkit-flex-wrap: nowrap; }


/*------------------------------
schedule スケジュール
--------------------------------*/
.eventList>li>a>.txtBox { width: 62%; }
.eventList>li {}
.eventList>li:not(:first-child) { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.eventList>li .sub_ttl { margin-bottom: 0; }
.eventList>li .txt { margin: 0; }
.eventList>li .tag { display: inline-block; margin: 0; margin-bottom: 1.5em; padding: 0 1em; font-size: .85em;
    background: #80080e; border-radius: 50px; color: #fff; }
.eventList>li figure { width: 35%;  overflow: hidden; }
.eventList>li figure img { width:100%; height: 200px;  }
.eventList .sub_ttl>span { padding-left: 2em; }
.eventList .sub_ttl>span::before { top: 5px; background-size: 80%; }


/*------------------------------
works 作品紹介
--------------------------------*/
#works #intro::before { background:url("../img/works/bg_intro.jpg") no-repeat center /cover; }

#contents>section.artworks { padding-bottom: 80px; background: url(../img/shadow_shell_02.png) no-repeat right top 80px/120px;}
.worksList li { width:24%; margin-bottom: 15px; }
.artworks #kaioi { position: relative; }
.artworks #kaioi::before { content: "";
    z-index: -1; position: absolute; left: -16%; bottom: 0;
    background: url(../img/shadow_shell_01.png) no-repeat;
    width: 156px; height: 164px; }

/*画家紹介*/
.artist .txtBox { width: 58%; margin-left: 5%; }
.artist .name { color: #f0c424; }
.artist .button { max-width: 300px; }

/*蛤の貝殻の魅力*/
#contents>section.charm { padding-bottom: 80px; background:#fcfafc url("../img/shell_circle.png") no-repeat left -100px bottom -100px /300px; }
.charm>.inner { max-width: 1100px; }
.charmBox figure { max-width: 500px; margin: 0 0 0 auto; order: 2; }
.charmBox+.charmBox figure { margin: 0 auto 0 0; order: 1; }
.charmBox .txtBox { width: 49%; padding: 20px 0 0 50px; }
.charmBox+.charmBox .txtBox { padding: 40px 50px 0 0; order: 2; }
.charmBox .txtBox h3 { color: #a6020f; font-size: 1.6em; }
.charmBox .txtBox p { color: #000; }
.charm .button { max-width: 300px; }

#works .sale .opList { margin: 0 auto; }
#works .sale .button { max-width: 500px; }


/*------------------------------
sale 蛤貝殻の販売
--------------------------------*/
#sale #intro::before { background:url("../img/sale/bg_intro.jpg") no-repeat center /cover; }
.washList { margin-top: 30px; }
.washList li { position: relative; width: 23%; background: #8f1a23; padding: 15px;}
.washList li:not(:last-child)::before {content: "";
    position: absolute;
    top: 50%;
    right: -28px;
    width: 0;
    height: 0;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    border-top: solid 6px transparent;
    border-right: solid 10px transparent;
    border-bottom: solid 6px transparent;
    border-left: solid 10px #f0c424; }

.washList li .step { margin: 0 auto 1em; text-align: center; color: #f0c424; }
.washList li .step span { position: relative; padding-left: 1.4em; font-size: 1.3em; }
.washList li .step span::before { content: '';
    position: absolute; top: 50%; left: 0;
    transform: translate(0, -50%); -webkit-transform: translate(0, -50%);
    background: url("../img/icon_shell_y.png") no-repeat;
    width: 17px; height: 12px; }
.washList li figure { position: relative; }
.washList li figure::before { content: '';
    position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; border: 1px solid #d99221; }
.washList li img { width: 100%; }
#sale .worksList li { width: 19%; }


.flowList { padding: 0; counter-reset: my-counter; list-style: none; }
.flowList li { position: relative; padding: .5em 1em; padding-left: 4em; font-size: 1.46em; border-radius: 5px; background: #8f1a23; }
.flowList li:not(:first-child) { margin-top: 30px; }
.flowList li:before {
    content: counter(my-counter,decimal-leading-zero);
    counter-increment: my-counter;
    display: block; position: absolute; left: 1em;
    padding-right: 1em; color: #fff; border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.flowList li:not(:last-child):after { content: "";
    position: absolute; bottom: -30px; left: 50%;
    width: 0; height: 0;
    transform: translate(-50%,0); -webkit-transform: translate(-50%,0);
    border-top: solid 10px #f0c424;
    border-right: solid 6px transparent;
    border-bottom: solid 10px transparent;
    border-left: solid 6px transparent;
}

#sale .flow .opList { border: none; padding: 0; }

#sale .priceLink .button { max-width: 300px; }

/*------------------------------
experience 貝合わせ出張体験
--------------------------------*/
#experience #intro::before { background:url("../img/experience/bg_intro.jpg") no-repeat center /cover;}

#experience .event .button { max-width:100%; }
#experience .event .imgBox { margin-bottom: 30px;}
#experience .event .imgBox>* {width: 50%;}
#experience .event .imgBox img {width: 100%;}

#experience .worksList li figure { width: 100%; overflow: hidden; }
#experience .worksList li figure img { width:200px; height: 200px; }


/*------------------------------
association 協会概要
--------------------------------*/
#association {
    background: #fcfafc;
    border-color: #80b062;
    p { color: #333;}
    .navToggle { background: #80b062;}
    .pageHead {
        margin-bottom: 120px;
        h1 { bottom: -50px; color: #333;}
        .sitename { max-width: 190px; top: 10px; left: 50%; transform: translateX(-50%);}
    }
    .mailBtn i { background: #a78ee2;}
    .button {
        max-width: unset;
        &.btn_grn {
        padding-block: .4em; background: #72a155; font-size: 1.1em; color: #fff; line-height: 1.4; border-bottom: unset; border-radius: 3px;
        &::before { display: none;}
        &[href*="pdf"] {
            padding-left: 2em; text-align: left;
            &::after { background: url(../img/pdf.svg) no-repeat; width: 20px; height: 19px; right: unset; left: 10px; bottom: unset; top: 50%; transform: translateY(-50%); } 
        }
        &::after {background-color: unset;}
        &:hover {
            opacity: 0.7; border-color: none;
            &::after { background-color: unset;}
        }
        &:has(.small) { padding-block: .6em; line-height: 1.2;}
        }
        span {
            &.small { font-size: .75em; color: #edffe2;}
        }
    }
    a.underline { color: #333; text-decoration: underline;}
    .sec_box {
        max-width: 800px; margin-inline: auto; margin-bottom: clamp(50px,6vw,80px);
        &.col2 {
            display: grid; grid-template-columns: minmax(65%,1fr) 1fr; column-gap: 5%; max-width: unset;
            &:nth-child(even) {
                grid-template-columns: minmax(auto,300px) 1fr;
                figure { grid-area: 1 / 1 / 2 / 2;}
            }
        }
        &.bg_l_pnk { 
            padding: 1.5em 2em 2em; background: #F7F0F2;
        }
        &.greeting {
            display: grid;
            .sec_ttl { padding-top: unset;}
            > figure { margin-block: .5em 2em;}
            .con_box {
                column-count: 2;
                p { margin-top: unset;}
            }
            .profile {
                display: grid; grid-template-columns: 1fr minmax(auto,155px); gap: 1.5em; align-items: center;
                margin-top: 1em; padding: 1em 1.4em; font-size: .95em; background-color: #F7F0F2;
                .name { margin-top: unset;}
            }
        }
    }
    .pdf_list {
        margin-top: 2em; column-count: 4;
        li { width: 100%;}
    }
    .pdf_list2 { column-count: 2;}
    .contact {
        gap: 3em;
        li { width: 47%;}
        .button {
            padding-block: 1.5em; padding-inline: 1em 45px; color: #8e7db8; border: 2px solid #8e7db8; border-radius: 5px; transition: all .3s;
            &::before { display: none;}
            &::after { content: ''; position: absolute; top: 50%; right: 1em; transform: translateY(-50%); width: .5em; height: .5em; background: #8e7db8; clip-path: polygon(100% 50%, 0 20%, 0 80%);}
            &:hover { background-color: #ebe9f1;}
            .far { padding-right: 1em;}
        }
    }
    /* ブログ読み込み */
    section.article
        .article_list {
            display: grid; grid-template-columns: repeat(2,1fr); gap: 1em 1.5em;
            >li {
                border-bottom: 1px solid #F7F0F2;
                a {
                    gap: 1em; padding-bottom: 1em; color: #333; border: 1px;
                }
                .txtBox {
                    flex: 1;
                    .ttl { line-height: 1.5;}
                }
                figure {
                    max-width: 140px;
                    img {
                        aspect-ratio: 1.732/1; object-fit: cover;
                    }
                }
            }
        }
        .linkBox {
            margin-top: 2em;
            .button { max-width: 200px; margin-inline: auto;}
        }
        /* ttl */
        .sec_ttl {
            padding-block: .5em; font-size: clamp(18px,3vw,28px); color: #333; border-bottom: 4px double #a78ee2;
            &.narrow {
                width: 80%; margin-inline: auto; text-align: center;
            }
        }
    }




/*------------------------------
contact お問い合わせ
--------------------------------*/
/*#contact .bg_img { width: 100%; min-height: 250px; margin-bottom: 40px;
    background: url("../img/contact/bg_sell.jpg") no-repeat center /cover; }
#contact #con_ex .bg_img { background-image: url("../img/contact/bg_ex.jpg"); }*/

/*ご注文に際してのお願い*/
.order .txt { font-size: 18px; }
.order .txt .marker { font-size: 1.2em; }

.opList {  margin: 40px auto; padding: 20px; border: 1px solid rgba(255, 255, 255, .6); }
.opList li {text-indent: -1em; padding-left: 1em; }
.opList li::before { content: "*"; margin-right: .5em; }

.conbtn_box { text-align: center; margin: 60px auto;  }
.btn_con { text-align: center; }
.btn_con a { position: relative; display: inline-block; padding:.2em 1.5em .3em 2.5em; font-size: 2em; color: #fff; background: #dc9d15; border-radius: 10px; }
.btn_con a::before { content: "\f0e0"; font-family: FontAwesome;
    position: absolute; top: 50%; left: 8%;font-size: .75em; color: #fff;
    transform: translate(0,-50%); -webkit-transform: translate(0,-50%); }
.btn_con a:hover { opacity: .7; }

/*蛤貝殻の価格の目安*/
.price_tb { table-layout: fixed; width:100%; margin: 0 auto; padding: 0; border-collapse: collapse; background: #fcfafc; color: #000; }
.price_tb thead{ border-bottom:3px solid #a6020f; }
.price_tb tr { padding: .35em; border-bottom: 1px solid  #ddd; }
.price_tb tr:last-child{ border-bottom: none; }
.price_tb th { color: #a6020f; }
.price_tb th,
.price_tb td { padding: 1em 10px 1em 1em; border-right: 1px solid  #ddd; }
.price_tb th:last-child,
.price_tb td:last-child{ border: none; }
.price_tb .sold{ color: #a6020f; font-weight: bold; }


#error #contents .txtBox { text-align: center; }
#error #contents .btn { margin-top: 80px; }
#error #contents .btn a { margin: 0 auto; }

/*------------------------------
privacy プライバシーポリシー
--------------------------------*/
#privacy .privacy_txt > div { padding: 30px; border-top: 1px solid rgba(255, 255, 255, .2);}
#privacy .privacy_txt > div:first-of-type { margin-top: 50px;}
#privacy .privacy_txt > div:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .2);}
#privacy .privacy_txt h2 { padding-left: 2.5em; font-size: 1.25em; position: relative;}
#privacy .privacy_txt h2::before { content: ''; position: absolute; left: 0; transform: translate(0, 5px); -webkit-transform: translate(0, 5px); background: url(../img/icon_shell_yellow.png) no-repeat center /100% 100%; width: 34px; height: 24px;}


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {
  /*------------------------------
  about
  --------------------------------*/
  /*沿革*/
  .his_years { margin-right: 40px; width: 120px; }
  .his_month>dl>dt { width: 100px; padding: 22px 10px 20px 20px; }
  .his_month>dl>dd { padding: 20px 0; }

    /*------------------------------
  association 一般社団法人 貝合貝覆文化協会
  --------------------------------*/
  #association ul.pdf_list { column-count: 2; }
  #association ul.pdf_list li:not(:nth-child(2n)){ margin-bottom: 0.8em; }

}



/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {

  /*pageHead*/
  .pageHead { min-height: 200px; }
  .pageHead .sitename { max-width: 120px; }

  .wlineBox { padding: 30px; }

  .note { margin: 40px auto 0; width: 80%; max-width: 100%;}


  /*------------------------------
  about
  --------------------------------*/
  #intro::before { top: 0; left: 0; width: 100%; height: 320px;
    background-position: top -20px right ; }
  #intro .inner {  width: 90%; margin-top: 220px; }
  #intro .txtBox { width: 100%; padding: 20px 30px; background: #9e1e29; }
  #intro .txtBox::before { top: 250px; }

  /*わかちがたく*/
  #about_theme .ribbon::before { left: -10px; background-size: 70%;}
  #about_theme .theme_ttl { float: none; width: 100%; max-width: 100%; height: auto;
      margin: 0 auto; text-align: center;
      -webkit-writing-mode: inherit;
      -moz-writing-mode: inherit;
      -ms-writing-mode: inherit;
      -ms-writing-mode: inherit;
      writing-mode: inherit;
  }
  #about_theme .theme_ttl h2 { line-height: 1.2; }
  #about_theme .txtBox { width: 80%; max-width: 100%;  padding-top: 30px; margin: 0 auto; }

  /*プロフィール*/
  .character .txtBox .name { margin-top: 0; }


  /*------------------------------
  works 作品紹介
  --------------------------------*/
  #works #intro .txtBox::before { top: 80px; background-size: 200px; right: -220px; }

  #works #intro::before { background-position: top -50px center; }

  .artist figure { width: 48%; text-align: center; }
  .artist .txtBox { width: 48%; margin-left: 0; }
  .charmBox >* { width: 48%!important; padding: 0!important; margin: 0;}




  /*------------------------------
  experience 貝合わせ出張体験
  --------------------------------*/
  #experience #intro .txtBox::before { top: 60px; right: -210px; background-size: 200px; }
#experience .worksList li figure img { width: 150px; height: 150px; }

    /*------------------------------
  association 一般社団法人 貝合貝覆文化協会
  --------------------------------*/
  #association ul.pdf_list2 { column-count: 1;}
  #association .contact { gap: 1.5em;}

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){

#pan { margin-top: 40px; }

.pageHead { min-height: 180px; margin-bottom: 50px; }
.pageHead h1 { font-size: 17px; }
.pageHead h1 span.en { font-size: 3em; }
.pageHead .sitename { max-width: 80px; top: 10px; left: 10px; }

.pageLink { display: block; padding: 20px 10px;  }
.pageLink a { font-size: 1em; }
.pageLink li:not(:first-child) { margin-left: 0; margin-top: 10px; }

/*------------------------------
about
--------------------------------*/
#intro::before { height: 250px; background-position:top -10px right; }
#intro .inner { margin-top: 150px; }
#intro .txtBox { padding:20px 10px; }
#intro .txtBox h3 { margin-bottom: 30px; font-size: 1.5em; }
#intro .txtBox p.en { margin-top: 30px; }

#history::before { left: auto; top: -20px; right: 0;  background-size: 80%; }
.hisBox {  margin-top: 30px; }
.his_years { margin-right: 0; width: 100%; border-top: none;padding: 0; }
.his_month { margin-top: 18px; border-top: 4px solid #d8868d; }
.his_month>dl>dt { width: 80px; padding: 18px 5px 18px 0; }
.his_month>dl>dd { padding: 18px 0 18px 0;}

#history .btn { margin: 20px auto; text-align: center; }
#history .btn a {margin: 0 auto; }

#about_theme>.inner { padding: 40px 0; }
#about_theme .ribbon::before { display: none; }
#about_theme .theme_ttl p { font-size: 1em; }
#about_theme .theme_ttl h2 { font-size: 2em; }
#about_theme .txtBox { width: 100%; padding-top: 20px; }
.note figure {  width: 70%; margin: 0 auto 10px; }
.note p { width: 100%; }

#profile>div { margin-top: 30px; }
.profile { flex-wrap: wrap; -webkit-flex-wrap: wrap; }
.profile figure { order: 1; margin: 0 auto; }
.profile .txtBox { order: 2; width: 100%; margin-right: 0; }

.message { padding: 20px; border: 10px solid #eee8f2;}
.message h3 span { display: block; padding: 0;}
.message h3 span::before, .message h3 span::after { width: 30px; }

.character>div { flex-wrap: wrap; -webkit-flex-wrap: wrap; }
.character figure { display: block; width: 100%; margin: 0 auto; }
.character .txtBox { margin-left: 0; margin-top: 20px; }

/*------------------------------
schedule
--------------------------------*/
.eventList>li>a { display: block; }
.eventList>li>a>* { width: 100%!important; }
.eventList>li figure { margin-bottom: 20px; }



/*------------------------------
works 作品紹介
--------------------------------*/
#works #intro::before { background-position: top center; }
#contents>section.artworks,
.artworks #kaioi::before { background-size: 80px; }
.worksList li { width: 48%; }
.artist .txtBox,.artist figure { width: 100%; }
.charmBox >* { width: 100%!important; }
.charmBox figure { order: 1; }
.charmBox .txtBox { order: 2; }



/*------------------------------
sale 蛤貝殻の販売
--------------------------------*/
#sale .pageHead h1 span.en { font-size: 2.5em; }
.washList li { width: 100%; padding: 20px;margin-bottom: 30px; }
.washList li:not(:last-child)::before {
    top: auto; right: auto; left: 50%; bottom: -30px;
    transform: translate(-50%,0); -webkit-transform: translate(-50%,0);
    border-top: solid 10px #f0c424;
    border-right: solid 6px transparent;
    border-bottom: solid 10px transparent;
    border-left: solid 6px transparent;}

.flowList li { font-size: 1.2em; }
#sale .worksList li { width: 48%; }



/*------------------------------
contact お問い合わせ
--------------------------------*/
#contact .pageLink li:nth-child(2) a { display: block; }
#contact .pageLink li:nth-child(2) a::before { display: none; }
#contact .pageLink li:nth-child(2) span { display: inline-block; }
#contact .pageLink li:nth-child(2) span::before { content: "";
    position: absolute; top: 8px; left: 0;
    width: 0; height: 0;
    border-top: solid 10px #f0c424; border-right: solid 6px transparent; border-bottom: solid 10px transparent; border-left: solid 6px transparent;}

/*#contact .bg_img {  min-height: 120px; }*/

.order .txt { font-size: 1em; margin: 1.5em auto; }

.opList { margin: 20px auto; }

.conbtn_box { text-align: left; margin: 40px auto;  }
.btn_con { text-align: left;  }
.btn_con+p { text-align: center; margin-bottom: 2em; }
.btn_con a { display: block; text-align: center; padding: .5em 1em .5em 2.2em; font-size: 1.2em; }
.btn_con a::before { left: 35px;}

/*蛤貝殻の価格の目安*/
.price_tb { display: block; overflow-x: scroll; white-space: nowrap; }

/*.price_tb { width:100%; border: 0;}
.price_tb thead { overflow: hidden; position: absolute;
    width: 1px; height: 1px; margin: -1px; padding: 0; border: none; clip: rect(0 0 0 0); }
.price_tb tr { display: block; padding: 0; border-bottom: 0; }
.price_tb th{ display: block; margin-top: .6em; padding: 10px; text-align: left; font-size: 1.2em;
    border-right: none; border-bottom: 4px solid #d8868d; }
.price_tb td { display: block; position: relative; padding: 10px; border-right: none; }
.price_tb td.price { margin-top: 0; margin-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, 0.2)!important; }
.price_tb td::before { content: attr(data-label); position: absolute; left: 10px; font-weight: bold; }
.price_tb td:last-child { border-bottom: 0; }*/

/*------------------------------
experience 貝合わせ出張体験
--------------------------------*/
#experience .event .imgBox>* {width: 100%;}


#error #contents .txtBox { text-align: left; }

/*------------------------------
association 一般社団法人 貝合貝覆文化協会
--------------------------------*/
#association {
    .pageHead {
        margin-bottom: 70px;
        h1 { bottom: -40px; }
        .sitename { top: 15px; max-width: 120px;}
    }
    .sec_box {
        &.col2 {
            grid-template-columns: 1fr; gap: 1em;
            figure { width: 90%; margin-inline: auto;}
            &:nth-child(even) {
                grid-template-columns: 1fr;
                figure { grid-area:  2 / 1 / 3 / 2; }
            }
        }
        &.greeting {
            .con_box { column-count: 1;}
            > figure { margin-bottom: 1.5em;}
            .profile {
                grid-template-columns: 1fr; gap: unset;
                figure { width: 70%;}
            }
        }
    }
    /* ttl */
    .sec_ttl {
        &.narrow {
            width: 100%;
        }
    }
    .contact {
        gap: 1.5em;
        li { width: 95%;}
        .button { padding-block: .7em;}
    }
    
    /* ブログ読み込み */
    section.article
    .article_list {
        grid-template-columns: 1fr; gap: 1em;
    }

}
/* #association ul.pdf_list { display: block; } */
#association ul.pdf_list2 { column-count: unset; }
#association ul.pdf_list2 li .button {
     min-width: 270px; margin-block: 0.5em; 
    }
#association .button span.small { padding-left: 0; }


/*------------------------------
privacy プライバシーポリシー
--------------------------------*/
#privacy .privacy_txt > div { padding: 15px 0;}

}


@media screen and (max-width: 320px){
#sale .pageHead h1 span.en { font-size: 2em; }

}