@charset "utf-8";

html, body                 {width:100%;margin:0 auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body                       {-webkit-text-size-adjust:100%;}
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td, p,
fieldset, form, label, legend, input,
article, aside, canvas, figure, figcaption,
footer, header, nav, section,
b, u, i                    {margin:0;padding:0;list-style:none;font-style:normal;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
main                       {display: block;}
a                          {outline:none;}
img                        {border:0 none;vertical-align:top;max-width:100%;height:auto;}
em                         {font-style:normal;font-weight:bold;}
nav ul, nav li             {list-style:none;}
.h a, .f a,
nav a, nav span            {text-decoration:none;}
table                      {border-collapse:collapse;}
p, li                      {line-height: 1.8;}

/* ----------------------------------------------- font */
html                       {font-size:62.5%;}
body                       {font-size:16px;font-size:1.6rem;font-family: 'Noto Sans JP', "YuGothic M", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;}
h1, h2,  h3                {font-weight:normal;}
.min                       {font-family: 'Noto Serif JP', "游明朝 Medium", "YuMincho Medium", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", Times, serif;}
.en                        {font-family: HelveticaNeue, Arial, sans-serif;}

/* ============================================================== base */
html, body                 {height:100%;}
body                       {-webkit-text-size-adjust:100%;}
.no-br                     {display:none;}
.flex {
	display:flex;
	justify-content:space-between;
}
@media (min-width: 751px){
	a[href*="tel:"]            {pointer-events: none;cursor: default;text-decoration: none;}
}
@media screen and (min-width: 1000px){
	.no-br                     {display:inline;}
}
/* ============================================================== common */
.sct {
	position: relative;
	font-size: clamp(14px, 3.6vw, 16px);
}
.sct_inr {
	position: relative;
	z-index: 3;
	margin: 0 auto;
	max-width: 1200px;
}
.sct_box {
	position: relative;
	display: block;
}
.sct a > img {
	transition: 0.3s;
}
.sct a:hover > img {
	opacity: 0.7;
}
/* ----------------- title */
.sct_ttl {
	position: relative;
	z-index: 10;
	font-size: 200%;
	margin-bottom: 1em;
}
.sct_ttl::before {
	content: "";
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: 3.2em;
	height: calc((250 / 190) * 3.2em);
	top: -2.7em;
	left: -1.2em;
}
.sct_ttl span {
	position: relative;
	z-index: 3;
	display: block;
	font-weight: 700;
	letter-spacing: 0.1em;
}
/* ----------------- button */
.sct_btn a {
	display: inline-block;
	position: relative;
	color: #0a0404;
	text-decoration: none;
	font-weight: 700;
	padding: 1em 3.2em 1em 0; 
	background-repeat: no-repeat;
	background-size: 2.06em auto;
	background-position: calc(100% - 0.28em) 50%;
	background-image: url("../images/common/btn_off.png");
	letter-spacing: 0.06em;
}
.sct_btn a::before {
	content: "";
	display: block;
	position: absolute;
	width: 2.6em;
	height: 2.6em;
	right: 0;
	top: calc(50% - 1.3em);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url("../images/common/btn_on.png");
	transform: scale(0);
	transition: 0.3s;
}
.sct_btn a:hover::before {
	transform: scale(1);
}

/* ----------------- overlay */
.overlay {
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to bottom right, rgba(238,238,238,0.01), rgba(238,238,238,1));
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url("../images/loading-05.gif");
	opacity: 1;
	transition: 3s;
	pointer-events: none;
}
.overlay.show {
	opacity: 0;
}
/* ----------------- inview */
.fadein {
	opacity : 0;
	transform : translate(0, 10px);
	transition : all 0.5s;
	transition-delay: 0.3s;
}
.fadein.active {
	opacity : 1;
	transform : translate(0, 0);
}
/* ----------------- video */
.video {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0 none;
	vertical-align: top;
}

/* ============================================================== header */
body::before {
	font-size: clamp(14px, 4vw, 20px);
	content: "";
	display: block;
	position: relative;
	z-index: 0;
	width: 10px;
	height: calc(5em - 2px);
}
.h {
	font-size: clamp(14px, 4vw, 20px);
	background: #fff;
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	height: 5em;
	z-index: 12;
}
.h_inr {
	margin: 0 auto;
	width: 96%;
	max-width: 1400px;
}
/* ******************************************** h_logo */
.h_logo {
	position: absolute;
	font-size: 100%;
	padding: 1em 0 0 0.5em;
}
.h_logo span,
.h_logo a {
	display: block;
}
.h_logo a span {
	letter-spacing: 0.1em;
	transition: 0.3s;;
}
.h_logo a:hover span {
	opacity: 0.7;
}
.h_logo a span:nth-of-type(1) {
	color: #0a0404;
	font-size: 120%;
	font-weight: 500;
}
.h_logo a span:nth-of-type(2) {
	color: #9ba0a8;
	font-size: 80%;
	font-weight: 700;
}
@media screen and (min-width: 1280px){
	.h_logo {
		padding: 0;
	}
	.h_logo a {
		height: 5em;
		display: flex;
		align-items: center;
	}
	.h_logo a span {
		line-height: 1;
	}
	.h_logo a span:nth-of-type(2) {
		margin-left: 1em;
		padding-left: 1em;
		border-left: 2px solid #97b6d3;
	}
}
/* ******************************************** h_nav */
.h_nav {
	display: none;
}
@media screen and (min-width: 1100px){
	.h_nav {
		display: block;
		position: absolute;
		top: 1.8em;
		right: 10em;
		color: #0a0404;
	}
	.h_nav ul {
		display: flex;
		font-size: 75%;
		font-weight: bold;
		letter-spacing: 0.1em;
	}
	.h_nav li {
		margin-right: 2.4em;
	}
	.h_nav li > span {
		cursor: pointer;
	}
	.h_nav a {
		color: #0a0404;
		transition: 0.3s;;
	}
	.h_nav a:hover {
		color: #666;
	}
	.hn_child {
		position: absolute;
		margin: 0;
		max-height: 0;
		overflow: hidden;
		transition: 0.3s;
		background: rgba(0,166,157,0.5);
		background: rgba(255,255,255,0.9);
	}
	.h_nav ul li:hover .hn_child {
		max-height: 200px;
	}
	.hn_child a {
		display: block;
		white-space: nowrap;
		padding: 0.5em 1em;
		border: 1px solid #97b6d3;
		border-top: 0 none;
	}
	.hn_child a:first-child {
		border-top: 1px solid #97b6d3;
	}
	.hn_child a:hover {
		background: rgba(255,255,255,1);
	}
	.hn_child a::before {
		display: none;
	}
}
/* ******************************************** h_entry */
.h_entry {
	position: absolute;
	display: flex;
	align-items: flex-end;
	top: 0;
	right: 5em;
	width: 5em;
	height: 5em;
	line-height: 1;
	background-color: #f7aed5;
	background-image: url("../images/common/head_ico_entry.png");
	background-repeat: no-repeat;
	background-position: 50% 1em;
	background-size: 1.55em auto;
	transition: 0.3s;
}
.h_entry:hover {
	background-color: #e79ec5;
}
.h_entry span {
	color: #fff;
	display: block;
	width: 100%;
	padding-bottom: 1em;
	text-align: center;
	font-size: 75%;
	font-weight: bold;
}
/* ******************************************** gn */
.gn_set {
	position: fixed;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 91;
}
/* ---------------------------------- hamburger button */
.gn_btn {
	background: #fff;
	position: absolute;
	width: 5em;
	height: 5em;
	top: 0;
	right: 0;
	line-height: 1;
	text-align: center;
	z-index: 3;
	cursor: pointer;
	transition: 0.3s;
}
.gn_btn span {
	position: absolute;
	left: 0;
	bottom: 1em;
	width: 100%;
	font-size: 75%;
	font-weight: bold;
	color: #97b6d3;
	text-align: center;
}
.gn_btn i {
	position: relative;
	display: block;
}
.gn_btn:before,
.gn_btn:after,
.gn_btn i:after {
	background: #97b6d3;
	position: absolute;
	content: "";
	display: block;
	width: 2em;
	height: 4px;
	left: calc(50% - 1em);
	transition: 0.2s;
}
.gn_btn i:after {
	top: calc(2.15em - 2px);
}
.gn_btn:before {
	top: calc(1.5em - 2px);
}
.gn_btn:after {
	top: calc(2.8em - 2px);
}
.gn_show .gn_btn {
	border-color: transparent;
	position: fixed;
}
.gn_show .gn_btn i:after {
	display:none;
}
.gn_show .gn_btn:before,
.gn_show .gn_btn:after {
	top: 2.15em;
}
.gn_show .gn_btn:before  {
	transform: rotate(45deg);
}
.gn_show .gn_btn:after {
	transform: rotate(-45deg);
}
@media screen and (min-width: 1000px){
	.gn_btn:hover {
		background-color: #f3f3f3;
	}
}
/* ----------------------------------------------- navigation */
.gn {
	background:#fff;
	position:fixed;
	z-index:2;
	width:100%;
	max-width: 24em;
	height:100vh;
	top:0;
	right:-100vw;
	overflow:scroll;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	transition:0.2s;
	box-shadow: -0.3em 0 0.3em rgba(64,64,64,0.1);	
}
.gn_show .gn {
	right: 0;
}
/* ----------------------------------------------- list */
.gn_lst {
	padding: 2em;
}
.gn_lst ul + ul {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid #dcdcdc;
}
.gn_lst li {
	margin-bottom: 0.8em;
}
.gn_lst ul:nth-of-type(2) li {
	margin-bottom: 0.6em;
}
.gn_lst li a {
	color: #0a0404;
	display: inline-block;
}
.gn_lst li span {
	display: block;
}
.gn_lst li > span {
	color: #97b6d3;
	font-weight: bold;
}
.gn_lst li div {
	margin-left: 1em;
}
@media screen and (min-width: 480px){
	.gn_lst {
		font-size: 82.5%;
	}
}
@media screen and (min-width: 1000px){
	.gn_lst li a {
		transition : 0.3s;
	}
	.gn_lst li a:hover {
		opacity: 0.7;
	}
}

/* ============================================================== conversion */
.cv {
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../images/common/entry_bg.jpg");
	background-position: 50% 0;
	color: #fff;
	padding: 0 1em;
}
.cv_en {
	top: 0.5em;
	right: 0.5em;
	position: absolute;
	text-align: right;
	font-weight: bold;
	font-size: clamp(42px, 12vw, 90px);
	line-height: 1;
}
.cv .sct_inr {
	max-width: 1040px;
	padding: 7em 0 3em;
}
@media screen and (min-width: 750px){
	.cv .sct_inr {
		padding: 12em 0 5em;
	}
}
.cv .sct_ttl {
	padding-left: 0.6em;
}
.cv .sct_ttl::before {
	background-image: url("../images/common/entry_ttl_bg.png");
}
.cv_txt {
	max-width: 18em;
	margin-bottom: 2em;
}
.cv .sct_btn a {
	color: #fff;
	background-image: url("../images/common/btn_off_w.png");
}
.cv_btn a:hover {
	background-image: url("../images/common/btn_on.png");
}
@media screen and (max-width: 767px){
.cv {
	background-position: 72% 0;
	}
}
/* ============================================================== footer */
.f {
	padding: 3em 1em;
	font-size: clamp(14px, 4vw, 14px);
}
.f_inr {
	margin: 0 auto;
	max-width: 1010px;
}
.f_ttl {
	font-size: 160%;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin-bottom: 1em;
}
.f_nav {
	margin-bottom: 2em;
}
.f_nav ul {
	padding: 0 0.6em;
}
.f_nav ul + ul {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid #dcdcdc;
}
.f_nav li {
	margin-bottom: 0.5em;
}
.f_nav li > span {
	display: block;
	color: #97b6d3;
	font-weight: bold;
}
.f_nav li div span {
	display: block;
}
.f_nav a {
	color: #0a0404;
	display: inline-block;
	transition: 0.3s;
}
.f_nav a:hover {
	opacity: 0.7;
}
.f_ttl a {
	color: #000;
    text-decoration: none;
}
.f_ttl a:hover {
	opacity: 0.7;
	transition: 0.3s;
}
@media screen and (min-width: 750px){
	.f {
		padding: 5em 1em 3em;
	}
	.f_nav ul  {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2em;
	}
	.f_nav ul:nth-of-type(2)  {
		grid-template-columns: repeat(4, auto);
	}
	.f_nav ul + ul {
		margin-top: 2em;
		padding-top: 3em;
	}
	.f_nav li > span {
		margin-bottom: 2em;
	}
	.f_nav li div span {
		margin-bottom: 1em;
	}
}
@media screen and (min-width: 1100px){
	.f_inr {
		display: grid;
		grid-template-columns: 30% auto;
		grid-template-rows: auto 3em;
		margin-bottom: 5em;
	}
	.f_ttl {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	.f_nav {
		margin: 0;
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
	.f_btn {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
}
.f .ptop i {
	cursor: pointer;
	font-weight: 500;
	letter-spacing: 0.1em;
	display: inline-block;
	color: #0a0404;
	padding: 1em 3em 1em 0;
	background-repeat: no-repeat;
	background-size: 2.4em auto;
	background-position: 100% 50%;
	background-image: url("../images/common/foot_ico_top.png");
	letter-spacing: 0.06em;
	transition: 0.3s;
}
.f .ptop i:hover {
	opacity: 0.7;
}
.f_copyright {
	margin-top: 2em;
	text-align: center;
	font-size: 80%;
	color: #a3a3a3;
}
.f_copyright i {
	display: inline-block;
}

.mov_sp,.mov {
	position:relative;}

.mov .idx_kv_txt {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 1200px;
    top: 54%;
    text-align: left;}

.mov_sp .idx_kv_txt {
    position: absolute;
    padding-left: 5px;
    right: 0;
    margin: auto;
    width: 100%;
    top: 52.5%;
    text-align: left;
	z-index:2;}

.mov .idx_kv_ttl {
	position:relative;
	z-index:10;}


.idx_kv_ttl span {
	color:white;
    font-size: 150%;
    text-shadow: 0 0 10px black;
}

.mov video {
	width:100%;
	height:calc(100vh - 100px);
	object-fit:cover;}

.idx_kv {
	height:calc(100vh - 100px)!important;}

.mov_sp video {
	width:100%;
	height:calc(100vh - 5em);
	object-fit:cover;}

.mask {
	background-image:url("../images/mov_mask.png");
    width: 100%;
    height: calc(100vh - 100px);
    /* background-size: cover; */
    display: block;
    position: absolute;
    z-index: 1;
    opacity: 0.2;}

.idx_deco {
    z-index: 2!important;}

.idx_movie {
	margin-top:50px;
}

.idx_movie .flex div {
	width:37%;
}

.idx_movie .flex div.idx_desc{
	width:100%;
}

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

.idx_movie .flex {
	flex-direction:column;
}

.idx_movie p {
	padding-left:1em;
}

.idx_movie .flex a {
	width:90%;
	margin:0 auto;
}

.idx_movie .flex div {
	width:100%;
}



}



@media screen and (min-width: 768px){.forsp{display:none;}}
@media screen and (max-width: 767px){.forpc{display:none;}}