@charset "UTF-8";
@import url("bootstrap-grid.css");
@import url("https://use.fontawesome.com/releases/v6.4.2/css/all.css");
@import url("/wp-content/themes/kilnart/template/default/css/slick-2024.css");
@import url("/wp-content/themes/kilnart/template/default/css/slick-theme.css");
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Great+Vibes&display=swap");



/*--------------------------------------------------------------------*/
/* PORCELAING CAMPAIGN                                                */
/*--------------------------------------------------------------------*/

.area-free-edit > .wrapper {
 margin-top: 20px !important;
}
.page-feature p,
.page-feature img{
 margin: 0;
 padding: 0;
}
.porce-camp-mb {
 line-height: 1.8;
}
.porce-camp-mb h1.head-title{
 background-color: #F4EEFB;
 font-family: "BIZ UDPGothic", sans-serif;
 font-weight: 700;
 font-size: 20px;
 padding: 2em 1em;
 text-align: center
}
.porce-camp-mb header{
 position: relative;
}
.porce-camp-mb header img.bg01{
 position: absolute;
 top: 5px;
}
.porce-camp-mb header img.bg02{
 position: absolute;
 bottom: 5px;
}
.porce-camp-mb h1.head-title span.en{
 display: block;
 font-size: 30px;
 font-family: "Great Vibes", cursive;
 font-weight: 400;
}
.porce-camp-mb h1.head-title span.jp{
 display: block;
 font-size: 30px;
}
.porce-camp-mb .lead{
 margin: 4em 0;
}
.porce-camp-mb h2 {
 display: inline-block;
 font-family: "BIZ UDPGothic", sans-serif;
 font-weight: 700;
 font-style: normal;
 font-size: 20px;
 margin: 1em auto 2em;
 position: relative;
 text-align: center;
 line-height: 1.6;
 width: 100%;
}
.porce-camp-mb .btn-pc-entry,
.porce-camp-mb .btn-pc-mail{
 background-color: rgba(255,153,153,1);
 color: rgba(255,255,255,1);
 display: inline-block;
 font-size: 16px;
 margin: .5em 0;
 padding: .5em 1em;
 text-decoration: none;
 transition: all 1s;
}
.porce-camp-mb .btn-pc-entry:hover,
.porce-camp-mb .btn-pc-mail:hover{
 background-color: rgba(255,153,153,.7);
 border-radius: 30px;
 color: rgba(255,255,255,1);
 display: inline-block;
 margin: .5em 0;
 padding: .5em 1em;
 text-decoration: none;
 transition: all .5s;
}
.porce-camp-mb .btn-pc-entry::after{
 content: "\f044";
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 margin-left: .5em;
}
.porce-camp-mb .btn-pc-mail::after{
 content: "\f0e0";
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 margin-left: .5em;
}

@media only screen and (min-width: 768px) {
.porce-camp-mb h1.head-title{
 font-size: 28px;
 padding: 2em;
}
.porce-camp-mb h1.head-title span.en,
.porce-camp-mb h1.head-title span.jp{
 font-size: 40px;
}
.porce-camp-mb h2{
 font-size: 28px;
 line-height: 1.4;
}
.porce-camp-mb .btn-pc-entry,
.porce-camp-mb .btn-pc-mail{
 font-size: 20px;
}
}
@media screen and (min-width : 1024px) {
.porce-camp-mb h1.head-title{
 font-size: 35px;
 padding: 3em 2.5em;
}
.porce-camp-mb h1.head-title span.en,
.porce-camp-mb h1.head-title span.jp{
 font-size: 48px;
}
.porce-camp-mb h2{
 font-size: 35px;
}
}
/* ABOUT */
.porce-camp-mb .about{
 background: rgba(255,238,238,1);
 border-radius: 10px;
 margin: 4em 0;
 padding: 1em;
}
.porce-camp-mb .about dl{
 margin: .5em;
}
.porce-camp-mb .about dt{
 background: rgba(255,255,255,1);
 border: 2px solid rgba(0,0,0,1);
 border-radius: 10px;
 margin: 1.5em 0 .5em;
 padding: .5em;
 font-family: "BIZ UDPGothic", sans-serif;
 font-weight: 700;
 font-size: 16px;
 text-align: center;
}
.porce-camp-mb .about dd{
 font-size: 16px;
}
.porce-camp-mb .about dd p.date{
 padding: .5em;
 font-family: "BIZ UDPGothic", sans-serif;
 font-weight: 700;
 font-size: 16px;
 text-align: center;
}
.porce-camp-mb .about dd p.date span.red{
 color: rgba(255,153,153,1);
 display: block;
 font-size: 16px;
}
.porce-camp-mb .about dd p{
 margin: .5em;
}
.porce-camp-mb .about dd p span{
 white-space: nowrap;
}
.porce-camp-mb .about dd em{
 color: rgba(255,153,153,1);
 font-weight: 700;
 font-style: normal;
}
.porce-camp-mb .about dd em::before{
 content: "●"
}
.porce-camp-mb .about dd p.detail-info{
 margin-left: 1em;
}
.porce-camp-mb .about dd ul{
 margin: .5em .5em 2em;
}
@media only screen and (min-width: 768px) {
.porce-camp-mb .about dt{
 font-size: 26px;
}
.porce-camp-mb .about dd p.date{
 font-size: 28px;
}
.porce-camp-mb .about dd p.date span{
 font-size: 16px;
}
}
/*商品一覧*/
.porce-camp-mb .goods-list-wrap{
 margin: 4em 0;
}
.porce-camp-mb .goods-list-wrap .goods-list{
 display: flex;
 flex-wrap: wrap;
}
.porce-camp-mb .goods-list-wrap .goods-list > li{
 padding: .8em;
 width: calc( (100% - 22px) );
 margin: 0 auto 1em;
 border: 1px solid #ccc;
}
.porce-camp-mb .goods-list-wrap .goods-list > li a{
 text-decoration: none;
}
.porce-camp-mb .goods-list-wrap .goods-list > li:hover{
 transition: all .5s;
}
.porce-camp-mb .goods-list-wrap .flex-wrap{
 margin-bottom: .5em;
}
.porce-camp-mb .goods-list-wrap .flex-wrap span{
 font-size: 16px;
 font-weight: 700;
}
.porce-camp-mb .goods-list-wrap .flex-wrap{
 display: flex;
 position: relative;
}
.porce-camp-mb .goods-list-wrap .flex-cont-2{
 flex: 2;
}
.porce-camp-mb .goods-list-wrap .flex-cont-1{
 flex: 1;
 text-align: right;
 position: absolute;
 bottom: 0;
 right: 0;
}
@media only screen and (min-width: 768px) {
.porce-camp-mb .goods-list-wrap .goods-list > li{
 width: calc( (100% - 20px)  / 2 );
}
.porce-camp-mb .goods-list-wrap .flex-wrap span{
 font-size: 18px;
}
}
/* 応援特典  */
.porce-camp-mb .privilege{
 background: rgba(244,238,251,1);
 border-radius: 10px;
 display: flex;
 flex-wrap: wrap;
 margin: 4em 0;
 padding: 1.5em 1.5em 2em;
}
.porce-camp-mb .privilege h2{
 color: rgba(157,122,199,1);
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}
.porce-camp-mb .privilege h2::before,
.porce-camp-mb .privilege h2::after {
 content: '';
 width: 3px;
 height: 30px;
 background-color: rgba(157,122,199,1);
}
.porce-camp-mb .privilege h2::before {
 margin-right: 30px;
 transform: rotate(-35deg)
}
.porce-camp-mb .privilege h2::after {
 margin-left: 30px;
 transform: rotate(35deg)
}
.porce-camp-mb .privilege .privilege-cont{
}
.porce-camp-mb .privilege .privilege-cont ul{
 margin-bottom: 2em;
}
.porce-camp-mb .privilege .privilege-cont li{
}
.porce-camp-mb .privilege .privilege-cont li{
 padding: 1em 35px 0 40px;
 position: relative;
}
.porce-camp-mb .privilege .privilege-cont li::before{
 display: block;
 font-size: 20px;
 left: 12px;
 position: absolute;
 top: 12px;
 color: rgba(157,122,199,1);
 content: "\f00c";
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
}
@media only screen and (min-width: 768px) {
.porce-camp-mb .privilege .privilege-cont{
 margin-right: 10px;
 width: calc( (100% - 20px)  / 2 );
}
.porce-camp-mb .privilege .privilege-cont:nth-child(2n){
 margin-right: 0;
}
}
/* メリット */
.porce-camp-mb .benefit ul{
 display: flex;
 flex-wrap: wrap;
 margin: 0 0 4em;
}
.porce-camp-mb .point > li{
 border: 3px solid #9D7AC7;
 border-radius: 20px;
 margin: 80px auto ;
 padding: 1.5em 1.5em 0 1.5em;
 width: calc( 100% );
}
.porce-camp-mb .point-conts{
 position: relative;
 top: -100px;
}
.porce-camp-mb .point .circle_width {
 background-image: linear-gradient(0deg, rgba(181, 149, 220, 1), rgba(244, 238, 251, 1));
 border-radius: 50%;
 font-family: 'Noto Serif JP', serif;
 line-height:1;
 margin: 0 auto;
 position: relative;
 width: 150px;
 z-index: 999;
}
.porce-camp-mb .point .circle_width::before {
 border-radius: 50%;
 content: '';
 height: 100%;
 line-height:1;
 left: -3px;
 position: absolute;
 top: -3px;
 width: 150px;
}
.porce-camp-mb .point .circle_height {
 height: 0;
 padding-top: 100%;
 position: relative;
}
.porce-camp-mb .point .circle_height p {
 left: 0;
 margin: 0;
 position: absolute;
 right: 0;
 text-align: center;
 top: calc((100% - 60px)/2);
}
.porce-camp-mb .point > li em{
 display: block;
 font-family: "BIZ UDPGothic", sans-serif;
 font-weight: 700;
 font-size: 22px;
 font-style: normal;
 margin: .5em 0;
 text-align: center;
 text-shadow: 2px 3px 3px rgba(255, 255, 255, 1);
}
.porce-camp-mb .point > li ul.benefit-txt{
 margin-top: 1em;
}
.porce-camp-mb .point > li ul.benefit-txt li{
 margin-bottom: 1em;
}
.porce-camp-mb .point > li ul.benefit-txt li p{
 background: linear-gradient(transparent 60%, #D9C3F4 60%);
 display: inline;
 font-size: 20px;
 font-weight: 700;
}
.porce-camp-mb .point > li ul.benefit-txt li::before{
 color: rgba(157,122,199,1);
 content: "\f111";
 font-family: "Font Awesome 5 Free";
 font-weight: 700;
}
@media only screen and (min-width: 768px) {
.porce-camp-mb .point > li{
 margin: 80px 10px 0 0;
 width: calc( (100% - 20px)  / 2 );
}
.porce-camp-mb .point-conts{
 top: -120px;
}
.porce-camp-mb .point .circle_width {
 width: 200px;
}
.porce-camp-mb .point .circle_width::before {
 width: 200px;
}
.porce-camp-mb .point .circle_height p {
 top: calc((100% - 90px)/2);
}
.porce-camp-mb .point > li em{
 font-size: 28px;
}
.porce-camp-mb .point > li ul.benefit-txt li p{
 font-size: 24px;
 margin-top: 2em;
}
.porce-camp-mb .point > li:nth-child(2n){
 margin-right: 0;
}
}
/* 申し込み方法  */
.porce-camp-mb .detail{
 background: rgba(255,238,238,1);
 border-radius: 10px;
 margin: 4em 0;
 padding: 1em 1.5em 2.5em;
}
.porce-camp-mb .detail h2 {
 position: relative;
 padding: 1.5rem;
 text-align: center;
}
.porce-camp-mb .detail h2:before {
 position: absolute;
 bottom: -5px;
 left: calc(50% - 50px);
 width: 100px;
 height: 5px;
 content: '';
 border-radius: 3px;
 background: rgba(255,153,153,1);
}
.porce-camp-mb .detail em{
 font-weight: 700;
 font-style: normal;
}
.porce-camp-mb .detail em span{
 background: linear-gradient(transparent 60%, #FF9999 60%);
 display: inline;
}
.porce-camp-mb .detail .step {
 color: rgba(255,153,153,1);
 display: flex;
 justify-content: center;
 align-items: center;
 font-family: "BIZ UDPGothic", sans-serif;
 font-weight: 700;
 font-style: normal;
 font-size: 20px;
 text-align: center;
 margin: 1.5em 0 .5em;
}
.porce-camp-mb .detail .step::before,
.porce-camp-mb .detail .step::after {
 content: '';
 width: 50px;
 height: 3px;
 background-color: rgba(255,153,153,1);
}
.porce-camp-mb .detail .step::before {
 margin-right: 20px;
}
.porce-camp-mb .detail .step::after {
 margin-left: 20px;
}
.porce-camp-mb .detail dt{
 color: rgba(255,153,153,1);
 margin: .5em 0;
 font-size: 18px;
 font-weight: 700;
}

.porce-camp-mb .detail li span.nw{
 white-space: nowrap;
}

@media only screen and (min-width: 768px) {
.porce-camp-mb .detail {
 padding: 2em 2.5em 4em;
}
.porce-camp-mb .detail .step {
 font-size: 30px;
}
.porce-camp-mb .detail dt{
 font-size: 20px;
}
}
/* FAQ  */
.porce-camp-mb .faq{
 background: rgba(244,238,251,1);
 display: flex;
 flex-wrap: wrap;
 margin: 4em 0;
}
.porce-camp-mb .faq h2 {
 position: relative;
 padding: 1.5rem;
 text-align: center;
}
.porce-camp-mb .faq h2:before {
 position: absolute;
 bottom: -5px;
 left: calc(50% - 50px);
 width: 100px;
 height: 5px;
 content: '';
 border-radius: 3px;
 background: rgba(160,113,152,1);
}
.porce-camp-mb .faq .faq-txt{
 margin: 1em auto;
}
.porce-camp-mb .faq ul.faq-list{
 padding: 1em;
}
.porce-camp-mb .faq ul.faq-list.faq-list-oi{
 background: rgba(160,113,152,.1);
}
.porce-camp-mb .faq ul.faq-list.faq-list-oac{
 background: rgba(26,116,101,.1);
}
.porce-camp-mb .faq ul.faq-list li{
 background: #fff;
 border-radius: 5px;
 margin-bottom: 1em;
}
.porce-camp-mb .faq ul.faq-list li.last{
 margin-bottom: 0;
}
.porce-camp-mb .faq ul.faq-list .qstn{
 color: rgba(157,122,199,1);
}
.porce-camp-mb .faq ul.faq-list.faq-list-oi .qstn{
 color: rgba(160,113,152,1);
}
.porce-camp-mb .faq ul.faq-list.faq-list-oac .qstn{
 color: rgba(26,116,101,1);
}
.porce-camp-mb .faq ul.faq-list .ansr{
}
.porce-camp-mb .faq ul.faq-list .qstn,
.porce-camp-mb .faq ul.faq-list .ansr {
 padding: 1em 35px 1em 40px;
 position: relative;
}
.porce-camp-mb .faq ul.faq-list .qstn::before,
.porce-camp-mb .faq ul.faq-list .ansr::before{
 display: block;
 font-size: 20px;
 font-weight: 700;
 left: 12px;
 position: absolute;
 top: 12px;
}
.porce-camp-mb .faq ul.faq-list .qstn::before{
 content: 'Q';
}
.porce-camp-mb .faq ul.faq-list .ansr::before {
 content: 'A';
}
.porce-camp-mb .faq ul.faq-list li ol li,
.porce-camp-mb .faq ul.faq-list li ul li{
 margin-bottom: 0;
}
.porce-camp-mb .faq ul.faq-list li ul li{
 padding: .4em 0 0 30px;
 position: relative;
}
.porce-camp-mb .faq ul.faq-list li ul li::before{
 color: rgba(157,122,199,1);
 content: "\f111";
 display: block;
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 left: 10px;
 position: absolute;
 top: .4em;
}
.porce-camp-mb .faq ul.faq-list li ul li::before{
 color: rgba(157,122,199,1);
}
.porce-camp-mb .faq ul.faq-list.faq-list-oi li ul li::before{
 color: rgba(160,113,152,1);
}
.porce-camp-mb .faq ul.faq-list.faq-list-oac li ul li::before{
 color: rgba(26,116,101,1);
}
.porce-camp-mb .faq ul.faq-list li ol li{
 padding: .4em 0 0 30px;
 text-indent: -1.1em;
 }
.porce-camp-mb .faq ul.faq-list li ol li::first-letter{
 color: rgba(157,122,199,1);
 font-weight: 700;
 }
 .porce-camp-mb .faq ul.faq-list .ansr dl.howto{
 margin-left: 1em;
}
 .porce-camp-mb .faq ul.faq-list .ansr dl.howto dd{
 margin-left: 1em;
}
 .porce-camp-mb .faq ul.faq-list .ansr dl.howto em.em-1,
 .porce-camp-mb .faq ul.faq-list .ansr dl.howto em.em-2{
 border-radius: 3px;
 color: #fff;
 display: inline-block;
 font-style: normal;
 padding: 0 .3em;
}
 .porce-camp-mb .faq ul.faq-list .ansr dl.howto em.em-1{
 background: rgba(51,51,51,.5);
 margin: .5em .3em;
}
 .porce-camp-mb .faq ul.faq-list .ansr dl.howto em.em-2{
 background: rgba(236,109,132,.8);
 margin: 0 .3em .5em;
}
 .porce-camp-mb .faq ul.faq-list.faq-list-oi .ansr dl.howto em.em-2{
 background: rgba(160,113,152,1);
}
 .porce-camp-mb .faq ul.faq-list.faq-list-oac .ansr dl.howto em.em-2{
 background: rgba(26,116,101,1);
}
.porce-camp-mb .faq .faq-txt-2 {
 margin: 1em .5em 2em;
 font-size: 18px;
 font-weight: 700;
 position: relative;
 padding: 1.5rem 2rem;
 border-bottom: 3px solid rgba(157,122,199,1);
 text-align: center;
}
.porce-camp-mb .faq .faq-txt-2::before {
 position: absolute;
 bottom: -14px;
 left: 50%;
 width: 0;
 height: 0;
 content: '';
 border-width: 14px 12px 0;
 border-style: solid;
 border-color:  rgba(157,122,199,1) transparent transparent;
 }
.porce-camp-mb .faq .faq-txt-2::after {
 position: absolute;
 bottom: -10px;
 left: 50%;
 width: 0;
 height: 0;
 content: '';
 border-width: 14px 12px 0;
 border-style: solid;
 border-color: #fff transparent transparent;
 }
 @media (min-width: 768px) {
.porce-camp-mb .faq .faq-txt{
 text-align: center;
}
.porce-camp-mb .faq .faq-txt-2{
 font-size: 20px;
}
}