@charset "utf-8";
/* CSS Document */
/**** common ****/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400:700&display=swap&subset=japanese');
@import url("https://use.fontawesome.com/releases/v5.6.4/css/all.css");
* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  top: 0px;
  left: 0px;
  font-family: 'Noto Sans JP', 'Noto Serif JP';
  font-feature-settings: "pwid"1;
  font-size: 14px;
  line-height: 1.5rem;
  color: #232323;
  /*transform: rotate(.03deg);*/
  text-align: justify;
  height: 100%;
}
h1, h2, h3, h4, h5 {
  color: #4C4C4C;
  font-weight: 400;
  letter-spacing: .1em;
}
h1 {
  line-height: 1.4em;
}
h2 {
  font-size: 1.8rem;
  margin-bottom: 2em;
}
section {
  z-index: 10;
}
.container {
  max-width: 1280px;
  width: 94%;
  margin: 0 auto;
  background: #fff;
}

#catch {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  /*padding: 2px 0 0;*/
  margin: 0 auto;
  top: 0px;
  left: 0px;
}
#catch .c_wrap, #catch .c_wrap2 {
  display: block;
  margin: 0 auto;
  z-index: 0;
}
#catch .c_wrap {
  max-width: 1280px;
}
#catch .c_wrap::before {
  display: none;
  background: none;
}
#catch .c_wrap2 {
  max-width: 960px;
}
/*#catch h1 {
	font-size: 36px;
	font-weight: 400;
	letter-spacing: .1rem;
	box-sizing: border-box;
	margin-bottom: 1.5rem;
}*/
.sec_copy {
  background: #F4F3ED;
  /*display: flex;
	justify-content: center;
	flex-wrap: wrap;*/
}
.sec_copy h2 {
  font-size: 1.4rem;
  color: #5F4D3C;
  text-align: left;
  letter-spacing: .1rem;
  line-height: 2.5rem;
}
.sec_copy .content_wrapper {
  padding: 0;
  width: 100%;
  height: calc(100vw * 0.5);
  position: relative;
  margin: 0 auto;
}
.sec_copy .content_wrapper::before {
  content: '';
  display: block;
  width: 100%;
  height: calc(100vw * 0.5);
  z-index: 0;
}
.sec_catch_c {
  display: block;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 380px;
  z-index: 5;
}
.obj_center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.shop {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
  width: 100%;
}
.shop li {
  padding: 0;
  margin: 25px auto;
}
.shop li p {
  text-align-last: justify;
  text-justify: inter-ideograph;
  margin: 0;
  transform: translateY(-1px);
}
.raku, .ama, .ec {
  color: #fff;
}
.yah {
  color: #343434;
}
.raku, .ama, .yah, .ec {
  width: 240px;
  padding: 5px 5%;
}
.shop li.ec p {
  width: 35%;
  flex: 0 0 35%;
}
.shop li.raku p, .shop li.ama p, .shop li.yah p {
  width: 62%;
  flex: 0 0 62%;
}
.shop li.ama p {
  letter-spacing: .1rem;
}
.shop li.yah p {
  letter-spacing: .2rem;
}
.raku a, .ama a, .yah a, .ec a {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  position: relative;
  padding: 5px 5%;
  border-radius: 25px;
  line-height: 1em;
  justify-content: space-between;
  align-items: center;
  text-align: justify;
  font-size: 1.5rem;
  text-decoration: none;
  transition: .2s;
  color: inherit;
  mix-blend-mode: normal;
}
.raku a {
  background: #bf0000;
}
.ama a {
  background: #2e2624;
}
.yah a {
  background: #f5f5f5;
}
.ec a {
  background: #00a0b8;
}
.ec a div, .ama a div, .raku a div, .yah a div {
  flex: 0 0 12%;
  heigt: 1.5rem;
  margin: 0 .2rem 0 .5rem;
}
/* .ec a div {
  flex: 0 0 35%;
  heigt: 1.5rem;
  margin: 0 .2rem 0 .5rem;
} */
.btn_icon_ra {
  transform: translateY(1px);
  width: 10%;
  flex: 0 0 10%; /*  position: absolute;
    top: 23%;
    right: 7%;*/
}
.raku img, .ama img, .yah img, .ec img {
  display: block;
  border: none;
  height: 1.5rem;
  width: auto;
}
.raku a:hover, .ama a:hover, .yah a:hover, .ec a:hover {
  mix-blend-mode: luminosity;
  background: rgb(46 38 148 / 40%);
  transition: .5s;
}
.cc {
  background: #FFF;
}
ul.colorchart {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-start;
}
ul.colorchart li {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 3% 2em .2em;
  flex: 0 0 30%;
  width: 30%; /*border-bottom: 1px solid #666;*/

}
ul.colorchart li:nth-child(3n) {
  margin-right: 0;
}
.cc_list_empty {
  margin-right: 0;
  /* flex: 1 1 30%;
  width: 30%;
  height: 0; */
}
div.ccwrap {
  /*float: left;*/
  
  flex: 0 0 24%;
  padding: .2em;
  width: 24%;
  /*max-width: 50px;*/
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
}
ul.colorchart li dl {
  flex: 0 0 76%;
  width: 76%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  font-size: .95em;
  line-height: 1.5em;
  text-align: left;
}

ul.colorchart li dl dd, ul.colorchart li dl dt {
  /*float: left;*/
  flex: 1 0 100%;
  align-self: flex-start;
  padding: .2em 0 0 .5rem;
  margin: 0;
  line-height: 1.25em;
}
ul.colorchart li dl dt.pro_no {  
  width: 100%;
  font-weight: 700;
  color: #138DDB;
  border-bottom: 1px dotted #888;
  pointer-events: none;  
}
ul.cc2 {
  list-style: none;
  padding: 1.2rem 0 .8rem;
  margin: 0 0 2rem;
  width: 100%;
  border-top: dotted 2px #888888;
  border-bottom: solid 2px #888888;
}
ul.cc2 li {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 0 auto 1rem !important;
}
ul.cc2 li dl {
  display: flex;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: .9em;
  line-height: 1.5em;
  text-align: left;
}
ul.cc2 li dl::after {
  content: '';
  display: block;
  clear: both;
}
ul.cc2 li dl dt {
  flex: 0 0 24%;
  /*float: left;*/
  padding: .2em;
  width: 24%;
  max-width: 50px;
  height: 3.2em;
}
ul.cc2 li dl dd {
  /*float: left;*/
  flex: 0 0 76%;
  padding: .2em 0 0 .3em;
  margin: 0;
  width: 76%;
}
.ccc {  
  display: block;
  width: 48px;
  height: 48px;
  border-radius:50%;
  /*transform: translateY(25%);
  -ms-transform: translateY(25%);*/
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .6));
  -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .6));
  -moz-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .6));
}
/*IE11対策用 ドロップシャドウ*/
@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, .ccc {
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
  }
}
.pro_j_name {
  font-size: 1.1em;
}
.pro_e_name {
  font-size: .8em;
  text-indent: .1em;
}
.new {
  display: inline-block;
  background: #E50D11;
  padding: .05rem .5rem;
  color: #FFF;
  line-height: 1rem;
  border-radius: 1.2em;
  margin: 0 0 2px 1em;
}
.new::before {
  content: "New";
  font-size: .9em;
  display: inline-block;
  transform: translate(0, -1px);
}
/**** index用 ****/
.index {
  background-color: #F4F3ED;
}
.index #catch h1 {
  color: #4C4C4C;
}
.index .history {
  background-color: #DCD4C6;
}
.index .history h2 {
  font-size: 1.6rem;
  color: #5F4D3C;
  text-align: left;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  letter-spacing: .2rem;
}
.index .history p {
  color: #5F4D3C;
  text-align: left;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  text-align: inherit;
  font-feature-settings: "palt"1;
}
.index .character {
  background: #FFFCD8;
}
.index .character h2 {
  /*font-size: 1.6rem;*/
  color: #5F4D3C;
  text-align: center;
  letter-spacing: .2rem;
}
.index .character ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
}
.index .chara_li {
  border-radius: 20px;
  opacity: 1;
  padding: 25px 20px;
  min-width: 354px;
  min-height: 165px;
  flex: 0 0 42%;
  max-width: 42%;
  margin: 0 5px 20px 0;
}
.chara_li:nth-child(2n) {
  margin-right: 0;
}
.index .chara_li dl {
  width: 100%;
  height: 100%;
  color: #fff;
  display: table;
  vertical-align: middle;
}
.index .chara_li dl dt {
  width: 23%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 4rem;
  padding-right: 1rem;
  border-right: 2px #fff solid;
}
.index .chara_li dl dt img {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.index .chara_li dl dd {
  display: table-cell;
  vertical-align: middle;
  padding: 0 1.4em 0 1.6rem;
}
.no-p {
  padding: 0;
}
.index .chara_li dl h3 {
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .1rem;
  margin-bottom: 10px;
}
.bg_gray {
  background: #232323;
}

.index .character .bg_green {
  background: #82B676;
}
.index .character .bg_purple {
  background: #9576B0;
}
.index .character .bg_orange {
  background: #EC9201;
}
.index .character .bg_yellow {
  background: #DCB100;
}
.index .character .bg_eme {
  background: #35A59C;
}
.index .character .bg_blue {
  background: #297AD6;
}

.lineup {
  background: #fff;
}
.lineup .ttl {
  border-bottom: 4px dotted #444;
  padding-bottom: .6rem;
  margin-bottom: .5rem;
  font-weight: 700;
}
.lineup .sub_c {
  font-size: .85rem;
  line-height: 1.2rem;
  margin-bottom: 1.4rem;
}
.index ul.ln_li, ul.product_li {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.index ul.ln_li > li, .index ul.ln_li > li.empty {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex: 0 0 30%;
  width: 30%;
  max-width: 300px;
  margin: 0 1vw 2rem;
}
.index ul.ln_li > li.empty, ul.product_li > li.empty {
  height: 0;
}
.index ul.ln_li > li > dl {
  width: 100%;
  border: 2px solid #F4F3ED;
  background: #F4F3ED;
  color: #232323;
  /*display: flexbox;*/
}
.index ul.ln_li > li > dl > dt {
  /*display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;*/
  background: #fff;
  width: 100%;
  height: 234px;
  overflow: hidden;
}
.index ul.ln_li > li > dl > dt > a {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 1rem;
  width: 100%;
  height: 100%;
}
.index ul.ln_li > li > dl > dt > a.scaled:hover {
  transform: scale(1.15, 1.15);
  transition: 0.2s;
}
.index ul.ln_li > li > dl > dt > a > img {
  display: block;
  position: relative;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  transition: 0.2s;
  object-fit: contain;
  top: 50%;
  transform: translateY(-50%);
}
.index ul.ln_li > li > dl > dd {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  vertical-align: top;
  padding: .2rem 1.2rem 1.2rem;
}
.index ul.ln_li > li > dl > dd:nth-child(3) {
  padding-bottom: auto;
}
.index ul.ln_li > li > dl > dd > h3 {
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.8rem;
  letter-spacing: .05rem;
  margin: .8rem auto 0;
}
.index ul.ln_li > li > dl dt img {
  display: block;
  margin: 0 auto;
  max-height: 200px;
  width: auto;
  max-width: 100%;
  transition: 0.2s;
  object-fit: contain;
}
.features ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.features ul > li {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.souffle .features ul > li {
  flex: 0 0 22%;
  max-width: 22%;
  margin: 0 .8rem 2rem;
}
.souffle .features ul > li:first-child {
  margin-left: 0;
}
.souffle .features ul > li:last-child {
  margin-right: 0;
}
.features ul li dl {
  width: 100%;
  color: #232323;
  display: flexbox;
}
.features ul li dl dt {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  padding: 1rem .5rem;
  width: 100%;
  overflow: hidden;
}
.features ul li dl dd {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  vertical-align: top;
  padding: .2rem .5rem 1.2rem;
}
.features ul li dl dt img {
  display: block;
  margin: 0 auto;
  width: 100%;
  object-fit: contain;
}
.tabs {
  width: 100%;
  margin: auto;
}
.tab_head {
  background: #fff;
  display: block;
  float: left;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: .2rem;
  padding: 0rem .5rem;
  width: calc(100% / 4);
  height: 2.2rem;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
}
.tab_head:before {
  content: "";
  width: calc(100% - 40px);
  height: 0;
  position: absolute;
  bottom: 100%;
  left: 0;
  border-bottom: solid 20px #FFFFFF;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
}
.tab_head:hover {
  opacity: .5;
}
input[name="tab_head"] {
  display: none;
}
.tab_content {
  display: none;
  width: 100%;
  background: #fff;
  padding: 1.6rem 2.5rem 5rem;
  clear: both;
  overflow: hidden;
}
.tab_content img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.tab_content h3 {
  font-size: 1.3rem;
  margin: 2rem auto;
}
.tab_content h3::after {
  content: '';
  margin: 1rem auto 0;
  display: block;
  width: 50%;
  border-bottom: 4px dotted #6aa1cf;
}
#transcription:checked ~ #transcription_content, #formation:checked ~ #formation_content, #adhesion:checked ~ #adhesion_content, #etc:checked ~ #etc_content {
  display: block;
}
.tabs input:checked + .tab_head {
  background: #6AA1CF;
  color: #fff;
}
.tabs input:checked + .tab_head::before {
  border-bottom: solid 20px #6AA1CF;
}
/**** americana ****/
.americana {
  background: #4c4949;

}.americana #catch {
  background: #f3f3f5;
}
.americana #catch h1, .americana .c_sans {
  color: #232323;
}
/****************************************/
/************** common etc **************/
/****************************************/
.object-fit-img {
  object-fit: contain;
  font-family: 'object-fit: contain;';
}
.c_serif {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
}
.c_sans {
  font-family: 'Noto Sans JP';
  font-weight: 400;
}
.c_serif, .c_sans {
  color: #4C4C4C;
  font-size: 1.25em;
  letter-spacing: .1em;
  font-feature-settings: "palt"1;
}
.icon {
  width: 155px;
  height: 59px;
}
.icon2 {
  width: 100%;
  max-width: 327px;
  max-height: 59px;
}
.icon, .icon2 {
  display: block;
  position: relative;
  margin: 0;
  z-index: 9;
}
.icon img, .icon2 img {
  width: 100%;
  height: 100%;
}
.author_name {
  font-size: .8rem;
  z-index: 12;
}
ul.product_li > li, ul.product_li > li.empty {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex: 0 0 30%;
  width: 30%;
  max-width: 300px;
  margin: 0 1vw 2rem 0;
}
ul.product_li > li:nth-child(3n) {
  margin-right: 0;
}
ul.product_li > li > dl {
  width: 100%;
  background: #fff;
  color: #232323;
  display: flexbox;
}
ul.product_li > li > dl > dt {
  display: flex;
  position: relative;
  align-items: center;
  padding: 0;
  background: #F3F3F3;
  width: 100%;
  overflow: hidden;
  height: 220px;
}
ul.product_li li dl dt a {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 1rem;
  width: 100%;
  height: 100%;
}
ul.product_li li dl dt a.scaled:hover {
  transform: scale(1.15, 1.15);
  transition: 0.2s;
}
ul.product_li li dl dt a.scaled img {
  display: block;
  position: relative;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  max-height: 190px;
  transition: 0.2s;
  object-fit: contain;
  top: 50%;
  transform: translateY(-50%);
}
ul.product_li > li > dl > dd {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  vertical-align: top;
  padding: .8rem 0 .5rem;
}
ul.product_li li dl dd p {
  margin: 0 0 .65rem;
  line-height: 1.4rem;
}
ul.product_li li dl dt.square_frame {
  max-height: 290px;
  height: 220px;
}
ul.product_li li dl dt.square_frame img {
  object-fit: cover;
  height: 95%;
  margin: auto;
}
.ss_hardness {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: flex-end;
  margin: 0 auto 1rem;
}
.ss_hardness_txt {
  text-align: right;
  flex: 0 0 25%;
  font-weight: 700;
}
.ss_hardness_img {
  flex: 0 0 75%;
}
.ss_hardness_img img {
  display: block;
  width: 100%;
  max-width: 137px;
  max-height: 30px;
  object-fit: contain;
}
.ss_oven_img {
  width: 100%;
}
.ss_oven_img img {
  max-width: 160px;
}
.ss_oven_img img, img.ss_ldl {
  display: block;
  width: 100%;
}
.left_price {}
.left_price::after {
  content: '';
  border-right: solid 2px #828282;
  margin-right: 1rem;
  padding-right: 1rem;
}
ul.sns {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
ul.sns li {
  margin: 0 1.2rem 1rem 0;
}
ul.sns li:nth-last-child() {
  margin-right: 0;
}
ol.list_disc {
  padding-left: 1.4em;
  display: block !important;
  list-style: disc;
  width: 100% !important;
  box-sizing: border-box;
}
ol.list_disc > li {
  width: 100% !important;
  max-width: 100% !important;
  flex: none;
  line-height: 1.4rem;
  margin-bottom: .8rem;
}
.product_1colum {}
img.scaled:hover {
  transform: scale(1.1, 1.1);
}
.under_right {
  /*width: 10em;*/
  display: block;
  position: absolute;
  bottom: 8%;
  right: 8%;
}
.fixed_bg {
  /*background-attachment: fixed !important;*/
  position: fixed;
}
.disp-flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
}
.jc-sa {
  justify-content: space-around;
}
.jc-sb {
  justify-content: space-between;
}
.flex-2col-1 {
  flex: 0 0 45%;
  max-width: 45%;
}
.flex-2col-2 {
  flex: 0 0 100%;
  max-width: 100%;
}
.pc_none {
  display: none;
}
.tb_none {
  display: block;
}
.sp_none {
  display: block;
}
.pc_tb_none {
  display: none;
}
.no_blue {
  color: #138DDB;
  pointer-events: none;
}
.no_blue::before {
  content: '品番：';
  color: #4C4C4C;
  font-weight: 700;
}
.txt-center {
  text-align: center;
}
.txt70 {
  font-size: .7em;
}
.txt80 {
  font-size: .8em;
}
.txt90 {
  font-size: .9em;
}
.txt95 {
  font-size: .95em;
}
.txt100 {
  font-size: 1em;
}
.txt105 {
  font-size: 1.05em;
}
.txt110 {
  font-size: 1.1em;
}
.txt120 {
  font-size: 1.2em;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt40 {
  margin-top: 40px;
}
.mt50 {
  margin-top: 50px;
}
.mb0 {
  margin-bottom: 0;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb50 {
  margin-bottom: 50px;
}
.mb60 {
  margin-bottom: 60px;
}
.mb70 {
  margin-bottom: 70px;
}
.mb80 {
  margin-bottom: 80px;
}
.mb2e {
  margin-bottom: 2em;
}
.mb2r {
  margin-bottom: 2rem;
}
.pt1r {
  padding-top: 1rem;
}
.pt2r {
  padding-top: 2rem;
}
.pl1r {
  padding-left: 1rem;
}
.pr1r {
  padding-right: 1rem;
}
.pb1r {
  padding-bottom: 1rem;
}
.pb2r {
  padding-bottom: 2rem;
}
/**
** move **
**/
.effect-fade-up {
  transform: translate(0, 60px);
}
.effect-fade-down {
  transform: translate(0, -60px);
}
.effect-fade-up, .effect-fade-down, .effect-fade-in {
  opacity: 0;
  transition: all 500ms;
}
.effect-open-fade-up-1, .effect-open-fade-up-2, .effect-open-fade-up-3, .effect-open-fade-up-4, .effect-open-fade-up-5, .effect-open-fade-up-6, .effect-open-fade-up-7, .effect-open-fade-up-8, .effect-open-fade-up-9, .effect-open-fade-up-10, .effect-open-fade-up {
  transform: translate(0, 50px);
  opacity: 0;
  transition: all 500ms;
}
.effect-open-fade-up-1 {
  transition-delay: 100ms;
}
.effect-open-fade-up-2 {
  transition-delay: 200ms;
}
.effect-open-fade-up-3 {
  transition-delay: 300ms;
}
.effect-open-fade-up-4 {
  transition-delay: 400ms;
}
.effect-open-fade-up-5 {
  transition-delay: 500ms;
}
.effect-open-fade-up-6 {
  transition-delay: 600ms;
}
.effect-open-fade-up-7 {
  transition-delay: 700ms;
}
.effect-open-fade-up-8 {
  transition-delay: 800ms;
}
.effect-open-fade-up-9 {
  transition-delay: 900ms;
}
.effect-open-fade-up-10 {
  transition-delay: 1000ms;
}
.effect-fade-up.effect-scroll, .effect-fade-down.effect-scroll, .effect-fade-in.effect-scroll, .effect-open-fade-up-1.effect-scroll, .effect-open-fade-up-2.effect-scroll, .effect-open-fade-up-3.effect-scroll, .effect-open-fade-up-4.effect-scroll, .effect-open-fade-up-5.effect-scroll, .effect-open-fade-up-6.effect-scroll, .effect-open-fade-up-7.effect-scroll, .effect-open-fade-up-8.effect-scroll, .effect-open-fade-up-9.effect-scroll, .effect-open-fade-up-10.effect-scroll, .effect-open-fade-up.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}
.end_fixed {
}
/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -320px;
  bottom: 0;
  width: 320px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 53;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 1;
}
nav > .inner {
  padding: 25px;
}
nav > .inner > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav > .inner > ul > li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
  text-indent: 0.85rem;
  font-size: 0.85rem;
}
nav > .inner > ul > li:first-child {
  font-size: 1rem;
  text-indent: 0;
  font-weight: 700;
}
nav > .inner > ul > li:last-child {
  font-size: 0.85rem;
  text-indent: 0;
  font-weight: 700;
  text-align: right;
  bottom: 10%;
}
nav > .inner > ul > li:last-child a::before {
  content: ' \f015';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  bottom: 10%;
  paddng-left: 1em;
}
nav > .inner ul > li a {
  display: block;
  color: #333;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav > .inner ul > li a:hover {
  background: #e4e4e4;
}
nav > .inner > ul > li > ul {
  padding-left: 1.5rem;
}
nav > .inner > ul > li > ul > li {
  position: relative;
  margin: 0;
  border-bottom: 1px dotted #333;
  text-indent: .6rem;
  font-size: 0.85rem;
}
nav > .inner > ul > li > ul > li::after {
  content: '';
  display: block;
  clear: both;
}
nav > .inner > ul > li > ul > li:first-child {
  font-weight: 700;
  text-indent: 0;
}
nav > .inner > ul > li > ul > li:last-child {
  border-bottom: none;
}
nav > .inner > ul > li > ul > li > a::after {
  display: inline-block;
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  text-align: right;
  float: right;
}

.menu-ttl {
  padding: .7em .5em;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 0;
}
.menu-ttl::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  margin-left: 20px;
  font-weight: 900;
}
.menu-ttl.openAcd {
  color: #fff;
  background: #333;
}
.menu-ttl.openAcd::after {
  content: "\f077";
  font-family: "Font Awesome 5 Free";
  margin-left: 20px;
  font-weight: 900;
}
.now {
  background: #F4F3ED;
  padding: .8em;
}
.now::before {
  content: "\f0da";
  font-family: "Font Awesome 5 Free";
  margin-right: 1em;
  font-weight: 900;
}
.toggle_btn, .toggle_btn span {
  box-sizing: border-box;
  margin: 0 auto;
  z-index: 100;
}
.toggle_btn {
  display: none;
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(30, 30, 30, 0.75);
  top: 50px;
  right: 50px;
}
.toggle_btn a {
  display: block;
}
.tgl_in {
  opacity: 1;
}
.toggle_btn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 23%;
  width: 54%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}
.toggle_btn span:nth-of-type(1) {
  top: 25%;
}
.toggle_btn span:nth-of-type(2) {
  top: calc(50% - 2px);
}
.toggle_btn span:nth-of-type(3) {
  bottom: 25%;
}
.toggle_btn.active {
  background: rgba(244, 243, 237, 1.00);
}
.toggle_btn.active span:nth-of-type(1) {
  -webkit-transform: translateY(13px) rotate(-45deg);
  transform: translateY(13px) rotate(-45deg);
  background: #1e1e1e;
}
.toggle_btn.active span:nth-of-type(2) {
  opacity: 0;
}
.toggle_btn.active span:nth-of-type(3) {
  -webkit-transform: translateY(-13px) rotate(45deg);
  transform: translateY(-13px) rotate(45deg);
  background: #1e1e1e;
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 52;
  cursor: pointer;
}
/*=============================*/
/*  PC用  */
/*=============================*/
@media screen and (min-width:960px) {
  .index .catch_c {
    display: block;
    position: relative;
    margin: 0;
    width: 55%;
    z-index: 10;
    top: 120px;
    left: 10%;
  }
  .sec_page_catch_c {
    display: block;
    position: absolute;
    margin: 0;
    width: 55%;
    top: 15%;
    left: 120px;
    z-index: 10;
  }
  .sec_page_catch_c h1 {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: .1rem;
    margin-bottom: .5rem;
  }
  .content_wrapper {
    position: relative;
    width: 100%;
    max-width: 1280px;
    padding: 100px;
    margin: 0 auto;
  }
  .sec_copy .under_right {
    right: 2rem;
    bottom: 1rem;
  }
  /**** 購入画面 ****/
  #catch .c_wrap3 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    z-index: 1;
    flex: 1 1 70%;
    max-width: 70%;
  }
  #catch .c_wrap3 .catch_img {
    padding: 160px 0 120px 80px;
    flex: 1 1 50%;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-content: center;
  }
  #catch .c_wrap3 .catch_img img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    font-family: 'object-fit: contain;';
  }
  #catch .c_wrap3 h1 {
    font-size: 1.4rem;
    letter-spacing: 0;
    margin-bottom: 2.5rem;
  }
  #catch .c_wrap3 .thd_page_catch_c {
    position: relative;
    padding: 170px 3rem 120px 2rem;
    margin: 0;
    flex: 1 1 50%;
    max-width: 50%;
    z-index: 10;
  }
  #catch .c_wrap3 .thd_page_catch_c .c_sans {
    margin-bottom: 15px;
  }
  .purchase_aria {
    background: #D4F1DD;
    flex: 1 1 30%;
    max-width: 30%;
  }
  .purchase_aria .purchase_head {
    height: auto;
    background: #28B971;
    position: relative;
  }
  .purchase_aria .purchase_head::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 30px;
    border-color: #28b970 transparent transparent transparent;
  }
  .purchase_aria .purchase_head p {
    font-size: 1.1rem;
    letter-spacing: .1rem;
    margin: 0;
    color: #fff;
    text-align: center;
  }
  .purchase_aria .purchase_head p img {
    width: 90%;
  }
}
/*=============================*/
/*  タブレット用  */
/*=============================*/
@media screen and (max-width:959px) {
  body {
    font-size: 15px;
    line-height: 1.8rem;
  }
  .index .catch_c {
    position: relative;
    top: 16%;
    left: 10%;
  }
  .index #catch h1 {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: .1rem;
    margin-bottom: 1.5rem;
  }
  .features ul > li {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex: 0 0 46%;
    max-width: 46%;
    margin: 0 .8rem 2rem;
  }
  .sec_page_catch_c {
    display: block;
    position: absolute;
    margin: 0;
    top: 62%;
    left: 12%;
    z-index: 10;
  }
  .sec_page_catch_c h1 {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: .1rem;
    margin-bottom: .5rem;
  }
  #catch .c_wrap, #catch .c_wrap2 {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    min-height: 610px;
    max-height: 880px;
    margin: 0 auto;
  }
  #catch .c_wrap::before, #catch .c_wrap2::before {
    content: '';
    display: block;
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100vh;
    min-height: 610px;
    max-height: 880px;
    top: 0;
    left: 0;
  }
  .c_wrap.none {}
  .c_wrap.none::before {
    content: '';
    opacity: 0;
    z-index: -2;
  }
  .sec_copy .under_right {
    right: 2rem;
    bottom: 0rem;
  }
  /**** 購入画面 ****/
  #catch .c_wrap3 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    z-index: 1;
    flex: 1 1 70%;
    max-width: 70%;
  }
  #catch .c_wrap3 .catch_img {
    padding: 180px 0 120px 2.5rem;
    flex: 1 1 50%;
    max-width: 50%;
  }
  #catch .c_wrap3 .catch_img img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    font-family: 'object-fit: contain;';
  }
  #catch .c_wrap3 h1 {
    font-size: 1.4rem;
    letter-spacing: 0;
    margin-bottom: 2rem;
  }
  #catch .c_wrap3 .thd_page_catch_c {
    position: relative;
    padding: 170px 2rem 120px;
    margin: 0;
    flex: 1 1 50%;
    max-width: 50%;
    z-index: 10;
  }
  #catch .c_wrap3 .thd_page_catch_c .c_sans {
    margin-bottom: 12px;
  }
  .purchase_aria {
    background: #D4F1DD;
    flex: 1 1 30%;
    max-width: 30%;
  }
  .purchase_aria .purchase_head {
    height: auto;
    background: #28B971;
    position: relative;
  }
  .purchase_aria .purchase_head::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 30px;
    border-color: #28b970 transparent transparent transparent;
  }
  .purchase_aria .purchase_head p {
    font-size: 1.1rem;
    letter-spacing: .1rem;
    margin: 0;
    color: #fff;
    text-align: center;
  }
  .purchase_aria .purchase_head p img {
    width: 90%;
  }
  .sec_copy .content_wrapper {
    height: calc(100vw * 0.6);
  }
  .sec_copy .content_wrapper::before {
    height: calc(100vw * 0.6);
  }
  .sec_catch_c {
    top: 3rem;
    left: 3rem;
    width: 380px;
  }
  .raku, .ama, .yah, .ec {
    width: 90%;
    padding: 5px 4%;
  }
  .raku a, .ama a, .yah a, .ec a {
    font-size: 1.2rem;
  }
  ul.colorchart li {
    margin: 0 2% 1.6em 0;
    flex: 1 1 30%;
    max-width: 30%;
  }

  ul.colorchart::after {
    content: '';
    margin-right: 0;
    flex: 1 1 30%;
    max-width: 30%;
    height: 0;
  }
  ul.colorchart li dl {
    font-size: .9rem;
  }
  ul.colorchart li dl dt {
    padding: .2em;
    width: 23%;
  }
  ul.colorchart li dl dd {
    padding: .3em 0 0 .3em;
    margin: 0;
    width: 77%;
  }
  .ccc {
    transform: translateY(25%);
    -ms-transform: translateY(25%);
  }
  /****************************************/
  /************** common etc **************/
  /****************************************/
  .catch_c {
    display: block;
    width: 84%;
    top: 70%;
    left: 8%;
    z-index: 10;
  }
  .c_serif {
    width: 100%;
    font-size: 1.1rem;
    letter-spacing: .1em;
    font-feature-settings: "palt"1;
  }
  .under_right {
    display: block;
    position: absolute;
    bottom: 10%;
    right: 8%;
  }
  .content_wrapper {
    max-width: 100%;
    padding: 5rem 2.5rem;
  }
  .pc_none {
    display: block;
  }
  .tb_none {
    display: none;
  }
  .sp_none {
    display: block;
  }
  .pc_tb_none {
    display: none;
  }
}
/*=============================*/
/*  スマホ用  */
/*=============================*/
@media screen and (max-width:789px) {
  .index ul.ln_li, ul.product_li {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
  }
  .index ul.ln_li > li, .index ul.ln_li > li.empty, ul.product_li > li, ul.product_li > li.empty {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex: 0 0 45%;
    width: 45%;
    max-width: 350px;
  }
  .index ul.ln_li > li, .index ul.ln_li > li.empty {
    margin: 0 1vw 2rem;
  }
  ul.product_li > li, ul.product_li > li.empty {
    margin: 0 1vw 2rem 0;
  }
  ul.product_li > li:nth-child(3n) {
    margin-right: 1vw;
  }
  ul.product_li > li:nth-child(2n) {
    margin-right: 0;
  }
  .index ul.ln_li > li.empty, ul.product_li > li.empty {
    height: 0;
  }
  .souffle .features ul > li {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex: 0 0 45%;
    max-width: 45%;
    margin: 0 0 2rem 0;
  }
  .sec_copy .content_wrapper {
    height: calc(100vw * 0.8);
  }
  .sec_copy .content_wrapper::before {
    height: calc(100vw * 0.8);
    background-size: 80%;
  }
  .sec_catch_c {
    top: 3rem;
    left: 3rem;
    width: 380px;
  }
  #catch .c_wrap3 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    z-index: 1;
    flex: 1 1 100%;
    max-width: 100%;
  }
  #catch .c_wrap3 .catch_img {
    padding: 180px 0 120px 2.5rem;
    flex: 1 1 50%;
    max-width: 50%;
  }
  #catch .c_wrap3 .catch_img img {
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    font-family: 'object-fit: contain;';
  }
  #catch .c_wrap3 h1 {
    font-size: 1.4rem;
    letter-spacing: 0;
  }
  #catch .c_wrap3 .thd_page_catch_c {
    position: relative;
    padding: 170px 2rem 120px;
    margin: 0;
    flex: 1 1 50%;
    max-width: 50%;
    z-index: 10;
  }
  #catch .c_wrap3 .thd_page_catch_c .c_sans {
    margin-bottom: .8rem;
  }
  .purchase_aria {
    background: #D4F1DD;
    flex: 1 1 100%;
    max-width: 100%;
  }
  .purchase_aria .purchase_head {
    height: auto;
    background: #28B971;
    position: relative;
  }
  .purchase_aria .purchase_head::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 30px;
    border-color: #28b970 transparent transparent transparent;
  }
  .purchase_aria .purchase_head p {
    font-size: 1.1rem;
    letter-spacing: .1rem;
    margin: 0;
    color: #fff;
    text-align: center;
  }
  .purchase_aria .purchase_head p img {
    width: 55%;
  }
  .raku, .ama, .yah, .ec {
    width: 70%;
    max-width: 320px;
    padding: 5px 4%;
  }
  .raku a, .ama a, .yah a, .ec a {
    font-size: 1.6rem;
  }
  .raku img, .ama img, .yah img, .ec img {
    height: 2rem;
  }
  .shop li.raku p {
    letter-spacing: 1.35rem;
  }
  .shop li.ec p {
    letter-spacing: .9rem;
  }
  ul.colorchart li {
    margin: 0 4% 2em .2em;
    flex: 0 0 46%;
    max-width: 46%;
  }
  ul.colorchart li:nth-child(3n) {
    margin-right: 4%;
  }

  ul.colorchart li:nth-child(2n) {
    margin-right: 0;
  }



  ul.colorchart::after {
    content: '';
    margin-right: 0;
    flex: 0 0 45%;
    max-width: 45%;
    height: 0;
  }
  ul.colorchart li dl {
    font-size: .9rem;
  }
  ul.colorchart li dl dt {
    padding: .2em;
    width: 23%;
  }
  ul.colorchart li dl dd {
    padding: 0 0 0 .3em;
    margin: 0 0 0 .3em;
    width: 75%;
  }
}
.ccc {
  transform: translateY(18%);
  -ms-transform: translateY(18%);
}
/*=============================*/
/*  スマホ用  */
/*=============================*/
@media screen and (max-width:559px) {
  body {
    font-size: 15px;
    line-height: 1.8rem;
  }
  h2 {
    font-size: 1.6rem;
    margin-bottom: 2em;
  }
  .index #catch h1 {
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: .1rem;
    margin-bottom: 1.5rem;
  }
  .souffle .features ul > li {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex: 0 0 98%;
    max-width: 98%;
    margin: 0 0 2rem 0;
  }
  #catch .c_wrap, #catch .c_wrap2 {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 660px;
    margin: 0 auto;
  }
  #catch .c_wrap::before, #catch .c_wrap2::before {
    content: '';
    display: block;
    position: fixed;
    z-index: -10;
    width: 100%;
    height: 100vh;
    max-height: 680px;
    top: 0;
    left: 0;
  }
  #catch .c_wrap3 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    z-index: 1;
    flex: 1 1 100%;
    max-width: 100%;
  }
  #catch .c_wrap3 .catch_img {
    padding: 20vh 2rem 5vh;
    flex: 1 1 100%;
    max-width: 100%;
  }
  #catch .c_wrap3 .catch_img img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    font-family: 'object-fit: contain;';
  }
  #catch .c_wrap3 h1 {
    font-size: 1.4rem;
    letter-spacing: 0;
    margin-bottom: 2rem;
  }
  #catch .c_wrap3 .thd_page_catch_c {
    position: relative;
    padding: 0 2rem 10vh 3rem;
    margin: 0;
    flex: 1 1 100%;
    max-width: 100%;
    z-index: 10;
  }
  #catch .c_wrap3 .thd_page_catch_c .c_sans {
    margin-bottom: .5rem;
  }
  .purchase_aria {
    background: #D4F1DD;
    flex: 1 1 100%;
    max-width: 100%;
  }
  .purchase_aria .purchase_head {
    height: auto;
    background: #28B971;
    position: relative;
  }
  .purchase_aria .purchase_head::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 30px;
    border-color: #28b970 transparent transparent transparent;
  }
  .purchase_aria .purchase_head p {
    font-size: 1.1rem;
    letter-spacing: .1rem;
    margin: 0;
    color: #fff;
    text-align: center;
  }
  .purchase_aria .purchase_head p img {
    width: 75%;
  }
  .index .character h2 {
    letter-spacing: .1rem;
  }
  .index .chara_li {
    border-radius: 20px;
    opacity: 1;
    padding: 1.2rem 1rem;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: none;
    margin: 0 1vw 20px;
  }
  .index .chara_li dl dt {
    width: 22%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 3rem;
    padding-right: 1rem;
    border-right: 2px #fff solid;
  }
  .index .chara_li dl dd {
    display: table-cell;
    vertical-align: middle;
    padding: 0 .5em 0 1.2rem;
  }
  .index ul.ln_li, ul.product_li {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .index ul.ln_li > li, ul.product_li > li {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex: 0 0 90%;
    width: 90%;
    max-width: none;
    margin: 0 0 4rem;
  }
  .index ul.ln_li > li.empty, ul.product_li > li.empty {
    display: none;
    height: 0;
    margin: 0;
  }
  .sec_copy .content_wrapper {
    height: 120vh;
    max-height: 685px;
  }
  .sec_copy .content_wrapper::before {
    height: 120vh;
    max-height: 685px;
  }
  .sec_copy .under_right {
    right: 2rem;
    bottom: -.5rem;
  }
  .sec_catch_c {
    top: 2rem;
    left: 2rem;
    width: calc(100% - 4rem);
  }
  .raku, .ama, .yah, .ec {
    width: 85%;
    padding: 5px 4%;
  }
  .shop li p {
    text-align: center;
    text-align-last: center;
  }
  .shop li.raku p {
    letter-spacing: 1.35rem;
  }
  .shop li.ec p {
    letter-spacing: .9rem;
  }
  ul.colorchart li {
    margin: 0 .5em 2em .2em;
    flex: 0 1 100%;
    max-width: 100%; 
  }
  ul.colorchart li:nth-child(4n) {
    margin-right: .5em;
  }
  ul.colorchart li:nth-child(2n) {
    margin-right: 0;
  }
  ul.colorchart::after {
    content: '';
    margin-right: 0;
    flex: 1 1 100%;
    max-width: 100%;
    height: 0;
  }
  ul.colorchart li dl {
    font-size: 1rem;
  }
  ul.colorchart li dl dt {
    padding: .2em;
    width: 23%;
  }
  ul.colorchart li dl dd {
    padding: 0 0 0 .3em;
    margin: 0;
    width: 77%;
  }
  .tab_head {
    font-size: .9rem;
    letter-spacing: .1rem;
    padding: 0rem .4rem;
    height: 2rem;
  }
  .tab_head:before {
    content: "";
    width: calc(100% - 24px);
    border-bottom: solid 12px #FFFFFF;
    border-left: solid 12px transparent;
    border-right: solid 12px transparent;
  }
  .tab_content {
    padding: 1.2rem 1.2rem 3.5rem;
  }
  .tab_content img {
    width: 100%;
    max-height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  .tab_content h3 {
    font-size: 1.15rem;
    margin: 2rem auto;
  }
  .tabs input:checked + .tab_head::before {
    border-bottom: solid 12px #6AA1CF;
  }
  /****************************************/
  /************** common etc **************/
  /****************************************/
  .sec_page_catch_c {
    display: block;
    position: absolute;
    margin: 0;
    width: 75%;
    top: 70%;
    left: 12%;
    z-index: 10;
  }
  .sec_page_catch_c h1 {
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: .1rem;
    margin-bottom: .5rem;
  }
  .sec_page_catch_c p {
    margin: .5rem 0 1.5rem;
  }
  .catch_c {
    display: block;
    width: 84%;
    top: 60%;
    left: 8%;
    z-index: 10;
  }
  .c_serif {
    width: 100%;
    font-size: .95rem;
    letter-spacing: .1em;
    font-feature-settings: "palt"1;
  }
  .under_right {
    text-align: right;
    /*width: 8em;*/
    display: block;
    /*position: absolute;*/
    bottom: 14%;
    right: 8%;
  }
  .content_wrapper {
    max-width: 100%;
    padding: 5rem 1.8rem;
  }
  .ss_oven_img img {
    display: block;
    width: 80%;
    max-width: 500px;
    min-width: 160px;
  }
  .pc_none {
    display: block;
  }
  .tb_none {
    display: block;
  }
  .sp_none {
    display: none;
  }
  .pc_tb_none {
    display: block;
  }
  .flex-2col-1 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .toggle_btn {
    top: 2vh;
    right: 5vw;
  }
  /*============
nav
=============*/
  nav {
    display: block;
    position: fixed;
    top: 0;
    left: -100vw;
    bottom: 0;
    width: 95vw;
    background: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: all .5s;
    z-index: 53;
    opacity: 0;
    padding-top: 60px;
  }
  .open nav {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
  }
  nav > .inner > ul > li {
    text-indent: .3rem;
  }
  nav > .inner ul > li a {
    padding: .5em .3em;
  }
  nav > .inner > ul > li > ul {
    padding-left: .8rem;
  }
  nav > .inner > ul > li > ul > li {
    text-indent: .6rem;
  }
}