@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------
　基本設定
--------------------------------------------------------*/
html{ font-size: 62.5%;}

body {
	width: 100%;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "YuMincho", "Noto Serif JP", "Hiragino Mincho ProN", "serif";
	color:#000;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 400;
	font-feature-settings: "palt";
	text-align: justify;
	background:#FFF;
	line-height:1.6;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

img{
	width: 100%;
	height: auto;
}
img { -ms-interpolation-mode: bicubic; }

a{
	text-decoration: none;
	outline: none;
}

a:hover{
	text-decoration: none;
}

header,main,footer {
	width: 100%;
}

footer {
	text-align: center;
	background: #FFF;
}

main{
	contain: paint;
}

.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.cormorant {
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.bodoni-moda {
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body.modal-open {
	overflow: hidden;
}

/* これが重要：カスタムプロパティをアニメ可能にする */ 
@property --reveal { 
	syntax: '<percentage>'; inherits: false; initial-value: 0%; 
} 
@property --feather { 
	syntax: '<percentage>'; inherits: false; initial-value: 20%; /* ふちの柔らかさ（お好みで 8〜20% 程度） */ 
}
.mask { overflow: hidden; }

/* 角度をそろえる（160degに統一）＋ 遅延を付ける */
.mask-reveal .mask-target {
  display: block;
  width: 100%;
  height: auto;

  --reveal: 0%;
  --feather: 70%;

  -webkit-mask-image: linear-gradient(
    160deg,
    #000 0%,
    #000 calc(var(--reveal) - var(--feather)),
    rgba(0,0,0,0.85) var(--reveal),
    transparent calc(var(--reveal) + var(--feather))
  );
          mask-image: linear-gradient(
    160deg,
    #000 0%,
    #000 calc(var(--reveal) - var(--feather)),
    rgba(0,0,0,0.85) var(--reveal),
    transparent calc(var(--reveal) + var(--feather))
  );
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;

  /* ▼ここがポイント：--reveal に“遅延”を付ける（例：0.35s） */
  transition: --reveal 4s cubic-bezier(.22,.61,.36,1) 0.35s;
}

/* 画面に入ったらマスク境界を押し出す */
.mask-reveal.is-inview .mask-target {
  --reveal: 120%;
}

/* （任意）より“ふわっ”に：薄いフェードも足す場合は上に追記せず、下を追加 */
.mask-reveal .mask-target {
  opacity: 0;                                   /* 初期はうっすら隠す */
  transition:
    --reveal 4s cubic-bezier(.22,.61,.36,1) 0.35s,
    opacity 1.0s ease 0.20s;                    /* フェードは少し早めに開始 */
}
.mask-reveal.is-inview .mask-target {
  opacity: 1;
}

/* フォールバック（mask非対応時はフェードのみ） */
@supports not ((mask-image: linear-gradient(#000, transparent))) {
  .mask-reveal .mask-target { opacity: 0; transition: opacity 1.0s ease 0.2s; }
  .mask-reveal.is-inview .mask-target { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mask-reveal .mask-target { transition-duration: .01ms !important; }
}


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

@media print, screen and (min-width: 749px){
	.sp{
		display: none!important;
	}
	
	a.tel[href^="tel:"] {
       pointer-events: none;
       text-decoration: none;
    }
	
	body {
		padding-top: 130px;
	}
	
	a.opacity {
		transition-duration: 0.5s;
		transition-property: opacity, color;
	}
	
	a.opacity:hover {
		opacity: 0.5;
	}
	
	header {
		width: 100%;
		height: 8.66vw;
		max-height: 130px;
		position: fixed;
		top: 0;
		left: 0;
		z-index : 9999;
		background: rgba(255,255,255,.7);
		padding-top: 26px;
	}
	
	header div.h_inner{
		width: 92.6%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	
	header div.h_inner h1{
		width: 10.53vw;
		max-width: 158px;
		line-height: 0;
		position: absolute;
		left: 3.7%;
		top: 20%;
	}
	
	header div.h_inner h1 a{
		transition-duration: 0.5s;
		transition-property: opacity, color;
	}
	
	header div.h_inner h1 a:hover{
		opacity: 0.5;
	}
	
	header div.h_inner nav.globalMenu {
		width: 38.2%;
		padding-top: 7px;
	}
	
	header div.h_inner nav.globalMenu ul.box_inner{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	header div.h_inner nav.globalMenu ul.box_inner li{
		display: inline-block;
		font-family: "Cormorant";
		font-size: 1.8rem;
		font-size: clamp(0.9rem, 1.2vw, 1.8rem);
		font-weight: 400;
		line-height: 1;
	}
	
	header div.h_inner nav.globalMenu ul.box_inner li a{
		color: #000;
	}
	
	header div.h_inner nav.globalMenu ul.box_inner li:last-of-type a{
		border: 1px solid #000;
		border-radius: 25px;
		padding: 0.2em 1em;
		display: block;
		overflow: hidden;
		position: relative;
		transition-duration: 0.5s;
		transition-property: opacity, color;
		margin-top: -0.25em;
	}
	
	header div.h_inner nav.globalMenu ul.box_inner li:last-of-type a::before{
		content: "";
		width: 100%;
		height: 100%;
		background: #000;
		display: block;
		position: absolute;
		top: 0;
		left: -100%;
		z-index: -1;
		transition: all .5s ease;
	}
	
	header div.h_inner nav.globalMenu ul.box_inner li:last-of-type a:hover{
		color: #FFF;
	}
	
	header div.h_inner nav.globalMenu ul.box_inner li:last-of-type a:hover::before{
		content: "";
		left: 0;
	}
	
	article {
		width: 100%;
	}
	
	div.page_title {
		margin: 0 auto;
		padding: 4vw 11.8%;
		margin-bottom: 4vw;
	}
	
	section {
		width: 100%;
		margin: 0 auto;
	}
	
	div.page_title h2,
	section h2{
		font-family: "Cormorant";
		font-size: 6.0rem;
		font-size: clamp(3.0rem, 4vw, 6.0rem);
		font-weight: 400;
		line-height: 1.3;
	}
	
	div.page_title h2 small,
	section h2 small{
		font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "YuMincho", "Noto Serif JP", "Hiragino Mincho ProN", "serif";
		font-size: 28.3%;
		display: block;
	}
	
	article span.more_icon {
		display: inline-block;
		border: 1px solid #000;
		border-radius: 25px;
		padding: 12px 12px 12px;
		line-height: 0;
	}
	
	article span.arrow {
        position: relative;
        display: inline-block;
		width: 21.33vw;
		max-width: 32px;
        height: 1px;
        border-radius: 9999px;
        background-color: #000;
    }

    article span.more_icon span.arrow::before {
        content: "";
        position: absolute;
        top: calc(50% - 0.5px);
        right: 0;
        width: 1.93vw;
		max-width: 14px;
        height: 1px;
        border-radius: 9999px;
        background-color: #000;
        transform: rotate(45deg);
        transform-origin: calc(100% - 0.5px) 50%;
    }
	
	footer {
		padding: 3vw 0;
	}
	
	footer p{
		font-size: 1.5rem;
		font-size: clamp(0.75rem, 1vw, 1.5rem);
		line-height: 1;
	}
}

@media screen and (max-width: 1500px){
	body {
		padding-top: 8.66vw;
	}
	header {
		padding-top: 1.73vw;
	}
}
	

/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

@media screen and (max-width: 748px){
	/*360-748px(基準375)
	
	font-size: 6.5rem;
    font-size: clamp(6.240rem, calc(6.240rem + 1.733vw), 12.965rem);
	
	font-size: 4.0rem;
    font-size: clamp(3.840rem, calc(3.840rem + 1.067vw), 7.979rem);
	
	font-size: 2.4rem;
    font-size: clamp(2.304rem, calc(2.304rem + 0.640vw), 4.787rem);
	
	font-size: 2.2rem;
    font-size: clamp(2.112rem, calc(2.112rem + 0.587vw), 4.388rem);
	
	font-size: 2.0rem;
    font-size: clamp(1.920rem, calc(1.920rem + 0.533vw), 3.989rem);
	
	font-size: 1.8rem;
    font-size: clamp(1.728rem, calc(1.728rem + 0.480vw), 3.590rem);
	
	font-size: 1.75rem;
    font-size: clamp(1.680rem, calc(1.680rem + 0.467vw), 3.491rem);
	
	font-size: 1.6rem;
    font-size: clamp(1.536rem, calc(1.536rem + 0.427vw), 3.191rem);
	
	font-size: 1.55rem;
    font-size: clamp(1.488rem, calc(1.488rem + 0.413vw), 3.092rem);
	
	font-size: 1.5rem;
    font-size: clamp(1.440rem, calc(1.440rem + 0.400vw), 2.992rem);

    font-size: 1.45rem;
    font-size: clamp(1.392rem, calc(1.392rem + 0.387vw), 2.892rem);

    font-size: 1.4rem;
    font-size: clamp(1.344rem, calc(1.344rem + 0.373vw), 2.793rem);

    font-size: 1.35rem;
    font-size: clamp(1.296rem, calc(1.296rem + 0.360vw), 2.693rem);

    font-size: 1.3rem;
    font-size: clamp(1.248rem, calc(1.248rem + 0.347vw), 2.593rem);

    font-size: 1.25rem;
    font-size: clamp(1.200rem, calc(1.200rem + 0.333vw), 2.493rem);

    font-size: 1.2rem;
    font-size: clamp(1.152rem, calc(1.152rem + 0.320vw), 2.394rem);
	
	font-size: 1.0rem;
	font-size: lamp(0.960rem, calc(0.960rem + 0.267vw), 1.995rem);
	
	font-size: 0.95rem;
	font-size: clamp(0.912rem, calc(0.912rem + 0.253vw), 1.895rem);
	*/
	
	.pc{
		display: none!important;
	}
	
	a:hover{
		text-decoration: none;
		opacity: 1;
	}
	
   a.tel[href^="tel:"] {
       pointer-events: auto;
       text-decoration: none;
    }
	
	body {
		padding-top: 18.4vw;
	}
	
	
	header {
		width: 100%;
		height: 18.4vw;
		padding: 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index : 9999;
		background: #FFF;
	}
	
	header div.h_inner h1{
		width: 35.3vw;
		line-height: 0;
		position: absolute;
		left: 6.4%;
		top: 21%;
	}
	
	article {
		width: 100%;
	}
	
	div.page_title {
		margin: 0;
		padding: 9vw 8.9% 10vw;
		margin-bottom: 8vw;
	}
	
	div.page_title h2,
	section h2{
		font-family: "Cormorant";
		font-size: 4.0rem;
		font-size: clamp(3.840rem, calc(3.840rem + 1.067vw), 7.979rem);
		font-weight: 400;
		line-height: 1.3;
	}
	
	div.page_title h2 small,
	section h2 small{
		font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "YuMincho", "Noto Serif JP", "Hiragino Mincho ProN", "serif";
		font-size: 33.7%;
		display: block;
	}
	
	article span.more_icon {
		display: inline-block;
		border: 1px solid #000;
		border-radius: 25px;
		padding: 2.6vw 4.2vw 2.6vw;
		line-height: 0;
	}
	
	article span.arrow {
        position: relative;
        display: inline-block;
		width: 8.5vw;
        height: 1px;
        border-radius: 9999px;
        background-color: #000;
    }

    article span.more_icon span.arrow::before {
        content: "";
        position: absolute;
        top: calc(50% - 0.5px);
        right: 0;
        width: 2.93vw;
        height: 1px;
        border-radius: 9999px;
        background-color: #000;
        transform: rotate(45deg);
        transform-origin: calc(100% - 0.5px) 50%;
    }
	
	
	footer {
		padding: 8vw 0;
	}
	
	footer p{
		font-size: 0.95rem;
		font-size: clamp(0.912rem, calc(0.912rem + 0.253vw), 1.895rem);
		line-height: 1;
	}
	
	/*ハンバーガーナビ*/
    body #modal {
        width: 100%;
		height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -888;
        background: rgba(0,0,0,0.75);
        opacity: 0;
        transition-duration: 0.5s;
        transition-property: opacity, color;
        visibility: hidden; 
    }

    body.nav_open #modal {
        z-index: 888;
        opacity: 1;
        visibility: visible;
    }

    body.nav_open {
        overflow: hidden;
    }
	
	div.hamburger_box {
		width: 9.3vw;
		height: 9.3vw;
		position: absolute;
		top: 20%;
		right: 4.6vw;
	}

    .hamburger {
        display : block;
        position: relative;
        z-index : 9999;
        width : 100%;
        height: 100%;
        text-align: center;
        cursor: pointer;
    }

    .hamburger span {
        width: 100%;
		height: 1px;
        display : block;
        position: absolute;
        left    : 0;
        background : #000;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition   : 0.3s ease-in-out;
        transition        : 0.3s ease-in-out;
    }
    .hamburger span:nth-child(1) {
        top: 33%;
    }
    .hamburger span:nth-child(2) {
         bottom: 33%;
    }

    .hamburger.active span {
        width: 100%;
		background : #000!important;
    }

    .hamburger.active span:nth-child(1) {
        top: calc(50% - 1px);
        -webkit-transform: rotate(-30deg);
        -moz-transform   : rotate(-30deg);
        transform        : rotate(-30deg);
    }

    .hamburger.active span:nth-child(2) {
        top: calc(50% - 1px);
        -webkit-transform: rotate(30deg);
        -moz-transform   : rotate(30deg);
        transform        : rotate(30deg);
    }

    nav.globalMenu {
        width: 74%;
        height: 100%;
        position: fixed;
        z-index : 9998;
        top  : 0;
        right : 0;
        text-align: left;
        transform: translateX(110%);
        transition: all 0.6s;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background: #FFF;
        padding-left: 8%;
        padding-right: 8%;
        padding-bottom: 5vw;
    }
	
	nav.globalMenu div.menu_block {
		margin-top: 16.6vw;
		height: calc(100vh - 16.6vw);
		height: calc((var(--vh, 1vh) * 100) - 25.6vw);
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
	}
	
	nav.globalMenu div.menu_block ul{
        list-style: none;
		margin-top: -36.6vw;
    }
	
	nav.globalMenu div.menu_block ul li{
		font-family: "Cormorant";
		font-size: 2.4rem;
		font-size: clamp(2.304rem, calc(2.304rem + 0.640vw), 4.787rem);
        text-align: right;
    }
	
	nav.globalMenu div.menu_block ul li + li{
		margin-top: 1em;
    }

    nav.globalMenu div.menu_block ul li a{
        color: #000;
    }

    header nav.globalMenu div.block_menu ul{
        list-style: none;
    }

    header nav.globalMenu div.block_menu ul li{
        width: 100%;
        color: #000;
        line-height: 1.1;
        padding-left: 18px;
        position: relative;
        display: inline-block;
    }

    nav.globalMenu div.block_menu div.menu ul li + li{
        margin-top: 1.74vw;
    }

    nav.globalMenu.active {
      transform: translateY(0%);
    }
}