@charset "UTF-8";
/*
    Template: jeweloriginal_sw
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ----------------------------------------------------------------------
  PC・スマホ共通
---------------------------------------------------------------------- */

.font-ja {
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.font-en {
	font-family: "Rosarivo", cursive !important; /*Googleフォントを使用Headerに読込追記済み、管理画面内Headerで指定*/
}

.conth2-ttl {
	font-size: 3.0rem !important;
	text-align: left !important;
	font-weight: normal !important;
	font-style: normal;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	color: rgba( 112, 96, 95, 1.0 ) !important;
}

.conth2-ttl-sttl {
	margin: 0 !important;
	font-size: 3.0rem !important;
	text-align: left !important;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-weight: normal !important;
	font-style: normal;
	color: rgba( 112, 96, 95, 1.0 ) !important;
}

.cont-ttl {
	font-size: 3.0rem !important;
	text-align: left !important;
	font-weight: normal !important;
	font-style: normal;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	color: rgba( 112, 96, 95, 1.0 ) !important;
}

.cont-sttl {
	text-align: left !important;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-weight: normal !important;
	font-style: normal;
	color: rgba( 112, 96, 95, 1.0 ) !important;
}

.cont-sttl::before, .cont-sttl::after {
	content: '-';
	padding: 0 5px;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-weight: normal !important;
	font-style: normal;
	color: rgba( 112, 96, 95, 1.0 ) !important;
}

.message-txt {
	line-height: 1.3em;
	font-size: 2.5rem;
	text-align: left;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-weight: 500;
	font-style: normal;
	color: rgba( 112, 96, 95, 1.0 );
}


/* ----------------------------------------------------------------------
  マウスオーバーアクション
---------------------------------------------------------------------- */

/*.footer-bf-area a img, .widget_media_image a img {
	transition: 0.3s;
}

.footer-bf-area a:hover img, .widget_media_image a:hover img {
	opacity: 0.6;
}*/


/* ----------------------------------------------------------------------
  PC用
---------------------------------------------------------------------- */

.smp {
	display: none;
}


/* ----------------------------------------------------------------------
  ヘッダー部分
---------------------------------------------------------------------- */

/* グローバルメニュー
---------------------------------------------------------------------- */

.c-gnav li {
	padding: 0 20px;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	text-shadow: 0 4px 15px rgba( 255, 255, 255, 0.25 ), 0 1px 3px rgba( 255, 255, 255, 0.15 );
	letter-spacing: 0.18em;
}

/* お問合せボタン */

/*.contact-btn*/.c-gnav li:last-of-type {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	min-width: 190px;
	/*height: 58px;*/
	padding: 0 25px;
	color: rgba( 255, 255, 255, 1.0 );
	text-decoration: none;
	background: linear-gradient( 135deg, #b8945d 0%, #d8bd8b 45%, #b8945d 100% );
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 2px;
	box-shadow: 0 4px 15px rgba(130, 100, 50, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	/*font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;*/
	/*font-size: 14px;
	font-weight: 500;*/
	overflow: hidden;
	transition: color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

/* 通常ヘッダーの下線（カラーと太さの変更） */
.l-header__gnav .c-gnav li:last-of-type a::after {
    /*background-color: #ff0000;*/ /* 好きなカラーコードに変更 */
    height: 0; /* 線の太さを変更（初期は2px程度） */
}

/* 追従ヘッダー（スクロール時）のナビバー色変更 */
.c-gnav li:last-of-type a::after {
    /*background: #ff0000;*/ /* 好きなカラーコードに変更 */
    height: 0;
}

/* 光沢のアニメーション *//*20260904時点以降のアクションは未設定contact-btnはc-gnav　li*/
.contact-btn::before {
  content: "";
  position: absolute;

  top: 0;
  left: -120%;

  width: 80%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );

  transform: skewX(-25deg);

  transition: left 0.7s ease;
}


/* テキスト */
.contact-btn__text {
  position: relative;
  z-index: 2;
}


/* 矢印 */
.contact-btn__arrow {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;

  transition: transform 0.4s ease;
}


/* ホバー */
.contact-btn:hover {
  color: #ffffff;

  transform: translateY(-2px);

  box-shadow:
    0 8px 22px rgba(130, 100, 50, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}


.contact-btn:hover::before {
  left: 130%;
}


.contact-btn:hover .contact-btn__arrow {
  transform: translateX(5px);
}


/* ----------------------------------------------------------------------
  フッター部分
---------------------------------------------------------------------- */

/* フッター直前
---------------------------------------------------------------------- */

.w-beforeFooter {
	background: url("https://nailjewel.net/wp-content/uploads/2026/09/nailchip-bg.jpg") no-repeat center;
	background-size: 100% auto;
}

.beforefooter-area {
	padding: 100px 0 50px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* フッター問合せリンクボタン */

.beforefooter-area .aboutaddress-zone {
	width: 400px;
	margin: 50px 0 20px 0;
	color: rgba( 255, 255, 255, 1.0 );
}

.beforefooter-area .aboutaddress-zone .aboutname-txt {
	font-size: 2.0em;
	font-weight: 700;
}

.aboutaddress-zone {
	width: 50%;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
	font-weight: 400;
}

.aboutaddress-box {
	max-width: 100%;
	border: rgba( 255, 255, 255, 1.00 ) solid 2px;
	background: rgba( 255, 255, 255, 1.0 );
	box-sizing: border-box;
}

.aboutaddress-box a {
	min-height: 80px;
	line-height: 80px;
	font-size: 1.3rem;
	border: rgba( 203, 178, 157, 1.00 ) solid 1px;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	display: block;
	color: rgba( 203, 178, 157, 1.00 );
}

.aboutaddress-box a p {
	width: calc( 100% - 30px );
}

.aboutaddress-box a p:after {
	content: '>';
    position: absolute;
    left: 37%;
    transform: translateX(-50%);
	width: 30px;
}

.beforefooter-area .aboutmap-zone {
	width: 800px;
}

.beforefooter-area .aboutmap-zone iframe {
	filter: grayscale(100%);
}

.beforefooter-area .aboutmap-zone iframe[src*="www.google.com/maps/embed"] {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
}


/* ----------------------------------------------------------------------
  Function部分
---------------------------------------------------------------------- */

/* ページトップ直前
---------------------------------------------------------------------- */

#pagetop {
	width: 80px;
	height: 100px;
	background: url("https://nailjewel.net/wp-content/uploads/2026/09/pagetop-img.png") no-repeat bottom center;
	background-size: contain;
	border: none;
	box-shadow: none;
}

#pagetop.hov-bg-main:hover {
	background-color: rgba( 255, 255, 255, 0.0 ) !important;
}

#pagetop .icon-chevron-up:before {
    content: " ";
}


/* ----------------------------------------------------------------------
  フロントページ（Index）ページ
---------------------------------------------------------------------- */

/* メイン画像
---------------------------------------------------------------------- */

.mainimg01-zone, .maininq01-zone {
	width: 50%;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
	font-weight: 400;
}

.mainimg01-zone .firstview-txt {
	font-size: 3.0rem;
	font-weight: bold;
	/*color: rgba( 177, 162, 155, 1.0 );*/
	color: rgba( 112, 96, 95, 1.0 );
	margin-bottom: 1.0rem;
}

.mainimg01-zone .en-txt {
	font-size: 1.0rem;
}

.mainimg01-zone .en-txt span {
	font-size: 1.5rem;
}

.maininq01-zone {
	margin-top: 50px;
}

.maininq-box {
	max-width: 80%;
	margin: 0 auto;
	border: rgba( 255, 255, 255, 1.00 ) solid 2px;
	background: rgba( 255, 255, 255, 0.8 );
	box-sizing: border-box;
}

.maininq-box a {
	min-height: 100px;
	line-height: 100px;
	font-size: 1.5rem;
	border: rgba( 203, 178, 157, 1.00 ) solid 1px;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	display: block;
	color: rgba( 203, 178, 157, 1.00 );
}

.maininq-box a p {
	width: calc( 100% - 30px );
}

.maininq-box a p:after {
	content: '>';
    position: absolute;
    /*top: 100%;*/
	left: 43%;
	transform: translateX(-50%);
	width: 30px;
	/*height: 100%;*/
}

.mainimg02-zone {
	padding: 20px 0 20px 20px;
	box-sizing: border-box;
	border-radius: 3px;
	position: relative;
	top: 50%;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
	font-weight: 400;
	background: rgba( 255, 255, 255, 0.3 );
	display: flex;
}

.mainimg02-zone div {
	width: calc( 100% / 3 );
	padding: 50px;
	margin-right: 20px;
	box-sizing: border-box;
	border-radius: 3px;
	background: rgba( 255, 255, 255, 1.0 );
}

.mainimg02-zone p {
	font-size: 1.0rem;
	color: rgba( 112, 96, 95, 1.0 );
}

.mainimg02-zone .firstview-txt {
	font-size: 1.8rem;
	font-weight: bold;
	/*color: rgba( 177, 162, 155, 1.0 );*/
	color: rgba( 198, 166, 116, 1.0 );
	margin-bottom: 1.0rem;
}

/* スライダーのテキストをフェードさせる */
/* 必須：フェードを実装させるためにはjsフォルダ内のscript.jpとfunctions.php内に「スライダーでテキストをフェードイン」のコード部分を追記する */

.p-mainVisual__slideTitle,
.p-mainVisual__slideText {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.6s ease;
}

.p-mainVisual__slideTitle.is-animated,
.p-mainVisual__slideText.is-animated {
  opacity: 1 !important;
  transform: translateX(0);
}

.p-mainVisual__slideText.is-animated {
  transition-delay: 0.2s;
}


/* ABOUT
---------------------------------------------------------------------- */

.jewelabout-zone {
	padding: 100px 0 50px 0 !important;
}

/* メニュー　------------------------------*/

.menu-box {
	position: relative;
}

.menu-box .txt-box {
	width: 100%;
	min-height: 300px;
	padding: 20px;
	box-sizing: border-box;
	position: relative;
	z-index: 5;
}

.menu-box .txtw-box {
	width: 100%;
	min-height: 300px;
	padding: 20px;
	box-sizing: border-box;
	position: relative;
	z-index: 5;
	color: rgba( 255, 255, 255, 1.0 );
}

.menu-box .bg-img {
	position: absolute;
	top:0;
}

.menu-box .conth2-ttl-sttl {
	font-size: 1.9rem !important;
}

.menu-box .txtw-box .conth2-ttl-sttl, .txtw-box .cont-sttl, .txtw-box .cont-sttl::before, .txtw-box .cont-sttl::after {
	color: rgba( 255, 255, 255, 1.0 ) !important;
}

.link-box {
	/*max-width: 100%;
	margin: 0 auto;*/
	border: rgba(255, 255, 255, 0.8) solid 3px;
	background: rgba(255, 255, 255, 0.8);
	box-sizing: border-box;
}

.link-box a {
	/*max-width: 80%;*/
	/*margin: 0 auto;*/
	border: rgba( 203, 178, 157, 1.0 ) solid 1px;
	background: rgba(255, 255, 255, 0.8);
	box-sizing: border-box;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
	font-weight: 700;
	color: rgba( 203, 178, 157, 1.0 );
}

.link-box a::after {
	content: '>';
    position: absolute;
    /*top: 100%;*/
    left: 45%;
    transform: translateX(-45%);
	width: 30px;
	/*height: 100%;*/
}


/* JEWEL&のこだわり　------------------------------*/

.jewelpoint-zone {
	padding: 50px 50px 100px 50px;
	margin-top: 100px;
	border-radius: 10px 10px 0 0;
	background: rgba( 255, 255, 255, 0.6 );
	text-align: center;
}

.jewelpoint-zone .conth2-ttl {
	font-size: 2.0rem !important;
	text-align: center !important;
}

.jewelpoint-zone .swell-block-columns .swell-block-column {
	padding: 0 20px 15px 20px;
	border-right: rgba( 203, 178, 157, 1.0 ) solid 1px;
	box-sizing: border-box;
}

.jewelpoint-zone .swell-block-columns .swell-block-column:last-of-type {
	border-right: none;
}

.jewelpoint-zone .message-txt {
	line-height: 1.3em;
	min-height: 2.6em;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
	color: rgba( 203, 178, 157, 1.0 );
}

.jewelpoint-zone img {
	width: 75%;
}


/* ----------------------------------------------------------------------
  お問合わせページ
---------------------------------------------------------------------- */

/* 各問合せ手段
---------------------------------------------------------------------- */

.meanscontact-area {
	padding: 50px;
	background: rgba( 255, 255, 255, 0.6 );
	box-sizing: border-box;
	text-align: center;
}

.meanscontact-area .cont-ttl {
	font-size: 2.0rem !important;
	text-align: center !important;
}

.meanscontact-zone {
	padding: 50px 0 50px 0;
	background: rgba( 255, 255, 255, 0.8 );
	box-sizing: border-box;
	text-align: center;
	/*min-height: 500px;*/
	/*display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;*/
}

.meanscontact-zone .akind-box {
	/*width: calc( 100% / 3 );*/
	padding: 50px;
	border-right: rgba( 189, 154, 100, 1.0 ) solid 1px;
	box-sizing: border-box;
}

.meanscontact-zone .akind-box:nth-of-type(3n) {
	/*width: calc( 100% / 3 );*/
	/*padding: 20px 0 0 0;*/
	border-right: none;
}

.meanscontact-zone .akind-box .akind-ttl {
	font-size: 1.5rem;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	color: rgba( 178, 124, 177, 1.0 );
}


/* 入力フォーム
---------------------------------------------------------------------- */

.forminfo-zone {
	width: 800px;
	padding: 0 200px 50px 200px;
}

.binder-img {
	margin: 0;
}

.binder-img img {
	width: 100%;
}

.responsive-form {
  /*max-width: 800px;*/
	/*width: 1000px;
  margin: 0 auto;*/
  /*padding: 20px;*/
	padding: 50px 0 100px 0;
	font-family: sans-serif;
	box-sizing: border-box;
	background: url("https://nailjewel.net/wp-content/uploads/2026/09/binderbody-img.png") center repeat-y;
	background-size: 100% auto;
}

.responsive-form *, .responsive-form *::before, .responsive-form *::after {
	box-sizing: inherit;
}

.inputform-zone {
	width: 800px;
	margin: 0 auto;
}

.dateandtime1-group {
	padding: 3em 0;
	margin: 3em 0;
	border-top: rgba( 209, 209, 209, 1.0 ) dotted 1px;
	border-bottom: rgba( 209, 209, 209, 1.0 ) dotted 1px;
}

.dateandtime-group {
	padding: 0 0 3em 0;
	margin: 0 0 3em 0;
	border-top: none;
	border-bottom: rgba( 209, 209, 209, 1.0 ) dotted 1px;
}

.form-group {
	display: flex;
	flex-direction: row;
	align-items: flex-start; /* 上揃え */
	/*gap: 24px;*/
	margin-bottom: 24px;
}

/* 左側：ラベルの横幅を固定 */
.form-label-box {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 220px;
	flex-shrink: 0;
	padding-top: 10px; /* 入力欄と高さを合わせる微調整 */
}

.form-label {
	font-weight: bold;
	/*font-size: 15px;
	color: rgba( 3, 3, 3, 1.0 );*/
}

/* 必須・任意バッジ */
.required-mark {
	padding: 0 0.5em;
	border-radius: 4px;
	color: rgba( 217, 177, 215, 1.0 );
	font-weight: bold;
}

.required-mark.required {
	background-color: #e53935;
}

.required-mark.optional {
	background-color: #757575;
}

/* 右側：入力エリア共通 */
.form-input-box {
	flex-grow: 1;
}

.form-input-box input[type="text"], .form-input-box input[type="email"], .form-input-box input[type="tel"], .form-input-box input[name^="date"], .form-input-box select[name], .form-input-box textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
}

.form-input-box input[type],/* .form-input-box input[type="email"], .form-input-box input[type="tel"],*/ .form-input-box select[name] {
	height: 3.0em;
}

.form-input-box input[type="checkbox"] {
	height: 2.0em;
	line-height: 2.0em;
	vertical-align: middle;
}

/* ラジオボタンのグループ */
.radio-group {
  display: flex;
  flex-wrap: wrap; /* 画面幅に応じて自動で折り返す */
  gap: 12px;
  padding: 5px 0;
}

.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 15px;
}

/* 送信ボタン */
.form-submit {
	text-align: center;
	margin-top: 50px;
}

.form-submit input[type="submit"] {
	width: 300px;
	padding: 14px 60px;
	/*font-size: 16px;*/
	font-weight: bold;
	color: rgba( 255, 255, 255, 1.0 );
	background-image: linear-gradient(90deg, rgba(210, 153, 194, 1), rgba(255, 247, 194, 1));
	border: none;
	box-shadow: 0 4px 15px rgba(130, 100, 50, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	border-radius: 4px;
	cursor: pointer;
	transition: background-image 0.3s;
}

.form-submit input[type="submit"]:hover {
	background-image: linear-gradient(90deg, rgba(255, 247, 194, 1), rgba(210, 153, 194, 1));
}