@charset "UTF-8";
/*
    Template: ks10
    Theme Name: くわばら商店
    Version: 1.0.0
*/

/* ３本線PC表示 */
@media screen and (min-width: 961px) {
    .l-header__menuBtn.sp_ {
        display: block!important;
        position: relative;
        top: 7px; //表示位置
    }
    .p-spMenu {
        display: block!important;
    }
    .p-spMenu__inner {
        max-width: 600px; //幅を設定
    }     

button.c-iconBtn.-menuBtn.c-plainBtn {
    padding-top: 20px;
}
	
}

/* お知らせ */
.post_content {
    width: 80%;
    margin: 0 auto !important;
}

.l-container {
    width: 100%;
}

.l-article {
    padding: 30px 0 70px 50px;
}

.l-sidebar {
    padding: 50px 60px 50px 0;
}

small.c-pageTitle__subTitle.u-fz-14 {
    display: none;
}

/* 追従バナー */
.follow-banner {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 20;
}

.follow-banner a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    writing-mode: vertical-rl;
    color: #383838;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0;
    border-radius: 10px 0 0 10px;
    transition: opacity 0.25s;
}

.follow-banner a:hover {
  opacity: 0.7;
}

.follow-banner .swl-inline-icon::after {
    left: 50%;
    transform: translateX(-50%);
    z-index: -5;
    font-size: 2em;
}

.c-gnav .sub-menu {
    background: rgba(255, 255, 255, 0.7);
}

/* 追従バナー・スマホは非表示 */
@media screen and (max-width: 599px) {
  .follow-banner {
    display: none;
  }
}

/* ローディング */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2s forwards;
}

.loading img {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 200px; /* ロゴのサイズを指定（パソコン） */
}

@media screen and (max-width: 959px) {
  .loading img {
    width: 180px; /* ロゴのサイズを指定（スマホ） */
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}

.my-smooth {
  transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.u-fz-16 {
    font-size: 1.6em;
    padding: 0;
    margin: 0;
}

.w-footer {
    align-items: unset !important;
}

div#nav_menu-2 a {
    border: none;
    padding: 10px;
}

div#swell_sns_links-2 {
    text-align: left;
    display: inline-block;
    margin: 10px 0;
}

.ftleftlogo {
    width: 190px !important;
    height: auto;
}

.l-footer .copyright {
    font-size: 15px;
    text-align: center;
}

.widget_swell_sns_links .c-iconList {
    justify-content: flex-end;
}

.c-iconList__link.u-fz-14.hov-flash {
    font-size: 2em;
}

/*= 以下ページレイアウト =*/

.l-mainContent__inner>.post_content {
    margin: 2em 0;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* Firefox */
}

.ftad {
    font-size: 15px;
	line-height: 1.7em;
}

#text-2 {
    margin-top: 10px !important;
}

/*お問い合わせ*/

.csubtitle h2 {
    writing-mode: vertical-rl;
    letter-spacing: 1px;
}

.conouter {
    margin: 50px auto 0 !important;
}

.ctlinner h2 {
    position: relative;
    vertical-align: top;
    font-size: 4em !important;
    letter-spacing: 1px;
}

.ctlinnertxt {
    font-size: 1em;
    color: #383838;
}

/* まずは Confirm Plus の確認画面時にフォームへ付く可能性が高いクラスを広めにカバー */
.wpcf7-form.confirm .cf-area input,
.wpcf7-form.confirm .cf-area textarea,
.wpcf7-form.confirm .cf-area select,
.wpcf7-form.confirming .cf-area input,
.wpcf7-form.confirming .cf-area textarea,
.wpcf7-form.confirming .cf-area select {
  background: transparent;
  padding: 0;
  border: none;
  pointer-events: none;      /* 編集できないように */
  font-size: 16px;
}

/* 確認画面では枠線を実線・余白を詰める（「確認」感を出す） */
.wpcf7-form.confirm .cf-area,
.wpcf7-form.confirming .cf-area {
  border-bottom: 1px solid #ddd;
  padding: 1.2em 0;
}

/* 値が長い textarea を見やすく */
.wpcf7-form.confirm .cf-area textarea,
.wpcf7-form.confirming .cf-area textarea {
  resize: none;
  min-height: 6em;
}

/* 重要項目（メール・電話など）を太字にしたい場合の準備 */
.cf-area.is-important dd {
  font-weight: 700;
}

.confirmsec {
    width: 80%;
    margin: 40px auto;
}

.conftitle h2 {
    margin: 0 auto 20px !important;
}

.cthanks {
    width: 80%;
    margin: 30px auto;
}

.cthanks h2,.cthanks h3 {
    font-size: 1.5em;
    margin: 20px auto 10px;
}

.cthanks hr {
    margin: 20px 0 !important;
}

.cthanks p {
    line-height: 1.8em;
}

/* Multi-Step Forms の「戻る」ボタンを強制表示 */
.wpcf7 .wpcf7-previous,
.wpcf7 .wpcf7-previous input,
.wpcf7 .wpcf7-previous button {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.cf-send {
    text-align: center;
}

.cf-col {
  width: 50%;
  margin: 0 auto;
  display: inline-block;
  padding: 0 20px 0 0;
}

.cf-area {
  display: flex;
  gap: 20px;
  padding: 2em 0;
  border-bottom: 1px dashed #ccc;
}

.cf-area:last-child {
	border-bottom: none;
}

.cf-area dt {
  width: 180px;          /* 少しだけコンパクトに */
  padding-right: 0;      /* gapで管理 */
  text-align: left;
  line-height: 1.5em;
}

.cf-area dd { flex: 1; }

/* 768px以下は縦並び */
@media screen and (max-width:768px){
  .cf-area { display: block; }
  .cf-area dt { width: 100%; text-align: left; margin-bottom: 5px; }
	
.conftitle {
    margin: 0 auto;
}
.conftitle h2 {
    margin: 0 auto !important;
}	
.cthanks {
    width: 90%;
    margin: 0px auto;
}
.cthanks h2, .cthanks h3 {
    font-size: 1.1em;
    margin: 20px auto 10px;
}
	
.conftitle h2 {
    margin: 0 auto !important;
    font-size: 2em !important;
}

.csubouter {
	display: none !important;
}
	
.ctlinner h2 {
    font-size: 2.2em !important;
    letter-spacing: 1px;
}

.ctlinnertxt {
    font-size: 15px !important;
    line-height: 1.7em;
    color: #383838 !important;
}	

.ccouter {
    width: 100% !important;
}

.cinnertxt h2 {
    margin: 10px auto;
}
	
.cthanks p {
    line-height: 1.8em;
    font-size: 16px;
}

.w-footer {
    display: block !important;
}
	
.w-footer__box+.w-footer__box {
    margin-top: 0em !important;
}
	
.w-footer__box:first-child {
        padding-bottom: 0;
        padding-top: 0 !important;
    }
	
#media_image-4 {
    text-align: center;
}
	
.c-widget__title {
    text-align: left;
}
	
}

.cf-area input, .cf-area textarea {
  width: 100%;
  padding: 0.8em;
  border: none;
  background-color: #e6e6e6;
  font-size: 16px;
	resize: vertical;
	transition: all .3s;
}

.cf-area input:focus,.cf-area textarea:focus {
	outline: none;
	background: #dde2e9;
}

.cf-required {
	background: #b91e23;
	color: #fff;
	font-size: 0.8em;
	padding: 0 5px 2px;
	border-radius: 2px
}

.cf-send input,.cf-back-btn {
    display: block;
    background: linear-gradient(135deg, #6b7a8e 0%, #3b4a5e 100%);
    width: 300px;
    height: 60px;
    margin: 30px auto 0;
    border: none;
    border-radius: 5px;
    color: #fff;
    box-shadow: 2px 5px 15px 0 rgba(0, 0, 0, .2);
    font-size: 1.3em;
    font-weight: bold;
    transition: all .3s;
}

.cf-back-btn{
  display:inline-block;
  padding:14px 24px;
  margin-right:12px;
  background:#ccc;
  color:#333;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
}

.cf-back-btn:hover{
  background:#bbb;
}

.cf-send input:hover,.cf-back-btn {
	filter: brightness(1.25);
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	background-color: #fce3e3;
	border: none;
	text-align: center;
}

@media screen and (max-width:768px){

	.l-container {
    width: 100%;
}
	
.l-article,.l-sidebar {
    padding: 30px 0 70px;
    width: 90%;
    margin: 0 auto;
}
	
	.c-headLogo {
    margin-left: 10px;
}
	
	#text-2 {
    margin-top: 10px;
    font-size: 16px;
}
	
	.cf-area {
		display: block;
	}

	.cf-area dt {
    width: 100%;
		margin-bottom: 5px;
    padding-right: 0;
    text-align: left;
		line-height:1.5em;
	}
		
.vp-filter__style-minimal a {
    font-size: 1em !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    padding: 10px 10px 10px 0px !important;
}
	
.pfsec {
    width: 80% !important;
    margin: 10px auto !important;
}
	
}

/* selectも統一（今は input/textarea だけなので） */
.cf-area select {
  width: 100%;
  padding: 0.8em;
  border: none;
  background-color: #e6e6e6;
  font-size: 16px;
  transition: all .3s;
}

/* エラー時：入力欄の枠を出す */
.cf-area .wpcf7-not-valid {
  outline: 2px solid #b91e23;
  background: #fff5f5;
}

/* エラーメッセージ（tip） */
.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 0.9em;
  color: #b91e23;
}

/* 送信成功/失敗のメッセージを整える（今のinvalidはOK。successも足す） */
.wpcf7 form.sent .wpcf7-response-output {
  background-color: #e7f6ea;
  border: none;
  text-align: center;
}

.modula-fancybox-container .fancybox-image {
    width: 90% !important;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.w-beforeFooter {
    margin: 0 auto;
    overflow: hidden;
}

.l-fixHeader:before {
    background: rgba(255, 255, 255, 0.9);
    display: block;
    mix-blend-mode: normal;
    backdrop-filter: blur(2px);
    filter: invert(0);
}

.l-content {
    padding: 0;
    margin: 0 auto;
}

.pfsec {
    width: 90%;
    margin: 50px auto;
}

.vp-portfolio__layout-elements-align-center {
    justify-content: left;
}

.vp-filter__style-minimal a {
    font-size: 1em !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
}

body {
    font-family: "Zen Kaku Gothic", sans-serif !important;
}

.vp-portfolio__item .vp-portfolio__item-overlay {
  background-color: rgba(0, 0, 0, 0.5) !important; /* 白を50%透明に */
}

/*
.l-content {
    padding: 0;
    margin: 0 auto;
}*/

.c-listMenu a {
    position: relative;
    text-align: left;
    padding: 30px 40px;
    font-size: 14px;
}

.c-gnav .sub-menu a {
    padding: .7em .75em;
 }

.sub-menu a {
    font-size: .9em;
    padding-left: 3.5em !important;
}

.p-spMenu__inner {
    background: #fefefe;
    opacity: 0.9;
}

.c-widget__title.-spmenu {
    display: none;
}

.p-spMenu__body {
    margin-top: 30px;
}

.top #content {
    padding-top: 1em;
}

/*=ポートフォリオ詳細ページ=*/

.portwidth {
    width: 80%;
    margin: 0 auto;
}

.vp-portfolio__item-img {
  aspect-ratio: auto !important; /* WP6.0以上ならこれでOK */
  height: auto !important;
}

/*=やっていること=*/

#archanchor {
    margin-top: 60px !important;
    padding-bottom: 30px;
}

.abouter {
    width: 85% !important;
}

#archanchor,#adanchor,#zukananchor {
    flex-direction: row-reverse;
}

@media screen and (max-width:768px){

.bio p {
    margin: 15px auto 5px;
    width: 100%;
}
	
.abouttitle {
    margin: 0px auto !important;
}

    .abouttitle h2 {
        font-size: 2.5em !important;
        margin-top: 30px;
    }
	
.abouter {
    display: flex;
    flex-direction: row !important;
}
	
.bio {
    width: 100% !important;
    margin: 0 auto !important;
}
	
.abouttxt {
    font: 400 16px / 1.9em "Zen Kaku Gothic", sans-serif !important;
}
	
.absrow {
   width: 93% !important;
   margin: 0 auto !important;
}
	
}

@media screen and (min-width:769px) and (max-width:1140px){

.abouttitle span {
    font-size: .4em;
}
	
.ableft, .abright {
    width: 48.3333% !important;
    margin: 0 auto !important;
}	
	
.abouter {
    width: 95% !important;
}
	
.abouttitle {
    margin: 0px auto !important;
}

.abouttitle h2 {
    font-size: 2.2em !important;
}
	
.abouttxt {
    font: 400 16px / 1.9em "Zen Kaku Gothic", sans-serif !important;
}
	
.absrow {
   width: 93% !important;
   margin: 0 auto !important;
}
	
}

/*=桑原商店について=*/

.compro {
    width: 80% !important;
    margin: 0 auto !important;
}

.comti h2 {
    font-size: 2em !important;
    line-height: 1.5em !important;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.jigyo li {
    font-weight: normal;
}

.comlist li {
    font-weight: normal;
}

.pagespacer {
    height: 60px;
}

.pagewidth {
    width: 90% !important;
    margin: 0 auto !important;
}

.abouttitle {
    font-size: 1rem;
    width: 100%;
    margin: 50px auto;
}

.abouttitle h2 {
    color: #383838 !important;
    font-size: 2.75em;
    text-align: center;
    line-height: 1em;
}

.abouttitle span {
    font-size: .5em;
}

.abouttxt {
    color: #383838 !important;
    width: 90%;
    margin: 0 auto 30px;
    font: 400 1.1em / 1.9em "Zen Kaku Gothic", sans-serif;
}

.abouttxt h3 {
    font-size: 2em;
    margin: 10px auto 40px;
    text-align: center;
}

.abtxtin h4 {
    font-size: 1.6em;
    margin-bottom: 25px;
}

.abtxtin {
    width: 90%;
    margin: 0 auto 50px;
}

.abtxtin p {
    margin: 0 auto 30px;
    width: 90%;
}

.kstitle h2 {
    font-size: 2em;
}

.kstitle {
    margin: 50px auto 10px !important;
    padding: 0 !important;
}

.abtxtin li {
    font-size: 1.25em;
    font-weight: normal;
    margin: 0 auto 20px;
    width: 80%;
}

.abtxtin p:last-child {
    margin: 30px auto 0;
}

.bioinner p:last-child {
    margin: 10px 0 70px;
}

.aboutinfo  {
	width: 100%;
	margin: 10px auto;
}

.aboutinfo ul {
    margin: 0 auto 30px;
    padding: 0;
    width: 90%;
    font-weight: 600;
    font-size: 1.05em !important;
    line-height: 2em;
    color: #383838;
}

.zukan li {
    font-size: 1em !important;
    line-height: 1.5em;
    margin-bottom: 15px;
}

.abtsub {
    width: 75%;
    margin: 50px auto 0;
    padding: 0 0 50px;
}

.comin p {
    margin: 0 auto 10px;
}

.comin p:last-child {
    margin: 0 auto;
}

.comin h3 {
    margin: 30px auto 50px;
}

.comin h4 {
    margin: 40px auto 0 !important;
}

.comtxtsize {
    margin: 0 auto 30px;
}

.top #content {
    padding-top: 0em;
}
/*
.bio {
    width: 80% !important;
    margin: 0 auto !important;
}*/

.bio p {
    margin: 15px auto 5px;
    width: 100% !important;
}

.bioinner {
    width: 100%;
    margin: 0 auto;
}

.compro {
    width: 80% !important;
    margin: 0 auto !important;
}

.abtxtlist li {
    font-size: 1.12em;
    margin: 0 0 10px 0;
    font-weight: 500;
}

.compro h2 {
    writing-mode: vertical-lr;
}

.jigyo {
    text-align: center;
    margin: 30px auto 0;
}

.omoi {
    text-align: center;
    margin: 0 auto !important;
    padding: 10px 0;
}

.afterimg::after {
    content: "";
    position: absolute;
    background: url(http://kuwabarashow10.com/KS/wp-content/uploads/2025/11/ksbgimg.png) no-repeat left bottom;
    top: 200px;
    left: -110px;
    width: 100%;
    height: 90%;
    background-size: contain;
    z-index: -1;
    opacity: 0.4;
}

.w-footer {
    width: 80%;
    margin: 20px auto 10px;
    padding: 0;
}

.ftinfo li {
    font-size: 15px;
}

#custom_html-6 {
    margin-top: 15px;
}

.ftleftlogo {
    width: 260px;
    height: auto;
}

.w-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (min-width:769px) and (max-width:1140px){
}

@media screen and (max-width:768px){
	
.kstitle {
    margin: 0 auto 20px !important;
    padding: 0 !important;
}
	
.kstitle h2 {
    line-height: 1.45em;
}
	
.comtxtsize {
    width: 100%;
}
	
.comtxtsize p {
    margin: 30px auto 20px !important;
}
	
.comin h3 {
    margin: 20px auto 50px;
    line-height: 1.5em;
}
	
.omoi {
        text-align: center;
        margin: 60px auto 0 !important;
        padding: 10px 0;
        font-size: 2em !important;
        line-height: 1.5em;
    }
	
.comin li {
    width: 100%;
    text-align: left;
    line-height: 1.7em;
    font-size: 1em;
}
	
.comin p {
    width: 100%;
}
	
.comti {
    width: 90%;
    margin: 10px auto 0 !important;
}
	
.comti h2 {
    font-size: 1.75em !important;
    line-height: 1.5em !important;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}
	
.comlist li {
    font-size: 1.15em;
    font-weight: 600;
    margin: 0 auto 20px;
    width: 100%;
}
	
.compro {
    width: 90% !important;
    margin: 0 auto;
}
	
.bioinner h3 {
    text-align: left;
}
	
.compro h2 {
    writing-mode: horizontal-tb;
    font-size: 2em !important;
}
	
}


/*= ポートフォリオ =*/

.porttxt h4 {
    margin-bottom: 10px;
}

.porttxt li {
    font-size: 15px;
    margin-bottom: 8px;
}

.pfdescriinner {
    width: 90%;
    margin: 0 auto;
    padding: 0 0 30px;
    font-size: 16px;
}