@charset "utf-8";
body { margin:0; padding:0; font-family: 'garamond-premier-pro-caption', 'Noto Sans JP', sans-serif; font-size:16px; line-height:2.0em; color:#333; letter-spacing: 0.05em; }
body.fixed { width: 100%; height: 100%; position: fixed;}
h1 { font-size: 2.25em; line-height: 1.2em; letter-spacing: 0.05em; font-weight: 300; font-family: 'garamond-premier-pro-caption', "Noto serif JP", serif;}
h2 { font-size: 1.875em; line-height: 1.5em; font-weight: 500; letter-spacing: 0.05em; font-family: 'garamond-premier-pro-caption', "Noto serif JP", serif;}
h3 { font-size: 1.5em; line-height: 1.5em; letter-spacing: 0.05em; font-family: 'garamond-premier-pro-caption', "Noto serif JP", serif;}
h4 { font-size: 1.125em; line-height: 1.5em; letter-spacing: 0.05em;}
p, li { text-align:justify; text-justify:inter-ideograph; line-height:2.0em; font-weight: 400;}
strong, b { font-weight:bold;}
em { }
hr { display:none;}
caption, th, td { line-height: 1.5; font-weight:400;}
img { width: 100%; height: 100%; object-fit: contain; vertical-align: bottom; object-position: top;}
a { display: block;}
a:link, a:active { color:#333; text-decoration: none;}
a:hover, a:visited { color:#333; text-decoration: none;}
a:visited { color:#333;}

.clearfix:after { font-size:1px; content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { zoom:1;}

.mb0 { margin-bottom:0 !important;}
.red { color:#C00;}
.f12 { font-size:12px;}
.bold { font-weight: bold;}
.text-L { text-align: left;}
.text-C { text-align: center;}
.text-R { text-align: right;}

.winsize { display: none;}

/* delighter -----*/
/* 基本のスタイル */
.foo.delighter {
transition: all 0.4s ease-out;
opacity: 0;
}

/* スタート時のスタイル */
.foo.delighter.started {
transform: none !important;
opacity: 1;
}

.tabPhoneOnly { display: none;}
.phoneOnly { display: none;}



/* header -----------------*/
.header { width: 100%; position: relative; display: flex; justify-content: flex-end; height: 120px; overflow: hidden; z-index: 999;}
.header__logo { width: 50px; position: absolute; top: 40px; left: 50%; transform: translateX(-50%);}
.header__logo a { display: block;}
.header__sns { display: flex; margin-right: 50px; margin-top: 35px; gap: 20px;}
.header__sns-item { font-size: 1.125em;}
.header__sns-item a { width: 18px; height: 18px;}
.header__hum { position: relative; width: 120px; height: 120px; border-radius: 60px; border: 0.5px solid #333; cursor: pointer; padding: 45px 0; background-color: #fff; margin: -20px;}


.header__openBtn { display: block;  position: absolute; z-index: 999; width: 100%; height: 20px; left: 50%; transform: translateX(-50%);}
.header__openBtn.active { }
.header__openBtn span { display: inline-block; position: absolute; font-size: 1.125em; text-align: center;}
.header__openBtn span:nth-of-type(1), .header__openBtn span:nth-of-type(2), .header__openBtn span:nth-of-type(3) { display: inline-block; transition: all 0.4s; position: absolute; width: 100%;}
.header__openBtn span:nth-of-type(1) { top: 10px; right: 50px;}
.header__openBtn span:nth-of-type(2) { top: 8px;} 
.header__openBtn span:nth-of-type(3) { top: 25px; right: 50px;}
.header__openBtn.active span:nth-of-type(1) { transform: translate(10px,6px) rotate(-45deg); width: 35%; height: 0.5px; background-color: #333;}
.header__openBtn.active span:nth-of-type(2) { opacity: 0;}
.header__openBtn.active span:nth-of-type(3) { transform: translate(10px,-10px) rotate(45deg); width: 35%; height: 0.5px; background-color: #333;}
 
/*ナビゲーションメニュー*/
.header__nav { display: block; position: fixed; z-index: 999; top: 0; right: -120%; width: 30%; max-width: 300px; height: 100vh; background: #fff; transition: all 0.5s; padding: 120px 30px 0;}
.header__nav.panelactive { position: fixed; z-index: 99; right: 0; top: 0; box-shadow: 0 0 5px 0 rgb(0, 0, 0, 0.3);}
.header__nav-btn { width: 120px; height: 120px; border-radius: 60px; border:0.5px solid #333; position: absolute; top: -20px; right: -20px;}
.header__nav-menu { margin-bottom: 40px;}
.header__nav-menu-list { margin-bottom: 20px;}
.header__nav-menu-list:last-of-type { margin-bottom: 0;}
.header__nav-menu-list a { font-size: 1.125em;}
.header__nav-sns { display: flex; gap: 10px;}
.header__nav-sns-item { width: 24px; height: 24px; background-size: contain;}

/* footer -------------------*/
.footer { padding: 26px 30px; display: flex; justify-content: space-between; align-items: center; height: 80px;}
.footer__address { font-family: 'garamond-premier-pro-caption', 'Noto serif JP', sans-serif;}
.footer__address span { margin-right: 20px;}
.footer__address br { display: none;}
.footer__tel a { display: inline-block;}
.footer__copy { font-size: 0.75em; display: flex; justify-content: flex-end; align-items: center;}

/* 各ページタイトル -------------------*/
.page-title { text-align: center; margin-top: 50px;}
.page-title__breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin-bottom: 60px; font-size: 0.875em; padding: 0 50px;}
.page-title__breadcrumb li { position: relative; line-height: 1.5em;}
.page-title__breadcrumb li a { display: inline;}
.page-title__breadcrumb li::after { content: ">"; position: absolute; top: 45%; right: -14px; transform: translateY(-50%);}
.page-title__breadcrumb li:last-of-type::after { display: none;}
.page-title__text { font-size: 2.0em; margin-bottom: 60px;}
.page-title__text span { font-size: 0.875rem; margin-top: 15px; display: block;}
.page-title__outline { max-width: 1000px; padding: 0 50px; margin: 0 auto 60px; text-align: center;}

/* bottom-area -------------- */
.bottom-area { background-color: #f2efea; padding: 80px 50px; position: relative; overflow: hidden;}
.bottom-area__backBtn { position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width: 120px; height: 120px; border-radius: 60px; background-color: #fff; border: 0.5px solid #333;}
.bottom-area__backBtn a { padding: 50px; font-size: 1.125em;}
.bottom-area__btn { border: 0.5px solid #333; margin: 0 auto 25px; position: relative; background-color: #fff; width: 590px;}
.bottom-area__btn:last-of-type { margin-bottom: 0;}
.bottom-area__btn::after { content: ""; display: block; background-image: url("../img/btn_icon01.png"); background-size: contain; position: absolute; top: 50%; right: 50px; transform: translateY(-50%); width: 20px; height: 18px; background-repeat: no-repeat; background-position: center;}
.bottom-area__btn:last-of-type::after { background-image: url("../img/btn_icon02.png");}
.bottom-area__btn:hover { border: 0.5px solid #d2d61a; background-color: #d2d61a;}
.bottom-area__btn a { display: block; padding: 30px 40px; font-size: 1.125em;}

@media print, screen and (max-width:1023px){
/* header ----------------*/
  .header__nav { width: 50%;}
  
/* 各ページタイトル -------------------*/
.page-title__outline { text-align: justify;}
  
/* bottom-area -------------- */
  .bottom-area__btn { width: 70%;}
}


@media print, screen and (max-width:767px){
/* header ----------------*/
  .header__sns { display: none;}
  .header__nav { width: 70%;}
  
/* bottom-area -------------- */
  .bottom-area { padding: 80px 130px 80px 50px;}
  
/* footer -------------------*/
  .footer { height: auto; align-items: flex-end; padding: 30px 50px;}
  .footer__address { line-height: 1.5em;}
  .footer__address br { display: block;}
  
/* 各ページタイトル -------------------*/
  .page-title__outline { padding: 0 80px;}
  
/* bottom-area -------------- */
  .bottom-area__btn { width: 100%;}
}


@media print, screen and (max-width:480px){
/* header -----------------*/
  .header__logo { width: 40px; top: 30px;}
  .header__nav { width: 100%; height: 100vh;}
  .header__hum { width: 100px; height: 100px; border-radius: 50px; padding: 34px 0;}
  .header__nav-btn { width: 100px; height: 100px; border-radius: 50px; top: -20px; right: -20px;}
  .header__openBtn span:nth-of-type(1) { right: 42px;}
  .header__openBtn span:nth-of-type(3) { right: 42px;}
  
/* footer -------------------*/
  .footer { padding: 20px 4%;}
  
/* 各ページタイトル -------------------*/
  .page-title { margin-top: 10px;}
  .page-title__breadcrumb { margin-bottom: 40px; padding: 0 4%;}
  .page-title__outline { padding: 0 50px; text-align: justify;}

  
/* bottom-area -------------- */
  .bottom-area { padding: 40px 100px 40px 4%;}
  .bottom-area__backBtn { width: 100px; height: 100px; border-radius: 50px;}
  .bottom-area__backBtn a { padding: 40px;}
  .bottom-area__btn a { padding: 30px;}
  .bottom-area__btn::after { right: 30px;}
}