@charset "utf-8";

/* =====================
   Fonts (utility classes)
===================== */
.zen-kaku-gothic-new-regular { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; }
.zen-kaku-gothic-new-medium  { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; }
.zen-kaku-gothic-new-bold    { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; }
.allura-regular              { font-family: "Allura", cursive; font-weight: 400; }
.zen-old-mincho-regular      { font-family: "Zen Old Mincho", serif; font-weight: 400; }
.zen-old-mincho-medium       { font-family: "Zen Old Mincho", serif; font-weight: 500; }
.zen-old-mincho-semibold     { font-family: "Zen Old Mincho", serif; font-weight: 600; }
.zen-old-mincho-bold         { font-family: "Zen Old Mincho", serif; font-weight: 700; }
.mea-culpa-regular {
  font-family: "Mea Culpa", cursive;
  font-weight: 400;
  font-style: normal;
}


/* =====================
   Base
===================== */
* {
  text-size-adjust: none;
}
:root{
  --clr-bg: #FAEDEE;
  --clr-text:#2b2b2b;
  --clr-accent:#C48587;
  --clr-accent-2:#8F4D4E;
  --clr-frame:#B19D84;
  --shadow: 0 10px 30px rgba(0,0,0,.05);

  /* contact */
  --contact-brand:#755E5B;
  --contact-brand-weak:#B49E9B;
  --contact-muted:#6b6b6b;
  --contact-ok:#1b8a3c;
  --contact-err:#b00020;
}

html, body { margin:0; padding:0;
font-size: 100%;}
body{
  font-family: "Zen Old Mincho", serif;
  font-size:0.95em;
  line-height: 1.5;
  letter-spacing: .04em;
  font-weight: 500;
  color:var(--clr-text);
  background-color: var(--clr-bg);
  text-align: center;
  -webkit-text-size-adjust: 100%; /* Safariなど */
  text-size-adjust: 100%;      /* そ�?他�?ブラウザ */

}
.inner{ padding: 80px 60px 100px; }

h2{
  font-family: "Allura", cursive;
  font-weight: 400;
  font-size:72px;
  color: var(--clr-accent);
}
.Eng{ font-family: "Allura", cursive; font-weight: 400; }

/* =====================
   Header
===================== */
header{
  position: fixed; inset: 0 0 auto 0;
  width: 100%;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 30px;
  background: transparent;
  z-index: 1000;
}
header .logo{ height:30px; width:auto; opacity: 0.7;}

/* CTA button (top-right) */
.outContact-btn{
  position: fixed; top:-8px; right:20px;
  padding:5px; background:rgba(230,131,138,0.9); 
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: all .2s ease;
}
.contact-btn{
  display:inline-block; padding:20px 30px;
  font-size:16px; font-weight:700; text-decoration:none;
  color:#fff; border:1px solid #D2C78C; 
}
.outContact-btn:hover{ background:#0D122E; }
.outContact-btn:hover .contact-btn{
  color:#D2C78C; border-color:#D2C78C;
}

/* =====================
   Top image
===================== */
.topimage picture, .topimage img{ width:100vw; height:auto; display:block; }

/* =====================
   Catch / points
===================== */
.catch{ padding:20px 10px 40px; }
.catch h2{
  font-weight:700; font-size:1.4em; line-height:1.5; letter-spacing:.02em;
  margin:16px auto; font-family:"Zen Old Mincho", serif;
}
.catch h2 span{ font-weight:700; font-size:1.3em; line-height:1.4; letter-spacing:.02em; color:var(--clr-accent-2);display: block; margin: 40px auto -10px; }
.catch .ctaPointSet{
  display:flex; flex-wrap:wrap; justify-content:space-evenly;
  max-width:1100px; margin:0 auto;
}
.catch .ctaPoint{
  width:350px; background:url("../images/point-back.png") no-repeat center / contain;
  padding:20px 30px; margin:1px;
}
.catch .pointEng{ font-family:"Allura", cursive; font-size:1.7em; line-height:1; color:var(--clr-accent); margin:-10px auto 0; }
.catch .pointEng span{ font-size:2.5em; padding:0 6px; }
.catch h3{ font-size:1.1em; line-height:1.4; letter-spacing:.02em; font-weight:700; margin:0 0 10px; color:var(--clr-accent-2); }
.catch p{ font-size:1em; }
.catch img{ width:90%; margin:20px auto 30px; }

/* =====================
   Price
===================== */
.price{ background:#E8E8E8 url("../images/flowerish.png") 0% -20px / auto; }
.price img{ width:450px; max-width:95%; margin:20px auto 30px; }
.dvdArea,.photoArea{
  background-color: rgba(250,251,252,.3);
  padding: 10px 30px 40px; width:95%; max-width:1100px; margin:30px auto;
}
.dvdArea{ margin:30px auto 60px; }
.InSet{
  width:95%; max-width:700px; margin:60px auto 120px; text-align:center; padding:20px;
  border-left:3px dotted var(--clr-frame); border-right:3px dotted var(--clr-frame);
  background: rgba(245,245,245,.95); background-clip: padding-box;
}
.dvdArea h3, .InSet h3{
  font-family:"Allura", cursive; font-weight:400; letter-spacing:.07em; font-size:3em; line-height:1.5;
  color:#645541; margin:-50px auto 0;
}
.planTittle h3{color: #b19d84;}
.dvdphoto .innerSet{ display:flex; justify-content:space-evenly; margin:0 auto 10px; }
.dvdphoto .innerSet img{ width:300px; }
.dvdphoto .innerSet .dvdInsetText{
  font-family:"Zen Kaku Gothic New", sans-serif; font-weight:400; font-size:1em; line-height:1.6; text-align:left;
}
.dvdphoto .innerSet .present{
  font-family:"Zen Old Mincho", serif; font-size:.9em; line-height:1.5; color:#423637; text-align:center;
  border:1px solid var(--clr-frame); margin:12px 5px 0; padding:5px 15px;
}

/* Plan cards */
/* -----------SP----------- */
@media screen and (max-width: 768px) {
.dvdPlanSet{
  max-width:1000px;
  align-items:center;
  justify-content:center;
  gap:1px;
  margin:0 auto 10px;
}
.dvdPlanCard{
  box-sizing:border-box;
  width:70%;
  aspect-ratio:330/417;
  background:url("../images/plan-box.png") no-repeat center / 100% 100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 5px auto;
}
.dvdPlanCard__inner{ 
  display:flex;
  flex-direction:column;
  align-items:center;
  width: 80%;
}
.dvdPlanCard.total{
  width:90%;
  aspect-ratio:385/563;
  background-image:url("../images/plan-box2.png");
}
.dvdPlanCard.total .dvdPlanCard__inner{ justify-content:center; }
.dvdPlanCard__inner ul{ list-style:disc; padding-left:1.2em; }

.dvdPlanCard .planTittleEn{
  font-family:"Allura", cursive;
  font-weight:400;
  font-size:8vw;
  color:var(--clr-frame);
  margin:5% auto 0;
}
.dvdPlanCard.total .planTittleEn{
  margin:20px auto 10px;
  font-size:8vw;
}
.dvdPlanCard__ttl{ 
  font-weight:700;
  font-size:6vw;
  line-height:1.2;
  margin:1% auto 2% auto;
}
.dvdPlanCard__ttl .dvdPlanCard__sub{
  display:block;
  font-weight:400;
  font-size:4vw;
  margin-bottom:.3em;
}

.placeBox{
  width:90%;
  color:#fff;
  background:#423637;
  margin:1% auto 2% auto;

}
.placeBox p{
  font-family:"Zen Kaku Gothic New", sans-serif;
  font-weight:500;
  font-size:6vw;
  line-height:1.6;
  margin:0;
}
.totalPlace p{
  font-family:"Zen Kaku Gothic New", sans-serif;
  font-weight:400;
  font-size:3.5vw;
  line-height:1.6;
  margin:0;
}
.placeBox span{ font-weight:400; font-size:.6em; line-height:1.6; }

.planText{
  font-family:"Zen Kaku Gothic New", sans-serif;
  font-weight:400;
  font-size:3.7vw;
  line-height:1.3;
}
.dvdphoto ul{ list-style:disc; padding-left:1.2em; }
.dvdphoto li::marker{ color:#7F686A; font-size:.9em; }
.planText p{ margin:5px; }
.planText ul{ text-align:left; }
}

/* -----------PC----------- */
@media (min-width: 768px) {
.dvdPlanSet{
	max-width:1000px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:1px;
	margin:0 auto 10px;
}
.dvdPlanCard{
	box-sizing:border-box;
	width:30%;
	aspect-ratio:330/417;
	background:url("../images/plan-box.png") no-repeat center / 100% 100%;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	margin: 5px auto;
}
.dvdPlanCard__inner{ 
	/*position:absolute;
	inset:20px 30px;*/
	display:flex;
	flex-direction:column;
	align-items:center;
	width: 80%;
}
.dvdPlanCard.total{
	width:35%;
	aspect-ratio:385/563;
	background-image:url("../images/plan-box2.png");
}
.dvdPlanCard.total .dvdPlanCard__inner{ justify-content:center; }
.dvdPlanCard__inner ul{ list-style:disc; padding-left:1.2em; }

.dvdPlanCard .planTittleEn{
	font-family:"Allura", cursive;
	font-weight:400;
	font-size:2vw;
	color:var(--clr-frame);
	margin:10% auto 0;
}
.dvdPlanCard.total .planTittleEn{ margin:20px auto 10px; font-size:2vw; }
.dvdPlanCard__ttl{ 
	font-weight:700;
	font-size:1.6vw;
	line-height:1.2;
	margin:1% auto 2% auto;
}
.dvdPlanCard__ttl .dvdPlanCard__sub{ display:block; font-weight:400; font-size:.6em; margin-bottom:.3em; }

.placeBox{
	width:90%;
	color:#fff;
	background:#423637;
	margin:1% auto 2% auto;
}
.placeBox p{
	font-family:"Zen Kaku Gothic New", sans-serif;
	font-weight:500;
	font-size:1.8vw;
	line-height:1.6;
	margin:0;
}
.totalPlace p{
	font-family:"Zen Kaku Gothic New", sans-serif;
	font-weight:400;
	font-size:1.5vw;
	line-height:1.6;
	margin:0;
}
.placeBox span{ font-weight:400; font-size:.6em; line-height:1.6; }

.planText{
	font-family:"Zen Kaku Gothic New", sans-serif;
	font-weight:400;
	font-size:1.1vw;
	line-height:1.3;
}
.dvdphoto ul{ list-style:disc; padding-left:1.2em; }
.dvdphoto li::marker{ color:#7F686A; font-size:.9em; }
.planText p{ margin:5px; }
.planText ul{ text-align:left; }
}


/* Photo price */
.price .photoArea .priceArea img{ width:95%; max-width:400px; margin:20px auto 0; }
.price .photoArea .InSet{ margin-bottom:10px; }
.photoArea .priceArea{ text-align:center; width:90%; max-width:400px; margin:0 auto; }
.photoArea .priceArea .photPrice{ display:flex; justify-content:center; align-items:center; }
.photoArea .priceArea .photPrice img{ width:100px; margin:30px 10px 20px; }
.photoArea .priceArea .photPrice p{ font-family:"Zen Kaku Gothic New", sans-serif; font-weight:400; font-size:1em; }
.photoArea .priceArea .photPrice p span{
  font-family:"Zen Kaku Gothic New", sans-serif; font-weight:600; font-size:2em; letter-spacing:.04em; margin:0 5px; vertical-align:-0.1em;
}
.priceSubtext{ width:90%; max-width:600px; text-align:left; color:#755E5B; font-size:.9em; margin:10px auto; }

/* Net shop banner */
.WebSell{
  width:100%; max-width:900px; box-sizing:border-box;
  aspect-ratio:1100/415;
  background:url("../images/price-net.png") no-repeat center / 100% 100%;
  position:relative; display:flex; align-items:center; justify-content:center;
  margin:30px auto;
}
.WebSellInner{
  position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  font-family:"Zen Kaku Gothic New", sans-serif; text-align:left;
}
.WebSell h3{ display:block; font-weight:500; font-size:1.2em; line-height:1.3; width:90%; padding:0 10px 16px 120px; margin-top:-10px; }
.WebSell p { display:block; font-weight:400; font-size:.9em; line-height:1.5; width:90%; padding:0 10px 10px 120px; }


/* ==== Banner only: deep-blue shadow + hover grayscale ==== */
/* ?�x?�[?�X */
.responsive-banner { display:inline-block; line-height:0; max-width: 700px;}
.responsive-banner img { width:100%; height:auto; display:block; }

/* ?�?�?�o?�C?�?�?�i?�?�?�?�?�j?�FSP?�?�?�\?�?�?�APC?�?�?�?�?�\?�?� */
.responsive-banner img.sp { display:block !important; }
.responsive-banner img.pc { display:none  !important; }

/* 750px?�ȏ�?�FPC?�?�?�\?�?�?�ASP?�?�?�?�?�\?�?� */
@media (min-width: 750px){
  .responsive-banner img.sp { display:none  !important; }
  .responsive-banner img.pc { display:block !important; }
}

.banner a{
	margin: 0 10px 0;
  display: inline-block;
  box-shadow: 0 5px 5px rgba(13,18,46,.45); 
  overflow: hidden;    
	transition:transform .25s ease, box-shadow .25s ease; 
}
.price .banner img{
	width: 100% ;
	max-width: 100%;
	margin: 0 auto;
	height: auto;	
	  display: block;                           
  transition: filter .25s ease;     
}
.banner a:hover img{
transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(13,18,46,.60);
}




/* =====================
   Staff
===================== */
.staff{ width:100%; background:#FAFBFC; }
.staff h3{ font-weight:600; font-size:1.2em; color:var(--clr-accent-2); }
.staff p{ 
    font-weight: 600;
    font-size: 0.9rem;
    color: #666;
    width: 80%;
    margin: 3% auto;
   }
.staff img{ width:350px; margin:10px 0 60px; }



.staff .staffSet{ max-width:800px; margin:0 auto; display:flex; justify-content:space-evenly; flex-wrap:wrap; }
.staff .staffSet .stafBox{ flex:0 0 100px; width:100px; text-align:center; margin:0 20px 10px; }
.staff .stafBox img{ width:95%; margin:auto; }
.staff .stafBox p{ font-weight:600; font-size:.9em; color:#666; margin:10px auto; }

/*
 Balloon on hover 
.stafBox{ position:relative; display:inline-block; }
.stafBox .balloonOne{
  position:absolute; display:none; width:290px; left:-80%; top:80%;
  padding:10px; font-size:90%; background:rgba(255,255,255,.9); border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.08); z-index:10;
	text-align: left;
}
.stafBox:hover .balloonOne{ display:block; }
.stafBox .balloonOne::after{
  content:""; position:absolute; top:-12px; left:5%;
  border-bottom: 10px solid rgba(255,255,255,.9); border-left:10px solid transparent; border-right:10px solid transparent;
}
/* ===== Staff balloon / details版：PCはhover、スマ�?�Eはtap ===== */

/* ===== Staff balloon?�E?�PC=hover / SP=click ===== */
/* ==== Staff balloon?�E?�PC=hover / SP=中央固定＋矢印だけ画像丁E==== */

/* =====================
  works 
===================== */



section.works h3{ font-weight:600; font-size:1.2em; color:var(--clr-accent-2);line-height: 24px; }

p.worksTitJa {margin: -25px auto 20px;font-size: .9em;}

h4.inworks{font-size: 1em;
	font-weight: 600;
	margin: 20px 0 10px;
	color: #645541;
}

/* ?�?�?�X?�g?�?�?�̂�?��?�Z?�b?�g */
ul.crlist{ list-style:none; margin:0; padding:0; }
ul.crlist li{
  display:flex;
  align-items:center;
  gap:.1em;
  width:fit-content;   /* ?�?�?�g?�T?�C?�Y?�?� */
  margin:8px auto;       /* ?�?�?�?�?�?�?�?� */
}
/*ul.crlist li::before
{ 
  content:"";
  flex:0 0 auto;
  width:30px; height:15px;
  background:url("../images/dire2.png")  no-repeat center / 60% 60%;
}

ul.crlist li::after{ 
  content:"";
  flex:0 0 auto;
  width:30px; height:15px;
  background:url("../images/dire2_right.png")  no-repeat center / 60% 60%;
}*/

/* =====================
   FAQ 
===================== */
/* ?�܂Ƃ߂ăX?�R?�[?�v */
.faq{
	background-color: aliceblue;
	padding: 10%;
}
.faqText{
	max-width: 700px;margin: auto;
}
.faq h2{	
	color: #3d3d3d;
	font-size: 1.5em;
	font-weight: 700;
	line-height:1.5; letter-spacing:.02em;
  margin:16px auto 40px ; font-family:"Zen Old Mincho", serif;
}
.faq h3{
	text-align: left;
  margin: 26px 0 20px;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 700;
  color:#5C0829;
/*
	display:inline-flex;           ?�?�?�?�?�?�??�?�?�?�?�?�?�?� 
  align-items:flex-start; 
*/
  gap:.4em;  
}
.faq h3::before{
  content:"?";                  /* ?�\?�?�?�?�?�?�?�镶?�?� */
  font-family: "Mea Culpa", cursive;
	color: #ed767e;
  font-size:2em;              /* ?�傫?�?�?�͂�?�D?�݂� */
  line-height:0.8;
  opacity:.6;
 margin: 0 8px -10px -3px;
}

.faq-item { border-bottom: 1px solid #eee; text-align: left;padding: 2px;}



/* ?�g?�O?�?�?�?�?�?� */
.faq-item > summary {
  list-style: none;                 /* ?�?�?�?�?�?�??�?�?�?�?�?�?�?�?�?� */
  cursor: pointer;
  font-weight: 600;
  /*padding: 16px 0 20px;    ?�E?�]?�?�?�͖�?�?�?�p */
  position: relative;
}

/* WebKit?�?�??�?�?�?�?�?�?�iChrome/Safari?�j */
.faq-item > summary::-webkit-details-marker { display: none; }

/* ?�^?�?�?�A?�C?�R?�?�?�i?�‚�?�Ă�?�鎞�?�?�A?�J?�?�?��?��?�j */
/* ?�E?�[?�̖�?�?�?�摜�ɍ�?�?�?�ւ� */
.faq-item > summary{
  position: relative;
  padding-right: 2rem;padding: 8px 30px 10px 0;                /* ?�?� ?�摜�Ԃ�?�̗]?�?� */
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::before{
  content: "Q";
    
	color: #ed767e;
  font-size:1.1em;              /* ?�傫?�?�?�͂�?�D?�݂� */
  opacity:.8;
 margin: 0 8px 0 -3px;
  
}

.faq-item > summary::after{
  content: "";
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);        /* ?�c?�?�?�?�?�?�?�?� */
  width: 16px;                        /* ?�?�?�?�?�?�?�ʼn摜?�T?�C?�Y?�?�?�?� */
  height: 16px;
  background: url("../images/open.png") no-repeat center / contain;
  transition: transform .2s ease;
}

/* ?�J?�?�?�?�?�?�?�͉摜?�?�?�?�?�]?�i?�?�?�Ɍ�?�?�?�?�?�j */
/* ?�ʉ摜?�?�?�g?�?�?�Ȃ� background-image ?�?�?�?�?�?�?�ւ�?�Ă�OK */
.faq-item[open] > summary::after{
  transform: translateY(-50%);
  /* ?�?�?�F?�ʃt?�@?�C?�?�?�?�?�g?�?�?��?*/
  background-image: url("../images/close.png");
}
.faq-a{
	font-size: 0.9em;
	padding: 1% 0 2.5% 2.5%;
}

/*
 ?�?�?�i?�J?�?�?�Ă�?�鎞�j 
.faq details[open] > summary::after{
  background: url("../images/close.png") no-repeat center / contain;
}
*/



/* =====================
   Contact form 
===================== */
.contact-wrap{ max-width:860px; margin:clamp(24px,10vw,60px) auto; padding:0 16px; }


.contact h2{
  font-family: "Allura", cursive;
  font-weight: 400;
  font-size:72px;
  color: var(--clr-accent);
}
p.contactTitJa{
	margin: -25px auto 20px;font-size: .9em;
}
p.contact-lead{
	padding: 0 20px 10px;
}
p.contact-lead a{
	text-decoration: underline;
	color: blue;
}
p.contact-lead a:hover{
	text-decoration: none;
	color: #000;
}
.contact-form{
  background:#fff; border:1px solid #e9e9e9; border-radius:16px;
  padding:clamp(16px,3.5vw,28px); box-shadow:var(--shadow); text-align:left;
}


.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2.4vw,22px); }
.mb-only{ display:none; }



/* =====================
  footer 
===================== */

footer{
	background: #404040;
	padding: 60px;
	text-align: left;
	color: aliceblue;
}
.footCompny{
	margin: 2em 0;
	border-bottom: 1px solid;
	padding-bottom: 4em;
} 
.footCompny a img{
	width: 118px;
}

.footCompny h2{font-size:0;margin:13px 0; }
.footCompny h3{margin:10px 0;font-size: 1.1em;  }
.footCompny p{
	margin:10px 0 30px 0;
	font-size: 0.9em;
	letter-spacing: 0.05em;
	line-height: 2;
}
p.company-name{font-size: 1.2em}
.company-info p{
	margin:10px 0;line-height: 1.7;
}
.footerPartner{  
    margin: 4em auto 0;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    position: relative;
}
.footerPartner img.logo{
  height: 37px;
}
.footerPartner img{
	height: 30px;
    margin: 0 10px;
}
.footerPartner img.banner-foot{
	height: 120px;
}


	/* =====================
  mobile 850 WebSell  ↁE
===================== */
@media (max-width:850px){



	.WebSell{
  width:90%; max-width: 550px; box-sizing:border-box;
   aspect-ratio:801/733;
  background:url("../images/price-net800-35.png") no-repeat center / 100% 100%;
  position:relative; display:flex; align-items:center; justify-content:center;
  margin:30px auto;
		padding: 10px 0;
}
	.WebSell h3{
  display: block;
  font-weight: 500;
  font-size: 4vw;
  line-height: 1.3;
  width: 90%;
  padding: 5px 20px 10px;
  margin: 20% auto 0 auto;
  }
.WebSell p { display:block; font-weight:400; font-size:.9em; line-height:1.5; width:90%; padding:0 20px; }

}
	
	
/* =====================
   mobile 768pxↁE
===================== */


@media (max-width:768px){
	
header{
 padding:4px 20px;
  }

	/* =====================
   mobile .catch ↁE
===================== */
	
.catchTx p{ text-align: left;}
	
	
	
	.inner{ padding: 80px 0 100px; }
.contact-btn{
  display:inline-block; padding:10px 15px;
}
.dvdArea,.photoArea{
    padding: 10px 0 40px; width:95%; 
}

	
.catch h3{ font-size:1.3em; line-height:1.5; letter-spacing:.02em; font-weight:700; margin:5px 0 3px; color:var(--clr-accent-2); }
.catch p{ font-size:.9em; }
.catch img{ width:90%; margin:20px auto 30px; }
	
	
	
		/* =====================
   mobile photo price ↁE
===================== */
	
	.photoArea .priceArea .photPrice img{  margin:0; }
.photoArea .priceArea .photPrice p span{
  margin:0 0 0 -50px; 
}

	/* =====================
   ネット販売 ↁE
===================== */
/*	.WebSell{
  width:100%; max-width:900px; box-sizing:border-box;
  aspect-ratio:1100/415;
  background:url("../images/price-net850-33.png") no-repeat center / 100% 100%;
  position:relative; display:flex; align-items:center; justify-content:center;
  margin:30px auto;*/
}
	
	
	.form-grid{ grid-template-columns:1fr; } 
.form-field{ display:block; }
.form-field > span{ display:block; font-weight:700; margin-bottom:6px; color:#333; }
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=tel],
.form-field input[type=date],
.form-field select,
.form-field textarea{
  width:100%; border:1px solid #ddd; border-radius:10px; padding:12px 14px; font-size:16px; background:#fff;
}
.form-field textarea{ resize:vertical; min-height:150px; }

/* 横幁E?�?�っぱぁE?�?�したぁE?�?�E*/
.form-field--wide{ grid-column: 1 / -1; }

/* 同意チェチE?�?� */
.form-agree{ grid-column: 1 / -1; display:flex; align-items:center; gap:8px; font-weight:600; }
.form-agree input{ transform: scale(1.1); }

/* 送信ボタン */
.form-actions{ grid-column: 1 / -1; margin-top:10px; }
.btn{
  appearance:none; border:none; cursor:pointer; font-weight:700;
  padding:14px 26px; border-radius:999px; background:var(--contact-brand);
  color:#fff; transition:transform .1s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 6px 14px rgba(117,94,91,.28);
}
.btn.-primary{ background:var(--contact-brand); }
.btn:hover{ transform:translateY(-1px); background:var(--contact-brand-weak); }
.btn:active{ transform:translateY(0); }

/* 送信後フラチE?�?�ュ */
.contact-flash{ border-radius:16px; padding:14px 16px; margin:12px 0 20px; border:1px solid; background:#fff; }
.contact-success{ color:var(--contact-ok);  border-color:var(--contact-ok); }
.contact-alert  { color:var(--contact-err); border-color:var(--contact-err); }

/* ハニーポッチE*/
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* =====================
   Helpers / Responsive
===================== */

@media screen and (max-width:768px){
  .mb-only{ display:inline; }
  .dvdphoto .innerSet{ display:block; }
}
		/* =====================
   ネット販売封EↁE
===================== */
@media (max-width:400px){

	.WebSell{
  width:90%; max-width:900px; box-sizing:border-box;
  aspect-ratio:465/733;
  background:url("../images/price-net450-34.png") no-repeat center / 100% 100%;
  position:relative; display:flex; align-items:center; justify-content:center;
  margin:30px auto;
		padding: 10px 30px 0;
}
.WebSell h3{ display:block; font-weight:500; font-size:1.2em; line-height:1.3; width:90%; padding:0 20px; text-align: left; }
.WebSell p { display:block; font-weight:400; font-size:.9em; line-height:1.5; width:90%; padding:10px 20px; text-align: left;}
	.dvdArea h3, .InSet h3{
  font-size:10vw; 
}
	
}
	

/* ============================
   Staff Balloon (stafBox) ?�S?��?��?�Z?�b?�g
   PC: hover?�ŊJ?�?�
   ?�?�?�o?�C?�?�: .is-open ?�ŊJ?�iJS?�ŕt?�^?�z?�?�?�j
   850px?�ȉ�: ?�{?�b?�N?�X?�?�?�?�?�Œ�?�^?�?�?�͉�?�ӁE?�摜�?�?�?�X?�ɍ�?�킹?�?�?�i--arrow-left?�g?�p?�j
   ============================ */

/* ?�x?�[?�X */
.stafBox{
  position: relative;
  display: inline-block;
  overflow: visible;
}
.stafBox .balloonOne{
  /* PC?�?�?�?�?�i?�J?�[?�h?�̉E?�゠?�?�?�?�?�ɏo?�?�?�z?�?�?�B?�K?�v?�Ȃ琔?�l?�?�?�?�?�j */
  position: absolute;
  left: -80%;
  top: 80%;
  display: none;
  width: 290px;
  padding: 10%;
  font-size: 90%;
  line-height: 1.6;
  background: rgba(255,255,255,.95);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  text-align: left;
  z-index: 9999;
}
.stafBox .balloonOne::after{
  /* PC?�ł́g?�?�?�?�?�?�?�?�?�h */
  content: "";
  position: absolute;
  top: -12px;
  left: 5%;
  border-bottom: 12px solid rgba(255,255,255,.95);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

/* --- PC?�F?�z?�o?�[?�ŕK?�?�?�\?�?�?�ihover?�ł�?�違�ׂ�?�|?�C?�?�?�^?�[?�?�?�j --- */
@media (hover:hover) and (pointer:fine){
  .stafBox:hover .balloonOne{ display: block !important; }
}

/* --- ?�^?�b?�`?�[?�?�?�Fhover?�?�?�?�?�?�?�{.is-open ?�?�?�?�?�ŕ\?�?� --- */
@media (hover:none), (pointer:coarse){
  .stafBox:hover .balloonOne{ display: none !important; } /* ?�^?�?�hover?�̌딽?�?�?�?�?�}?�~ */
  .stafBox.is-open .balloonOne{ display: block !important; }
}

/* --- 850px?�ȉ�?�F?�{?�b?�N?�X?�?�?�?�?�ʒ�?�?�?�ɌŒ�?�B?�?�?�͉�?�ӂցi--arrow-left?�?�X?�ʒu?�?�?�?�?�j --- */
@media (max-width: 850px){
  .stafBox .balloonOne{
    position: fixed !important;      /* ?�r?�?�?�[?�|?�[?�g?��? */
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 60% !important;            /* ?�D?�݂� 6?16vh ?�?�?�x?�?� */
    width: min(92vw, 520px);
    max-height: 76vh;
    overflow: hidden;
  }
  .stafBox .balloonOne::after{
    top: auto !important;
    bottom: -12px !important;        /* ?�?�?�ӂ�?�?�?�O?�֏o?�?� */
    left: var(--arrow-left, 50%) !important;  /* JS?�ʼn摜?�?�?�?�X(px)?�𗬂�?�?�?�ށB?�Ȃ�?�?�?�Β�?�?� */
    transform: translateX(-50%);
    border: 0;
    border-top: 12px solid rgba(255,255,255,.95);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
  }
  /* ?�?�?�o?�C?�?�?�?�?�ł̓N?�?�?�b?�N?�J?�‚Ɉ�?�{?�?� */
  .stafBox:hover .balloonOne{ display: none !important; }
  .stafBox.is-open .balloonOne{ display: block !important; }
}



/* ?�?�?�傢?�?�?�o?�i?�C?�Ӂj */
.stafBox .balloonOne{
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}
.stafBox .balloonOne[style]{ opacity: 1; } /* ?�ꕔ�u?�?�?�E?�U?�ł̏�?�?�?�`?�?�?�‚�?�}?�~ */


/* =====================
   privacypolicy
===================== */
#privacy_area{
	width: 70%;
	margin: 60px auto;
	display: block;
	text-align:left;
	font-weight: normal;
}
#privacy_area dl{
	margin: 3% 0 0 5%;
}
#privacy_area dt{
	margin: 20px 0 0 0;
}
#privacy_area dd{
	margin: 0 0 0 4%;
}

@media screen and (max-width: 768px) {
	#privacy_area{
	width: 90%;
}