@charset "utf-8";
/*
Theme Name: Mirasia_MV
Theme URI: https://mirasia.jp/
Description: VC
Author: VC
Author URI: https://mirasia.jp/
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jhs3
*/

:root {
	--text-color: #333;
	--border-color: #aaa195;
}


/*================================================
　　　　* よく登場する要素のリセット
================================================*/

body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form{
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight:100;
	font-size: 100%;
	text-align: left;
}

.second p{margin-top: 1em;}


/* ---------------------------------------------------  画像の下にできる隙間をなくす */
img {
	vertical-align: bottom;
	-webkit-backface-visibility: hidden;	
	-moz-transition: -moz-transform 0.2s ease-out;
	-webkit-transition: -webkit-transform 0.2s ease-out;
	-o-transition: -o-transform 0.2s ease-out;
	-ms-transition: -ms-transform 0.2s ease-out;
	transition: transform 0.2s ease-out;
}
html{
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: none;
  	-webkit-font-smoothing: aliased;
	-ms-overflow-style: scrollbar;
}

body {
	text-align: left;
	/*font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","游ゴシック体", "Yu Gothic", "メイリオ", "Meiryo", sans-serif;*/
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 200;
	line-height: 1.8;
	font-size: 0.95em;
	letter-spacing: 0.1em;
	word-wrap: break-word; /*word-break: break-all;*/
    overflow-wrap: break-word;
	font-feature-settings : "palt";
    color: var(--text-color);
}

a img {	cursor: pointer;}
img {border: none; max-width: 100%; height: auto;}

/* ---------------------------------------------------  テキストリンクカラー */
a{color: var(--text-color);} /*1BA1E6*/
a:link		{ text-decoration: underline;}
a:visited	{}
a:active	{}
a:hover		{}
a, a:hover {
	-o-transition: 0.15s ease-out;
	-webkit-transition:0.15s ease-out;
	-moz-transition:  0.15s ease-out;
	transition: 0.15s ease-out;
}


/*================================================
　　　　* リストスタイル
================================================*/
.second main ul{margin-left : 15px;padding-left:15px;list-style-type: disc;}
.second main ul li{padding : 0px 0px 2px 0px;}

.second main ol {padding : 0px 0px 0px 16px;	margin-left: 15px;　list-style-type: decimal;}
.second main ol li {}


/*================================================
　　　　* テーブル
================================================*/
table {
	border: solid 1px #666;
	border-collapse: collapse;
	margin-top: 1em;
	 box-sizing: border-box;
}
table tr{}
table th{
	border-bottom: solid 1px #666
	border-collapse: collapse;
	text-align: left;
	padding: 10px;
	vertical-align: middle;
	line-height: 1.4;
	font-weight: bold;
	box-sizing: border-box;
}
table td{
	border-bottom: solid 1px #666
	border-collapse: collapse;
	padding: 10px;
	line-height: 1.6;
	box-sizing: border-box;
	vertical-align: middle;
}
table td img{vertical-align: middle;}


/*================================================
　　　　* テキスト
================================================*/
.second h1 { font-size: 1.6em; font-weight: 100; margin: 0 0 3em 0;}
.second h2 { font-size: 1em; font-weight: 400;}
.second h3 {}
.second h4 {}
.second h5 {}
.second h6 {}


hr {
	height: 0;
	height: 1px\9;
	border: none;
	border-top:1px solid #8A847D;
	display: block;
	padding: 0;
	margin: 20px 0;
	clear:both;
}

.center {text-align: center;}
.bold {	font-weight: bold;}
.strong {font-weight: 600;}
.red {color: #CC0000;}

.mrT0 {	margin-top: 0em !important;}
.mrT1 {	margin-top: 1em !important;}
.mrT2 {	margin-top: 2em !important;}
.mrT3 {	margin-top: 3em !important;}
.mrT4 {	margin-top: 4em !important;}
.mrT5 {	margin-top: 5em !important;}
.mrT6 {	margin-top: 6em !important;}
.mrT7 {	margin-top: 7em !important;}
.mrT8 {	margin-top: 8em !important;}
.mrT9 {	margin-top: 9em !important;}
.mrT10 {margin-top: 10em !important;}

/*電話番号色かえない*/
a[href^="tel"]{color:inherit;}


/*================================================
　　　　* youtube埋め込み
================================================*/
.second .youtubeBox{ position: relative;  width: 100%; padding-top: 56.25%;}
.second .youtubeBox iframe{ position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; border: none;}

/*================================================
　　　　* google map iframe
================================================*/
.gmapIframe{  margin:0 auto; width:100%; height:400px;}
.gmapIframe iframe{ width:100%; height:400px;}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    *  共通レイアウト
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#wrap{}
.bgc{ background: #DEDAD4;}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    *  ヘッダー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*================================================
　　　　* ham_hd
================================================*/
#ham_hd{ display:block; padding: 0px; box-sizing: border-box; position: relative; height: 121px;}
#ham_hd .logo{ position: fixed;  height: 51px; width:100%; padding:0px; top:30px; left: 60px; z-index: 1; box-sizing: border-box; }
#ham_hd .logo .mark{}
#ham_hd .logo img{ width:130px; height:auto; margin:12px 0 0 10px; position:relative;}

header{ position: relative; padding: 20px; box-sizing: border-box;}
header .inner{}
header nav{ position: relative;}
header nav .copy{font-size: 8px; color: #fff; margin: 30px 0 0 auto; width: 25.5em; }
header ul{ list-style: none; position: relative; z-index: 200; overflow: hidden; width: 220px; margin: 100px 0 0 auto;}
header ul li{ line-height: 2; margin: 0 0 0.5em 1em; list-style: none;}
header nav a{ text-decoration: none; color: #fff;}
header nav a:link{ text-decoration: none;}
header nav a:hover{ text-decoration: none;}

/*================================================
　　　　* モーダルメニュー
================================================*/

/* ---------------------------------------------------  menu */
header{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index:10;
	background: rgba(74, 69, 62, 0.9);
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	visibility: hidden;
	opacity: 0;
	/*
	transform: translate3d(0%, 0, 0);
	*/
}

.menu-open header {
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	visibility: visible;
	display: block;
	opacity: 1;
	overflow: hidden;
	-webkit-overflow-scrolling:touch;
	/*
	transform: translate3d(0%, 0, 0);
	*/
	
}

/* --------------------------------------------------- ham-btn */
.ham-btn {
	/*position: absolute;*/
	position: fixed;
	top: 45px;
	right: 60px;
	text-align: center;
	cursor: pointer;
	z-index: 20;
	display:block;
	color:var(--text-color);
	text-decoration:none;
	padding:  0;
	box-sizing: border-box;
}

.menu-trigger p{ margin:0; font-size: 0.9em; color: var(--text-color); font-weight: bold; position: absolute; top: 0; left:0; text-align:center; width:100%; letter-spacing:0.1em;}
.menu-trigger.active p{color: #fff; font-size:0;}
.menu-trigger.active p:before{content:"CLOSE"; font-size:14px;}


/* --------------------------------------------------- menu-trigger*/
.menu-trigger {	position: relative;	width: 66px;}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    *  フッター
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
footer{ font-size: 0.9em; padding:  0 0 3em 0;}
footer .inner{width: 90%; max-width: 1000px; margin: 0 auto; padding:4vh 0; box-sizing: border-box; border-top: solid var(--border-color) 1px;}
footer .copyright{width: 90%; max-width: 1000px; margin: 0 auto; font-size: 0.7em; box-sizing: border-box;}
footer a{text-decoration: none;}
footer a:link{text-decoration: none;}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    *  トップページ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.hero {	position: relative; }
.hero .video-box {position: relative; overflow: hidden;	width: 100%; height: 100vh;}
.hero .video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
 }
  
 .hero .overlay::after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: rgba(0, 0, 0, 0.4);
}
  
.hero .text-box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hero .text-box .logo {padding: 0 0 0 0;text-align: center; margin-bottom: 5em;}
.hero .text-box .logo img{ width: 201px;}
.hero .text-box h1{ width: 50%; margin: 0px auto 0 auto; color: #fff; text-align: center; font-size: 0.85em; line-height: 2.5;}
.hero .text-box .en{color: #fff; text-align: center; font-size: 0.8em; margin-top: 1em;}
.hero .text-box .enter{ text-align: center; margin-top: 2em;}
.hero .text-box .enter a{ color: #fff; text-decoration: none;}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    *  下層ページ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/ 
.second {}
.inner_limit{max-width:1000px; width:90%; margin: 6vw auto; padding: 0 0 0 0;}
.second main{ width: 90%; max-width: 1200px; margin: 10vh auto;}

/* --------------------------------------------------- SHOWCASE */
.second .showcase{}
.second .showcase .showlist{
	list-style: none; 
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
.second .showcase .showlist li{
	width: calc(50% - 20px); /* 列の幅を均等に分配し、マージンを考慮して計算 */
	margin: 10px;
	padding: 10px;
	box-sizing: border-box;
	flex-grow: 1;
	
}

.second .showcase .showlist li .cap{ margin: 0.5em 0 0 0; font-size: 0.9em;}

.second .showcase .showlist .item-image__wrap{
	width: 100%;
	height: 40vh;
	overflow: hidden;
}

.second .showcase .showlist .item-image__wrap img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------- CASE */
.second .caselayout{ margin: 2em 0 0 0;}
.second .caselayout .pict{ margin:  0 0 3em 0;}
.second .caselayout .movie{ width: 70%; padding: 0; margin: 0 auto 3em auto;}
.second .caselayout .movie video{ width: 100%;}
.second .caseback{text-align: center;}
.second .caseback a{ text-decoration: none;}

/* --------------------------------------------------- PRICEE */
.second .plan_h1{ text-align: center;}
.second .plan_h1 span{ display: block; font-size: 0.6em;}

.second .pricelayout{}
.second .pricelayout .priceBox{ border-bottom: solid 1px var(--border-color); width: 60%; margin: 0 0 0 40%; padding: 5em 0;}
.second .pricelayout .priceBox:first-child{padding: 0 0 5em 0;}
.second .pricelayout .priceBox:last-child{border-bottom:none;}
.second .pricelayout .priceImg{ margin:  1em 0 0 0;}
.second .pricelayout h2{margin: 0 0 0 0; font-weight: 400;}
.second .pricelayout h2 span{ display: block; font-size: 0.7em; font-weight: 100;}

.second .pricelayout .detail{ width: 90%; max-width: 1000px; margin: 0 auto; font-size: 0.9em;}
.second .pricelayout .caselayout .movie{ width: 100%; padding: 0; margin:  0 0 3em 0;}
.second .pricelayout .plan_h2{text-align: center; font-size: 1.2em; margin-top: 5em;}
.second .pricelayout .plan_h2 span{ display: block; font-size: 0.8em;}
.second .pricelayout .swlayout{display: flex; flex-wrap: wrap;}
.second .pricelayout .swlayout .swBox{ width: 46%; padding: 2%;}
.second .pricelayout .swlayout .swBox .thum{}
.second .pricelayout .swlayout .swBox .ttl{}




/* --------------------------------------------------- 共通 */
.second .danlayout{}
.second .danlayout .danBox{width: 60%; margin: 0 0 0 40%; font-size: 0.9em;}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    *  その他
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.grecaptcha-badge{ display: none}

/* わっとさせるためのコード */
.loadfadein{
    animation-name: fadein;
    animation-duration: 2s;
}
@keyframes fadein{
    from{
	transform: translateY(30px);
	opacity: 0;
	transition: transform 2s, opacity 2s;
    }
    to{
	transform: translateY(0);
	opacity: 1;
    }
}
/* スクロールすると下からふわっとさせるためのコード */
.inview {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 2s, opacity 2s;
}

.inview.show {
  transform: translateY(0);
  opacity: 1;
}