﻿@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-gn {
 line-height: 1.8;
}
.porce-camp-gn h1.head-title{
 position: relative;
}
.porce-camp-gn h1.head-title img{
 width: 100%;
}
.porce-camp-gn h1.head-title p{
 font-size: 60px;
 font-family: "Great Vibes", cursive;
 font-weight: 400;
 position: absolute;
 left: 40%;
 top: 50%;
 transform: translate(-30%,-50%);
 text-shadow: 2px 2px 0px rgba(255, 255, 255, 1), 4px 4px 10px rgba(255, 255, 255, 1);
}
.porce-camp-gn .lead{
 margin: 4em 0;
}
.porce-camp-gn 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-gn .btn-pc-search{
 background-color: rgba(255,153,153,1);
 color: rgba(255,255,255,1);
 display: block;
 font-size: 16px;
 margin: 1em auto 2em;
 padding: .5em;
 text-align: center;
 text-decoration: none;
 transition: all 1s;
 width: calc( (100%) );
}
.porce-camp-gn .btn-pc-search:hover{
 background-color: rgba(255,153,153,.7);
 border-radius: 30px;
 color: rgba(255,255,255,1);
}
.porce-camp-gn .btn-pc-search::after{
 content: "\f002";
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 margin-left: .5em;
}

@media only screen and (min-width: 768px) {
.porce-camp-gn h1.head-title{
 font-size: 28px;
}
.porce-camp-gn h1.head-title p{
 font-size: 90px;
 left: 50%;
 transform: translate(-50%,-50%);
}
.porce-camp-gn h2{
 font-size: 28px;
 line-height: 1.4;
}
.porce-camp-gn .btn-pc-search{
 font-size: 20px;
}
}
@media screen and (min-width : 1024px) {
.porce-camp-gn h1.head-title p{
 font-size: 100px;
}
.porce-camp-gn h2{
 font-size: 35px;
}
}
/* ポーセラーツとは */
.porce-camp-gn .about{
 background: rgba(255,255,238,1);
 margin: 4em 0 0;
 padding: 1em;
}
.porce-camp-gn .about h2 span{
 display: block;
 font-size: 22px;
 font-family: "Great Vibes", cursive;
 font-weight: 400;
}
.porce-camp-gn .about p{
 padding: 0 1em 1em;
}
@media only screen and (min-width: 768px) {
.porce-camp-gn .about h2 span{
 font-size: 28px;
}
}
@media screen and (min-width : 1024px) {
.porce-camp-gn .about h2 span{
 font-size: 40px;
}
}

/* 詳細 */
.porce-camp-gn .detail{
 background: rgba(255,238,238,1);
 margin: 0;
 padding: 1em;
 display: flex;
 flex-wrap: wrap;
}
.porce-camp-gn .detail dl{
 float: left;
 width: calc( (100% - 22px) );
}
.porce-camp-gn .detail dt{
 background: rgba(255,255,255,1);
 border: 1px solid rgba(0,0,0,1);
 display: inline-block;
 margin: 1.5em 0 .5em;
 padding: .1em .6em;
}
.porce-camp-gn .detail dd{
}
.porce-camp-gn .detail dd span.nw{
 white-space: nowrap;
}
.porce-camp-gn .detail dd p{
 margin: .5em;
}
.porce-camp-gn .detail dd p span{
}
.porce-camp-gn .detail dd li{
 font-style: normal;
}
.porce-camp-gn .detail dd li::before{
 content: "●";
 color: rgba(255,153,153,1);
 margin-right: .3em;
}
.porce-camp-gn .detail dd p.detail-info{
 margin-left: 1em;
}
.porce-camp-gn .detail dd ul{
 margin: .5em;
}
.porce-camp-gn .detail figure{
 width: calc( (100%) );
}
@media only screen and (min-width: 768px) {
.porce-camp-gn .detail dl{
 width: calc( (100% - 22px - 32%) );
 float: left;
}
.porce-camp-gn .detail figure{
 float: right;
 width: calc( (100% - 70%) );
 margin-left: 1em;
}
}
