@charset "utf-8";
* {
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
    outline: none;
}
html{
  caret-color: transparent;
  overflow-x: hidden;
}
#selectarea_outer img{
  max-width: 100%;
}
body {
    margin: 0;
}


.tax{
    font-size: 10px;
    margin-left: 3px;
}

#area_b a i{
    margin-right:5px;
}

.imglist{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: fit-content;
    align-items: center;
    margin: 0 auto;
}
.imglist li{
    border-bottom: 1px solid #eee;
    margin-bottom: 3%;
    padding-bottom: 3%;
}

.imglist img{
    max-width: 100%;
}

#topback {
    position: fixed;
    z-index: 3;
    z-index: 999;
    bottom: 2%;
    right: 3%;
    background: #0000008c;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color: #fff;
    text-decoration: none;
}


#selectarea_outer a{
  cursor: pointer;
}
#customorder {
    padding: 0 16px 50px;
    margin: 0px auto;
    max-width: 980px;
    max-width: 1200px;
}
#main h1{
    font-size: 20px;
    font-weight: bold;
}
#infomation h3{
    font-size: 20px;
    font-weight: bold;
}
#infomation p{
     font-size: 12px;
    margin: 10px 0; 
}

#output{
  position: fixed;
    width: 100%;
    z-index: 99;
    font-size: 12px;
    padding: 10px;
    width: 100%;
    bottom: 0;
    right: 0;

    background: #152233e8;
    color: #fff;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 50%);

}

#output .inner{
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

#output .inner>g{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    line-height: 1.4;
    letter-spacing: -.5px;
}
#output .inner>g>g{
    display: flex;
    justify-content: space-between;
    letter-spacing: -.8px;
    width: 100%;
}

#output a{
    text-decoration: none;
    color: #212d3d;
    cursor: pointer;
    width: 49%;
    background: #fff;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin: 5px 0;
    font-weight: bold;
}

@media (max-height: 700px) {
#customorder {
    max-width: 980px;
}
#output .inner {
    max-width: 980px;
}

}


#output #output_head{
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
}
#output dl{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 5px;

    transition: max-height 1s,opacity .5s,padding .1s ease-in;
    overflow: hidden;
    max-height: 100vh;
}
#output dl.passive{
    max-height: 0;
}

/*開閉ボタン　没*/
/*#outputdd_open{
    color: #ba996b;
    cursor: pointer;
}*/

#output dd{
    margin-right: 10px;
    font-size: 12px;
    letter-spacing: -.8px;
    line-height: 2;
}
#output dd b{
    /*color: #ba996b;*/
    color: #dfb880;
}

@media (max-width: 769px){
#output{
    width: 100%;
    bottom: 70px;
}
#output dd{
    font-size: 10px;
}

}

#output dd:not(:first-of-type){
    /*display: none;*/
}
#copy{
    /*margin-left: auto;*/
}
#output i{
  margin-right: 5px;
}
.success-msg {
    display: none;
    position: fixed;
    width: 300px;
    height: 40px;
    line-height: 40px;
    background-color: #152233;
    color: #fff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    border-radius: 100px;
    font-weight: bold;
    font-size: 14px;
    background: #152233e8;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 50%);
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 5s linear 0s normal both;
}

#headresetbtn{
    padding: 0 0 10px;
    display: block;
    background: #fff;
}
#headresetmsg{
    margin: 0;
}

#headselectarea{
    /*transition: max-height .5s ease-out;*/
    max-height: 100vh;
    opacity: 1;
}
#headselectarea.close{
    max-height: 0;
    opacity: 0;
}

.lock{
  opacity: .4;
  pointer-events: none;
}

#area_b section:first-of-type h3{
    border: 0;
    padding-top: 0;
    /*margin-top: 0;*/
}

/*.photo dd:nth-of-type(odd) img{

}
.photo dd:nth-of-type(even) img{
   
}
*/


.photo img{
  border-radius: 20px;
}

#selectarea_outer ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}
#selectarea_outer section li{
    cursor: pointer;
}
/*************************************************************************トランジション**/
#selectarea_outer *:not(.form-textbox-label):not(.form-dropdown-label){
    transition: max-height .5s,opacity .5s,background-color .1s ease-out;
}

.hide{
    display: none!important;
}

.hide.sneek{
    display: flex!important;
    opacity: .4;
    pointer-events: none;
}
#selectarea_outer g.hide.sneek{
  display: block!important;
}

#selectarea_outer g{
  display: contents;
}

#selectarea_outer a{
    font-weight: bold;
    text-decoration: none;
    color: #ba996b;
    font-size: 15px;
    display: block;
    margin: 5px;
}
#selectarea_outer{
  display: flex;
  margin-top: 3%;
  border-top: solid 1px #eee;

}
#selectarea_outer>div{
  box-sizing: border-box;
  width: 100%;
  padding-top: 11%;
  margin-top: -8%;
}
#area_a{
  position: sticky;
  top: 0;
  height: 100%;
  padding-right: 60px;
  max-width: 60%;
  min-width: 60%;
}

#selectarea_outer .flex,
#selectarea_outer .flexswatch,
#selectarea_outer .fleximg{
    margin-top: 10px;
}
#selectarea_outer .flexswatch li{
  justify-content: flex-start;
}

/*色選択小型化テスト*/
#selectarea_outer .flexswatch li {
    border: 2px solid #ffffff00;
    min-height: auto;
    padding: 5px 0!important;
    width: 58px!important;
    box-sizing: border-box;
    border-width: 2px;
}

.flexswatch img{
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
}
.flexswatch p{
  width: 100%;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 15px;
  color: #999;
    margin-top: 10px;
}



#selectarea_outer .fleximg li{
  width: 100%;
  border-color: #fff;
}
.fleximg img{
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
}

.pop{
  display: none;
}
#selectarea_outer section{
  font-family: SF Pro JP,SF Pro Text,SF Pro Icons,Hiragino Kaku Gothic Pro,ヒラギノ角ゴ Pro W3,メイリオ,Meiryo,ＭＳ Ｐゴシック,Helvetica Neue,Helvetica,Arial,sans-serif;
  margin: 10px 0;
}


.bind{
  border:0;
  padding-top: 0;
}
#selectarea_outer h3{
    font-weight: bold;
    font-size: 15px;
    border-top: 1px solid #d2d2d7;
    margin-top: 30px;
    padding-top: 30px;
    margin-bottom: 0;
}
#selectarea_outer h3 span{
  font-weight: normal;
  margin-left: 10px;
  font-size: 14px;
}
#selectarea_outer u{
  text-decoration: none;
  font-weight: normal;
  font-size: 12px;
}
#selectarea_outer figure{
    padding: 0;
    margin: 0;
}
#photoimg{   
  overflow: hidden;
  border-radius: 20px;
  padding: 0;
  line-height: 0;
  margin-bottom: 10px;
  pointer-events: none;
}

#selectarea_outer #headimg{
    z-index: 1;
    position: relative;
    padding: 0;
    margin: 0;
    line-height: 0;
    font-size: 0;
}

#headimg figure{
    border-radius: 20px;
    overflow: hidden;
    line-height: 0;
}
#headimg figure img{
  width: 100%;
}


#headname{
  line-height: 1.2;
}
#selectarea_outer ul{
    width: 100%;
}
#selectarea_outer li{
    font-size: 17px;
    font-size: 12px;
    line-height: 1.23536;
    font-weight: 400;
    letter-spacing: -.022em;
    font-weight: bold;

    width: 100%;
    height: auto;
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    min-height: 3.88235rem;
    min-height: 62px;

    color: #1d1d1f;
    border-color: #86868b;
    background-color: hsla(0,0%,100%,.8);
    margin-top: 10px;
}

#selectarea_outer li.selected{
  border-width: 2px;
  padding: 14px;
  border-color: #BA996B;
  pointer-events: none;
}

#selectarea_outer ul:not(.flex) li.selected{
  background-color: #BA996B;
}



.flex{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#selectarea_outer .flex li{
  width: calc(25% - 5px);
  font-size: 10px;
  font-synthesis: weight;
  margin: 0;
}

#catlist{
  padding: 0;
}
#catlist .flex li{
  width: calc(20% - 5px);
  background: #000000;
  color: #fff;
}


.radius{
  display: flex;
  margin-bottom: 10px;
}
#selectarea_outer .radius li{
  border-radius:0;
}
#selectarea_outer .radius li:first-of-type{
  border-radius: 12px 0 0 12px;
}
#selectarea_outer .radius li:last-of-type{
  border-radius: 0 12px 12px 0;
}
#selectarea_outer .radius li.last{
  border-radius: 0 12px 12px 0;
}

.notice{
  font-size: 11px;
  margin: 10px 0;
}
#shaftlist li{
  font-size: 16px;
  word-break: break-all;
}
#shaftlist li u{
  font-size: 11px;
}


#option_w2 .flex li{
  width: 25%;
}
#option_w2 .flex li:nth-of-type(1),
#option_w2 .flex li:nth-of-type(10){
  width: 100%;
}



.form-dropdown{
  margin-top: 10px;
  position: relative;
}

.form-dropdown select{
    color: #1d1d1f;
    border-color: #86868b;
    background-color: hsla(0,0%,100%,.8);

    font-size: 17px;
    line-height: 1.23536;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    width: 100%;
    height: 52px;
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    padding: 1.05882rem 2.35294rem 0 0.94118rem;
    padding: 16px 15px 0px;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
}


.form-dropdown select:focus{
  outline-color: #BA996B;
}


.form-dropdown-label {
    position: absolute;
    pointer-events: none;
    transition-timing-function: ease-in;
    transition-duration: .125s;
    top: 0.58824rem;
    top: 10px;
    left: 1rem;
    left: 16px;
    font-size: 12px;
    line-height: 1.33337;
    font-weight: 400;
    letter-spacing: -.01em;
    color: #6e6e73;
}
.form-dropdown-chevron {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: .006em;
    font-family: SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    position: absolute;
    pointer-events: none;
    right: 0.94118rem;
    top: 0.70588rem;
}
.form-dropdown-chevron:before {
    font-family: SF Pro Icons;
    color: inherit;
    display: inline-block;
    font-style: normal;
    font-weight: inherit;
    font-size: inherit;
    line-height: 1;
    text-decoration: underline;
    position: relative;
    z-index: 1;
    alt: "";
    text-decoration: none;
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    color: #6e6e73;
}

.form-textbox{
  margin-top: 10px;
  position: relative;
}
.form-textbox input:focus{
  outline-color: #BA996B;
}

.form-textbox input[type="text"] {
    font-size: 17px;
    line-height: 1.23536;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    width: 100%;
    height: 52px;
    border-radius: 12px;
    box-sizing: border-box;
    margin: 0;
    padding: 1.05882rem 0.94118rem 0;
    padding: 16px 15px 0px;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid;

    
    color: #1d1d1f;
    border-color: #86868b;
    background-color: hsla(0,0%,100%,.8);
    text-overflow: ellipsis;
}

.form-textbox-label {
    position: absolute;
    pointer-events: none;
    transition-timing-function: ease-in;
    transition-duration: .125s;
    top: 1.05882rem;
    top: 17px;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 32px);
    left: 1rem;
    left: 16px;
    font-size: 17px;
    line-height: 1.23536;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #6e6e73;
}

/*.form-textbox input:not([placeholder=" "])~.form-textbox-label,
.form-textbox input:valid[required]~.form-textbox-label,*/

.form-textbox input:not(:placeholder-shown)~.form-textbox-label,
.form-textbox input:focus-within~.form-textbox-label,
.form-textbox input:focus~.form-textbox-label {
    font-size: 12px;
    line-height: 1.33337;
    font-weight: 400;
    letter-spacing: -.01em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    top: 0.58824rem;
}

.form-textbox-reseticon {
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    
    font-size: 32px;
    line-height: 1.09375;
    font-weight: 400;
    letter-spacing: .011em;
    font-family: SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    top: 1.17647rem;
    right: 1rem;
    top: 18px;
    right: 16px;

    display: none;

    background-size: 15px;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2019%2019%22%20fill%3D%22rgb%28134%2C134%2C139%29%22%20style%3D%22%22%3E%20%3Ctitle%3Exmark.circle.fill_reduced%401x%3C%2Ftitle%3E%20%3Cg%20transform%3D%22translate%28-0.5%2C%20-3%29%22%3E%20%3Cpath%20d%3D%22M10%2C3a9.5%2C9.5%2C0%2C1%2C0%2C9.5%2C9.5A9.5%2C9.5%2C0%2C0%2C0%2C10%2C3Zm3.889%2C12.611a.55.55%2C0%2C1%2C1-.777.777L10%2C13.277%2C6.889%2C16.389a.55.55%2C0%2C0%2C1-.777-.777L9.223%2C12.5%2C6.111%2C9.389a.55.55%2C0%2C0%2C1%2C.777-.777L10%2C11.723l3.111-3.111a.55.55%2C0%2C0%2C1%2C.777.777L10.777%2C12.5Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E);
}

    

.form-textbox input:not(:placeholder-shown)~.form-textbox-reseticon{
    display: block;
}

/*共通ヘッダーcssとの補正*/
.slick-slide img {
    max-height: initial!important;
}
.member-list-cart .badge {
    display: none;
}
/*パンくず*/
.breadcrumb {
    text-align: right;
    background: none;
    font-family: sans-serif;
    font-size: 0.750em;
    margin-bottom: 0;
    display: flex;
    justify-content: end;
    margin: 10px 0;
}
.breadcrumb li {
  font-family: "Oswald"!important;
  font-size: 14px!important;
}
.breadcrumb li a {
    color: #000!important;
}
.breadcrumb>.active {
    color: #777;
}
.breadcrumb > li + li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}


#infomation{
    border-top: solid 1px #eee;
    margin-top: 30px;
    padding-top: 30px;
}


/*table もし旧table表を使う場合---------------------------------------------*/
.-scroll {
    overflow: auto;
    white-space: nowrap;
}
.-tac {
    text-align: center !important;
}
.free-box_table {
    border: 1px solid #BA996B;
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.free-box_table th,
.free-box_table td{
    padding: 5px!important;
}
.free-box_table th.-bgB-colWR,
.free-box_table td.-bgB-colWR {
    color: #fff;
    background: #BA996B;
    border-bottom: 1px solid #f6f6f7;
    border-right: 1px solid #f6f6f7;
    font-weight: normal;
    white-space: break-spaces;/*折り返し　無しでも可*/
}
.free-box_table th.-bgB-colW,
.free-box_table td.-bgB-colW {
    color: #fff;
    background: #BA996B;
    border-bottom: 1px solid #f6f6f7;
    font-weight: normal;
}
.free-box_table th.-bgB-colWR-last {
    border-bottom: 1px solid #333;
}
.free-box_table td {
    border-right: 1px solid #BA996B;
    border-bottom: 1px solid #BA996B;
}
#order .sub  {
    text-align: left;
    font-size: 86%;
    border: 1px dashed #152233;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    margin: 10px 0;
}
#order .sub span {
    margin-right: 10px;
}
/*---------------------------------------------------*/


#main img{
    width: 100%;
}

#main img.pc{
    border-bottom: solid 1px;
    margin-bottom: 3%;
}

.sp{
    display: none;
}

@media (max-width: 769px){

#header{
    position: fixed!important;
    width: 100%;
    z-index: 9999!important;
}
#customorder{
    padding-top: 116px !important;
}


.pc{
    display: none;
}
.sp{
    display: block;
}
#topback {
    display: none;
}

#selectarea_outer{
  flex-direction: column;
}
#selectarea_outer>div{
  width: 100%;
}
#area_a{
    padding: 0;
    position: relative;
    max-width: 100%;
}

.size_keep{
    zoom: .7;
}


}

.caution{
    font-size: 11px;
    margin: 10px 0;
    font-weight: bold;
    padding: 3%;
    border-radius: 5px;
    border: dashed 1px;
    color: #a30000;
}