@charset "UTF-8";
/* Scss Document */
/*=============================================
 * body
 *=============================================*/
body {
	color: #000000;
	font-family: "Noto Sans JP";
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 35px;
	background: url(../img/shared/bg.jpg);
	min-width: inherit;
	min-height: inherit;
	max-height: 100%;
	letter-spacing: 0.1em;
}

@media screen and (max-width: 767px) {
body {
	font-size: 14px;
	text-align: justify;
	line-height: 2;
}
body.home {
}
}

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

}
 body::-webkit-scrollbar {
/*    display: none;*/
}
}
/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/
.fnt-mincho {
	font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
}
.fnt-meiryo {
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴシックPro', 'ＭＳ ゴシック', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.fnt-gothic {
	font-family: '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.fnt-shi {
	font-family: 'Shippori Mincho', serif;
	font-weight: 400;
	font-style: normal;
}
.f500 {
	font-weight: 500;
}
html #socialbuttons {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
html #socialbuttons .social-line {
	overflow: hidden;
}
/*=============================================
 ******************* main **********************
 *=============================================*/
main {
	clear: both;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.bg-parallax {
	position: relative;
	z-index: -1;
}
.bg-parallax .img-parallax {
	clip: rect(0, auto, auto, 0);
	margin-bottom: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
.bg-parallax .img-parallax img {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	object-fit: cover;
	z-index: 0;
	transform: translateZ(0);
}

@media screen and (min-width: 768px) {
.bg-parallax-pc {
	position: relative;
	z-index: -1;
}
.bg-parallax-pc .img-parallax-pc {
	clip: rect(0, auto, auto, 0);
	margin-bottom: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
.bg-parallax-pc .img-parallax-pc img {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	object-fit: cover;
	z-index: 0;
	transform: translateZ(0);
}
}
img {
	max-width: 100%;
	width: 100%;
	height: auto;
}
html {
	min-width: auto;
}
.txt {
	text-align: justify;
}
.txt-center {
	text-align: center;
}
.telhref {
	text-decoration: none !important;
}
.row {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
}
/*=============================================
===============================================
===============================================
*************** mobie first header ************
===============================================
===============================================
*=============================================*/



/*=============================================
******************* hamberger  ****************
*=============================================*/
.hamberger-btn {
	position: fixed;
	top: 0;
	right: 0;
	width: 75px;
	height: 75px;
	z-index: 201;
	transition: all 0.4s ease;
	overflow: hidden;
	background: #000;
}
.hamberger-btn::after {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 22px;
	content: 'Menu';
	text-align: center;
	font-size: 14px;
	line-height: 1;
	color: #fff;
	letter-spacing: 1px;
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 500;
	right: 0;
	display: none;
}
.hamberger-btn span {
	width: 40px;
	height: 2px;
	position: absolute;
    top: 48%;
    left: calc(50% - 18px);
	background: #fff;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.13s;
}
.hamberger-btn span::after,
.hamberger-btn span::before {
	width: 40px;
	height: 2px;
	position: absolute;
	left: 0;
	background: #fff;
	content: '';
	transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamberger-btn span::before {
	top: -12px;
}
.hamberger-btn span::after {
	top: 12px;
}
.menu-open .hamberger-btn {
/*
	border-color: transparent;
	background: transparent;
*/
}
.menu-open .hamberger-btn span {
	transform: rotate(360deg);
}
.menu-open .hamberger-btn span {
	transform: translate3d(0, 0px, 0) rotate(-20deg);
	transition: transform 0.12s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s;
	background: transparent;
}
.menu-open .hamberger-btn span::before {
	top: 2px;
	transform: rotate(-130deg);
	transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-open .hamberger-btn span::after {
	top: 2px;
	transform: rotate(170deg);
	transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);

}
.menu-open .hamberger-btn::after {
	content: 'Close';
}
/*=============================================
******************* nav-header  ***************
*=============================================*/
.nav-header {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	transition: all 0.5s ease;
	opacity: 0;
	visibility: hidden;
	overflow: auto;
}
.menu-open .nav-header {
	opacity: 1;
	visibility: visible;
}
.headerOpen__nav {
	margin-bottom: 11vw;
}
.js-scroll {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	padding-bottom: 40vw;
}

@media screen and (min-width: 768px) {
.js-scroll {
	padding-bottom: 0;
}
}
body.mfp-zoom-out-cur, body.menu-open {
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch;
}
body.menu-open, body.menu-open *, body.menu-open *:hover, body.menu-open *:focus, body.menu-open *:active {
	pointer-events: none !important;
	-ms-touch-action: none !important;
	touch-action: none !important;
}
body.menu-open #fixed-sp, body.menu-open #fixed-sp *, body.menu-open .hamberger-btn, body.menu-open .hamberger-btn *, body.menu-open .nav-header, body.menu-open .nav-header *, body.menu-open .remodal-is-opened, body.menu-open .remodal-is-opened * {
	pointer-events: visible !important;
	-ms-touch-action: auto !important;
	touch-action: auto !important;
}

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




/*=============================================
******************* btn-cus  ******************
*=============================================*/



/* iPhone X */
@media only screen and (min-device-width: 375px) and (min-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
footer::after {
	height: 36px;
	content: '';
	background: #000000;
	position: fixed;
	bottom: 0px;
	left: 0;
	right: 0;
	z-index: 7;
}
#ft_fixed {
	bottom: calc(env(safe-area-inset-bottom) - 0px);
}
}

/* iPhone XR */
@media only screen and (min-device-width: 414px) and (min-device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
footer::after {
	height: 36px;
	content: '';
	background: #000000;
	position: fixed;
	bottom: 0px;
	left: 0;
	right: 0;
	z-index: 7;
}
#ft_fixed {
	bottom: calc(env(safe-area-inset-bottom) - 0px);
}
}

/* iPhone 11 */
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3 / 1), only screen and (min-device-pixel-ratio: 3), only screen and (min-resolution: 458dpi), only screen and (min-resolution: 3dppx) {
footer::after {
	height: 36px;
	content: '';
	background: #000000;
	position: fixed;
	bottom: 0px;
	left: 0;
	right: 0;
	z-index: 7;
}
#ft_fixed {
	bottom: calc(env(safe-area-inset-bottom) - 0px);
}
}

@media screen and (min-width: 768px) {
footer:after {
	display: none;
}
}

@media screen and (max-width: 767px) {
html.responsive .wrap {
	width: auto;
	padding: 0 6%;
}
.txt:not(.except) br:not(.except):not(.sp) {
	display: none;
}
.pc {
	display: none !important;
}
}

@media screen and (min-width: 768px) {
.sp {
	display: none !important;
}
}

/*=============================================
===============================================
===============================================
*************** css for iphone 5 ************
===============================================
===============================================
*=============================================*/
/*=============================================
===============================================
===============================================
***************** css for ie 11 ***************
===============================================
===============================================
*=============================================*/
/*=============================================
===============================================
===============================================
***************** CSS FOR PC ***************
===============================================
===============================================
*=============================================*/

@media only screen and (min-width: 768px) {
.sp {
	display: none;
}
.pc {
	display: block;
}
.txt {
	text-align: left;
}
/*--------------------------------------
    btn-cus
  --------------------------------------*/

  /*--------------------------------------
    font-size
  --------------------------------------*/
.fz40 {
	font-size: 40px;
}
span.fz40,  span.fz60,  span.fz70 {
	line-height: inherit;
}
.fz70 {
	font-size: 70px;
}
/*=============================================
 ******************** header ******************
 *=============================================*/


  /*--------------------------------------
    hamb
  --------------------------------------*/
.hamberger-btn {
	width: 108px;
	height: 90px;
	cursor: pointer;
	top: 33px;
	right: 0;
	opacity: 0;
	visibility: hidden;
	display: none;
}
.menu-open .hamberger-btn,  .fixed-btn .hamberger-btn {
	opacity: 1;
	visibility: visible;
}
.hamberger-btn:hover {
	opacity: 0.6;
}
.hamberger-btn:after {
	left: 2px;
	bottom: 20px;
	text-align: center;
	font-size: 14px;
	letter-spacing: 3px;
}
.hamberger-btn span {
	width: 50px;
	height: 1px;
	position: absolute;
	top: 45%;
	left: calc(50% - 24px);
}
.hamberger-btn span:before {
	top: -16px;
	height: 1px;
	width: 50px;
}
/*=============================================
 ******************* nav-fixed ****************
 *=============================================*/
.nav-header {
	top: 0;
	right: 0;
	width: 100%;
	left: auto;
	display: none;
}
/*=============================================
 ******************* keyvisual ****************
 *=============================================*/
 
	
	
  /*=============================================
 ******************* footer *******************
 *=============================================*/
  
  /*=============================================
***************** copyright ******************
*=============================================*/
#pagetop {
	cursor: pointer;
	transition: all 0.3s ease;
}
}

@media (min-width: 768px) and (max-width: 1180px) {
}
/* Arrows */
.slick-prev, .slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 50%;
	display: block;
	width: 35px;
	height: 35px;
	padding: 0;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	cursor: pointer;
	color: #fff;
	border: none;
	outline: none;
	background: #b10505;
	font-family: 'fontello';
	z-index: 98;
	border-radius: 50%;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
	color: transparent;
	outline: none;/* background: #b10505; */
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
	opacity: 1;
}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
	opacity: 0.25;
}
.slick-prev:before, .slick-next:before {
	font-size: 30px;
	line-height: 0.5;
	opacity: 1;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
	left: 0;
	background-size: 100%;
	width: 40px;
	height: 40px;
}
[dir='rtl'] .slick-prev {
	right: 0px;
	left: auto;
}
.slick-prev:before {
	content: '';
}
[dir='rtl'] .slick-prev:before {
	content: '▶';
	color: #fff;
}
.slick-next {
	right: 0;
	background-size: 100%;
	width: 40px;
	height: 40px;
}
[dir='rtl'] .slick-next {
	right: auto;
	left: 0px;
}
.slick-next:before {
	content: '';
	color: #fff;
}
[dir='rtl'] .slick-next:before {
	content: '←';
}
/* Dots */
.slick-dots {
	position: absolute;
	bottom: 0%;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: left;
}
.slick-dots li {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
	margin: 10px 0;
	padding: 0;
	cursor: pointer;
}
.slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	cursor: pointer;
	color: transparent;
	outline: none;
	background: transparent;
	border: none;
}

@media screen and (max-width: 767px) {
	.slick-dots li {
		width: 15px;
		height: 15px;
	}
}

.slick-dots li button:hover, .slick-dots li button:focus {
	outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
	opacity: 1;
}
.slick-dots li button:before {
	font-family: 'slick';
	font-size: 6px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	content: '';
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
	background: #205ea2;
}
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUp {
 0% {
 -webkit-transform: translate3d(0, 20px, 0);
 opacity: 0;
 transform: translate3d(0, 20px, 0);
}
 to {
 -webkit-transform: translateZ(0);
 opacity: 1;
 transform: translateZ(0);
}
}
@keyframes fadeInUp {
 0% {
 -webkit-transform: translate3d(0, 20px, 0);
 opacity: 0;
 transform: translate3d(0, 20px, 0);
}
 to {
 -webkit-transform: translateZ(0);
 opacity: 1;
 transform: translateZ(0);
}
}
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	-webkit-animation-delay: .5s;
	animation-delay: .5s;
}
 @-webkit-keyframes fadeInDown {
 0% {
 -webkit-transform: translate3d(0, -20px, 0);
 opacity: 0;
 transform: translate3d(0, -20px, 0);
}
 to {
 -webkit-transform: translateZ(0);
 opacity: 1;
 transform: translateZ(0);
}
}
@keyframes fadeInDown {
 0% {
 -webkit-transform: translate3d(0, -20px, 0);
 opacity: 0;
 transform: translate3d(0, -20px, 0);
}
 to {
 -webkit-transform: translateZ(0);
 opacity: 1;
 transform: translateZ(0);
}
}
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-delay: .5s;
	animation-delay: .5s;
}
@-webkit-keyframes fadeIn {
 0% {
 opacity: 0;
}
 to {
 opacity: 1;
}
}
@keyframes fadeIn {
 0% {
 opacity: 0;
}
 to {
 opacity: 1;
}
}
.fadeInUp2 {
	-webkit-animation-name: fadeInUp2;
	animation-name: fadeInUp2;
}
@-webkit-keyframes fadeInUp2 {
 0% {
 -webkit-transform: translate3d(0, 200%, 0);
 opacity: 0;
 transform: translate3d(0, 200%, 0);
}
 to {
 -webkit-transform: translateZ(0);
 opacity: 1;
 transform: translateZ(0);
     
}
}
@keyframes fadeInUp2 {
 0% {
 -webkit-transform: translate3d(0, 200%, 0);
 opacity: 0;
 transform: translate3d(0, 200%, 0);
}
 to {
 -webkit-transform: translateZ(0);
 opacity: 1;
 transform: translateZ(0);
  
}
}
.txt_thanks {
	text-align: center;
	color: #000;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.btn-over img,  .over-img img,  img.over,  img:not(.btn):not(.non-over),  button img,  .btn {
	opacity: 1;
	transform: none !important;
	-moz-transform: none !important;
	-webkit-transform: none !important;
	transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
}
.btn {
	transition: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
}
.over-img img:hover, img.over:hover, /* a:not([href=""]):hover img:not(.btn):not(.non-over), */ a:hover img:not(.btn):not(.non-over), button:hover img {
	cursor: pointer;
	opacity: 0.8;
	transform: none !important;
	-moz-transform: none !important;
	-webkit-transform: none !important;
}
a:before {
	text-decoration: underline;
	display: inline-block;
}
a:before,  a:hover:before {
	text-decoration: none;
}
}




/*POPUP*/
.remodal-overlay {
/*    background: #2b2b2b;*/
}
.remodal  .close{
	    position: sticky;
    top: 0;
    right: 0;
}
.popup-menu h2 {
    font-size: 8vw;
    margin-bottom: 9vw;
    font-family: 'Noto Serif JP';
    font-weight: bold;
    letter-spacing: 0.1em;
}
.popup-menu .note {
    text-align: center;
    margin-bottom: 14vw;
    font-family: 'Noto Serif JP', serif;
    line-height: 24px;
}
.popup-menu .popup {
    padding: 15% 5% 6% !important;
}
.popup-menu .list .row .col {
    margin-bottom: 11vw;
}
.popup-menu .list .row .col h3 {
    border-top: 2px solid #fff;
    padding: 3%;
    margin-bottom: 2vw;
    font-size: 5vw;
    text-align: center;
    font-weight: normal;
    border-bottom: 2px solid #fff;
}
.popup-menu .list .row .col h4 {
    text-align: left;
    padding-top: 11px;
    margin-bottom: -12px;
    line-height: 24px;
}
.popup-menu .list .row .col dl {
    padding: 10px 0;
    border-bottom: 1px solid #fff;
    display: flex;
    justify-content: space-between;
}
.popup-menu .list .row .col p {
    line-height: 24px;
}
.popup-menu .list .row .col dl dt {
    float: left;
    text-align: left;
}
.popup-menu .list .row .col dl dd {
    float: right;
    text-align: right;
    align-self: flex-end;
}
.remodal-close {
    top: 10px;
}
.remodal-close:before {
    font-family: inherit !important;
    font-weight: 100;
    color: #fff;
}
.remodal {
    padding: 5px 0 30px;
}
.remodal-close:hover {
    opacity: 0.8;
}
.remodal canvas{
	width: 100%;
}
@media only screen and (min-width: 768px) {
    .popup-menu .remodal-close:before {
        width: 70px;
        height: 70px;
        font-size: 40px;
    }
    .popup-menu h2 {
        font-size: 42px;
        margin-bottom: 41px;
    }
    .popup-menu .note {
        margin-bottom: 70px;
    }
    .popup-menu .popup {
        padding: 96px 0 50px !important;
    }
    .popup-menu .list {
        display: flex;
        justify-content: flex-start;
        max-width: 1000px;
        margin: 0 auto;
        flex-direction: row;
    }
    .popup-menu .list .row {
        display: flex;
        justify-content: flex-start;
        width: 31%;
        margin-right: 35px;
    }
    .popup-menu .list .row:last-of-type {
        margin-right: 0
    }
    .popup-menu .list .col {
        width: 460px;
        max-width: 48%;
    }
    .popup-menu .list.list2 .col {
        width: 310px;
        max-width: 30%;
    }
    .popup-menu .list .row .col {
        margin-bottom: 50px;
        width: 345px;
        max-width: 100%;
    }
    .popup-menu .list .row .col h3 {
        font-size: 18px;
        padding: 10px;
        line-height: 37px;
        margin-bottom: 18px;
    }
    .popup-menu .list .row .col dl {
        font-size: 14px;
        line-height: 24px;
        padding: 12px 0;
        letter-spacing: 0;
    }
    .remodal-close {
        top: 10px;
        right: 47px;
    }
    .remodal {
        padding: 80px 0 30px;
    }
}