@charset "UTF-8";

/************************
  ヘッダーcss
************************/

/* 共通 */
section { margin-top: 2rem; }
article { margin: auto; }/* max-width指定しなけりゃ最大1000 */
article img { width: 100%; }

/* ハンバーガーメニュー */
header div#header { background: #ffffff; }
.menu.open {
 background: rgba(145,193,193,0.975);
}
 /* トグルアイコン */
.menu_toggle.open .menu_toggle_icon:nth-child(1),
.menu_toggle.open .menu_toggle_icon:nth-child(2),.menu_toggle.open .menu_toggle_icon:nth-child(3)
{ background: #ffffff; }
.menu ul li{ border-bottom: 1px dotted #d6e7e7; }
.menu ul li a { width: 100%; display: block;}

@media screen and ( max-width : 767px) { 
    .menu ul { width: 90%; margin-left: 10%; }
    .menu ul li a:link, .menu ul li a:visited { color: #ffffff; }
 }
@media ( min-width : 769px) { /* PCのみ適応 */
    header div#header { height: 8rem; }
    .menu ul li { text-align: center; border: none; padding: 2em; }
}

/* メニューend */
/* header */
header .titleIcon { width: 6rem; }
.titleIcon img { width: 100%; }

/*
header {width: 100%; padding: .25em; }

nav>ul { display: flex; flex-wrap: wrap; justify-content: flex-end;}
nav>ul li { font-size: 1em; font-weight: 100; padding: .25em; white-space: pre-wrap;}
header div { display: flex; justify-content: space-between; }
header div.menu>span { font-size: 2rem; }

header .titleIcon img { width: 5rem; }
header nav {display: none;}

@media ( min-width : 769px) {
  header .titleIcon img { display: none; }
  header nav {display: inline-block;}
  header div.menu { display: none; } 
}


@media ( min-width : 769px) { 
  header .titleIcon img { display: none; }
  header nav {display: inline-block;}
  header div.menu { display: none; } 
}

*/


/*h1-アイコン*/
h1,h2 { font-family: "Sawarabi Mincho"; font-size: 1.5rem; letter-spacing:.1em; margin: auto; font-weight: 400; text-align: center; }
h1 { margin-bottom: 1em; }
h1 img { display: block; margin: 1em auto;}
/* 英数字 */
h2>span { font-family:'GenJyuuGothic'; }
h1>img{ max-width: 8rem; }
h1>img+span{font-family: "Sawarabi Mincho"; }
@media ( min-width : 769px) { /* PCのみ適応 */
    h1,h2 {  font-size: 2rem; }
    h1>img{ max-width: 8rem; }
    h1>img { margin: 0; }
    h1>img+span {
      writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      margin: auto;
    }
    span.tate{
writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
 transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    }
}
.centertxt { text-align: center; }
span.f-small { font-size: small; }

article div.h1box { display: flex; flex-direction: column;}
div.note { margin: 1rem;  }

@media ( min-width : 769px) { /* PCのみ適応 */
    article div.h1box  { margin: 3rem; justify-content: space-between; }
    div.h1box>h1 { flex-basis: 8rem;  margin: 0;}
    div.h1box>div { flex-basis: 100%;}
    div.h1box.right{ /* 右寄せ */
     flex-direction: row-reverse;
    }
    div.h1box.left{ /* 左寄せ */
     flex-direction: row;
    }
    /* PCのみ右にマージン1rem */
    div.rem1r_pc { margin-right: 1rem; }

}
/* タイトル横 */
.h1txt { font-family: "Sawarabi Mincho"; font-size: 2rem; letter-spacing:.1em; margin-bottom: .25em; }


/* s_top */
section#s_top { margin-top: 0; }
#s_top article.topImg,#s_top article.box  { display: flex; justify-content: center; }
#s_top .topimg img { margin-top: 1rem; }
/* 丸ボックス*/
#s_top article.box { flex-wrap: wrap;}
#s_top article.box div {
    color: #ffffff;
    background-color: #95c6c6;
    text-align: center;
    font-family: "Sawarabi Mincho";
    font-size: 1.2rem;
    margin: .25rem .5rem;
    border-radius: 25vw;
    flex-basis: 35vw;
    padding: 7vw 0;
 }
 #s_top article.box div.upper {
    letter-spacing: .25rem; font-size: 150%; 
    padding: 13vw 0;
 }
 #s_top article.box div.katadai {
    line-height: 1.5rem;
    padding-top: 10vw;
    padding-bottom: 0;
 }
 
 #s_top article.box div.katadai>span {
    font-size: 0.8rem; display: inline-block; letter-spacing: 2px;
    line-height: 1.5; margin-top: 1rem;
 }
@media ( max-width : 767px) { /* スマホのみ適応 */
 #s_top article.box div.katadai>span {
    font-size: 0.7rem;
    line-height: 1.25; margin-top: .5rem;
 }
 #s_top article.box div.mr { margin-right: auto; }
 #s_top article.box div.ml { margin-left: auto; }
}
@media ( min-width : 768px) { /* タブレットのみ適応 */
 #s_top article.box div {
    flex-basis: 22vw;
    margin: 1vw;
    padding: 5vw 0;
 }
 #s_top article.box div.upper {
    padding: 5vw 0;
    letter-spacing: .5rem; font-size: 150%; padding-top: 4rem;
 }
}
@media ( min-width : 769px) { /* PCのみ適応 */
  section#s_top article.topImg{ max-width: 100%; }
  #s_top div.title { flex-basis: 32%; text-align: right;}
  #s_top div.title h1 { margin-right: 0; }
  #s_top div.title img { width: 8rem; margin: 1rem 0 auto auto; }
  #s_top div.topimg{ flex-basis: 78%; padding-left: 5rem; }
  #s_top .topimg img { width: 49rem; }
  
  #s_top article.box div {
    font-size: 1.5rem;
    flex-basis: 200px;
    margin: 1rem;
    padding: 45px 0;
    border-radius: 100px;
  }
 #s_top article.box div.upper {
    padding: 45px 0;
    letter-spacing: .5rem; font-size: 200%; padding-top: 4.5rem;
 }
}
#s_top .centertxt { letter-spacing: .25em; }
#s_top .centertxt span { font-size: 2em; }

/* s_detail */
@media ( min-width : 769px) { 
  #s_detail .h1box>div { padding-left: 5rem; }
}
.h1box p { font-size: 150%; padding-bottom: 1em; border-bottom: 1px solid #000000; margin-bottom: 2em; }

/* s_sample */
section#s_sample { background-color: #cce1e1; padding-top: .5rem; }
section#s_sample article { background-color: transparent; }
#s_sample .samplelist li { background-color: #fff; }

/* サンプル一覧 */
#s_sample .samplelist ul { display: flex; flex-wrap: wrap; padding: .25rem;}
#s_sample .samplelist li>div { background-color: #aaa; color:#fff;text-align: center; padding: .5rem; font-size: .8rem;}
#s_sample .samplelist li>div span { font-size: .6rem; }
#s_sample .samplelist dl { padding: 0; }
#s_sample .samplelist dt { float: left;}
#s_sample .samplelist dd { margin-left: 1rem; }
#s_sample .samplelist dd.etc { font-size: .6rem; 
    margin: auto;
    padding: 0.5em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
 }
#s_sample .samplelist dd.url { margin-left: .5rem; }
#s_sample .samplelist dd.url a {  background-color:#ccc; text-align: center; padding: 0 .75rem; border-radius: .25rem; display:inline-block; margin-top: .25rem; }
#s_sample .samplelist dd.sample { margin-left: .5rem; font-size: .5rem; text-align: center; }

#s_sample .samplelist dd ,#s_sample .samplelist dt { line-height: 1.25rem; }
#s_sample .samplelist dt,#s_sample .samplelist dd { font-size: .6rem; }

#s_sample .url a:link,#s_sample .url a:visited { color:#000; }

#s_sample .samplelist li { flex-basis: 48%; max-width: 48%; margin: 1rem 1%; padding-bottom: 1rem; }

  /* モーダルの中身 */
#samplelist.modal dd.sample {  font-size: 1rem;  }

@media ( min-width : 769px) { 
#s_sample .samplelist li { flex-basis: 31%; max-width: 31%; margin: 1.5rem 1%; }
#s_sample .samplelist li>div { font-size: 1rem;}
#s_sample .samplelist li>div span { font-size: .8rem; }

#s_sample .samplelist dt,#s_sample .samplelist dd.small,#s_sample .samplelist dd>a { font-size: .8rem; }
#s_sample .samplelist dd { font-size: 1rem; }
#s_sample .samplelist dd.etc {font-size: .8rem; }
#s_sample .samplelist dd ,#s_sample .samplelist dt { line-height: 1.5rem; }
}

/* s_spec */
#s_spec article { margin-bottom: 5rem; }
@media ( min-width : 769px) { /* 画像サイズを700くらいに調整 */
    #s_spec article { padding: 0 150px; }
    article#a_size { padding: 0; }
    article#a_size>div.h1box div { padding-left: 100px; } 
}
/* 仕様のタイトル */
article>div.a_title { padding: .5rem; background-color: #95c6c6; color: #ffffff;
 font-family:'GenJyuuGothic'; margin-bottom: 1rem; }
article>div.a_title>h2 { text-align: left; font-size: 1.5rem; padding-left: .5rem; font-family:'GenJyuuGothic'; }
article>div.a_title>h2>span { font-weight: normal; font-size: 50%; margin-left: .5em; }
article>div.a_title>h2>span>span { font-size: 60%; letter-spacing: 0; }
@media ( min-width : 769px) { /* PCのみ適応 */
	article>div.a_title>h2 { font-size: 2rem; padding-left: 1rem; }
}

/* 生地一覧 */
.kijilist ul { display: flex; flex-wrap: wrap; padding: 0 .25rem;}
.kijilist li div{ text-align: center; }
.kijilist li div { font-size: 1.2rem; }

.kijilist li { flex-basis: 25%; padding: 1rem .25rem;  border: 1px solid #ccc; border-width: 0 1px 1px 0; }
.kijilist li div>span { font-size: 60%; display: block;}

  /* モーダルの中身 */
   .modal div { font-size: 1.5rem; margin-top: 1vh; }
   .modal div>span { font-size: 1rem; }
   #kijilist.modal div>span { display: block; }

  /* dlでオープン */
	.modal .dlopen div>span { display: inline-block; }
	.modal .dlopen dt { float: left; text-align:left; width: 30%; max-width: 200px;  font-size: 80%; padding-left: 1rem; }
	.modal .dlopen dd { margin-left: 1rem; text-align: left; /*width: 100%;*/  }
	.modal .dlopen dl { 
    max-width: 600px;
    margin: auto;
    font-size: 70%; 
    overflow-y: auto; overflow-x:hidden; max-height: 30vh;
	}
	.modal .dlopen dd.url { display: block;
    z-index: 10001; text-align: center; padding-top: 1rem;}
	.modal .dlopen dd.url a {  background-color:#ccc; text-align: center; padding: 0 2rem; border-radius: .25rem; display:inline-block; margin-top: .25rem; }
	.modal .dlopen dd.url a:link,	.modal .dlopen dd.url a:visited { color:#000; }
    .modal .dlopen dd.etc { font-size: .8em; margin: auto; margin-top: .5rem; padding-left: .5rem; padding-right: .5rem; }
 
 
@media ( min-width : 769px) { 
	.kijilist li { flex-basis: 20%; }
	.kijilist li div { font-size: 1.5rem; }
	.modal .dlopen dl {  max-height: 300px;	}
   .modal div { font-size: 2rem; }
   .modal div>span { font-size: 1.5rem; }
    .modal .dlopen dd.etc { font-size: .7em; }
}

  /* ボーダーcss */
@media ( max-width : 767px) { 
	.kijilist li:nth-of-type(4n){ border-right: none; }
}
@media ( min-width : 769px) { 
	.kijilist li:nth-of-type(5n){ border-right: none; }
}
.kijilist li:last-child{ border-right: none; }




/* バリエ一覧 */
.variationlist ul { display: flex; flex-wrap: wrap; padding: 0 .25rem; justify-content: space-between; /*justify-content: space-around;*/}
.variationlist li div.title { font-size: 90%; line-height:1; background-color: #666; color: #fff; padding: .5rem .5rem; text-align: center; }
.variationlist li div.comment { padding: .25rem; font-size: 80%; }
.variationlist li { flex-basis: 50%;  padding: 0 .25rem; margin-bottom: 3rem; }
.variationlist li div>span { font-size: 70%;}

.variationlist .li25 { flex-basis: 25%;}
.variationlist .li45 { flex-basis: 45%;}


  /* モーダルの中身 */
   #variationlist.modal div.comment { font-size: 1rem;
         max-width: 500px;
         max-height: 10em;
        margin: auto;
        text-align: left;
        overflow-y: auto;
        padding: 1rem;
}

@media ( min-width : 769px) {
.variationlist li div.title { font-size: 110%; line-height: normal; }
}

/* 価格表 */
article#a_price table { width: 100%; font-size: 90%; }
article#a_price table th>span { display: block; font-size: 80%; }
article#a_price table th { padding-bottom: .5rem; }
article#a_price table th, article#a_price table td { border: 1px solid #666; border-width: 0 1px 1px 0; text-align: center; }
article#a_price table th:last-child, article#a_price table td:last-child { border-right: none; }
article#a_price table, article#a_price div { margin-bottom: 1rem; }
@media ( min-width : 769px) { /* PCのみ適応 */
    article#a_price table { font-size: 100%; }
}

/* s_qa */
#s_qa dt { font-size: 1.5rem; }
#s_qa dt:before { content:"Q."; margin-right: .25em;}
#s_qa dd { margin: 1.5rem 0  2rem 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #666; }

@media ( min-width : 769px) {
    #s_qa .note { max-width: 900px; margin: auto; }
}

/* s_mitsumori */
#s_mitsumori .maillink { display: flex; flex-wrap: wrap; justify-content: space-around; }
#s_mitsumori .maillink a { flex-basis: 40%;}

@media ( min-width : 769px) {
#s_mitsumori .maillink { justify-content: center; }
 #s_mitsumori .maillink a { flex-basis: 20%; margin: 2rem; }
 }

/*  footer */
 footer { margin-bottom: 2rem;
}
 footer .wrapper {
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    background-color: #cac8c9;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
 }

 .wrapper h1 { flex-basis: 100%; margin-bottom: .5rem; }
 .wrapper div { flex-basis: 50%; }
 .wrapper button { display: block;
   border: none;
   padding: 1rem;
   margin: 1rem 0;
   border-radius: .5rem;
 } 
 
 footer h1 { text-align: left; }
 footer h1, footer p, footer p a:link, footer p a:hover { color: #fff; }
 footer>nav>ul{ display: flex; justify-content: center; }
 footer>nav>ul li { font-size: .7rem; padding: .25rem; }
 footer>small { display:block; text-align: center; }
 
 @media ( min-width : 769px) {
 footer .wrapper { padding-left: 30%; flex-direction: row;}
 footer .wrapper {
    background-image: url("../images/obtb029.jpg");
 }
 footer>nav>ul li { font-size: .8rem; padding: .5rem; }
 footer>small { font-size: 80%; }
}




/* s_info */
@media ( min-width : 769px) {
  section#s_info{ margin:auto; }
}
#s_info article { text-align:center; }

/* notice */
#notice { display: none; }
#notice>div {  margin: 1em .5em; text-align: center; }
#notice>div>span {  display: inline-block; text-align: left; padding: 1em; border: 2px solid #b51a1a; }