@charset "utf-8";

/*------------------------------*/
/* ページ固有設定*/
/*------------------------------*/

.header_box {
	opacity: 0;
	z-index: 0;
}

/* メインヘッダー (下地)枠 */
.main_header_frame {
	position: relative;
	width:100vw;
	height:100vh;
	background-image: url('/image/top_main_header_bg_pc_no.png');
	background-image: url('/image/top_main_header_bg_pc.webp');
	background-size: cover;
	background-position: center;
	z-index: 102;
}

/* メインのマスク */
.main_mask {
	position: absolute;
	width:100vw;
	height:100vh;
	background-color:#ffffff;
	z-index: 2;
	opacity: 0; /* 白く変化 */
}

/* スマホ */
@media only screen and (max-width:599px) {
	.main_header_frame {
		background-image: url('/image/top_main_header_bg_sp_no.png');
		background-image: url('/image/top_main_header_bg_sp.webp');
		background-repeat: no-repeat;
		background-position: center bottom;
		height:300px;
	}
}

/*-----*/
/* 中央枠 */
.main_frame {
	position: absolute;
	width:60%;
	max-width:600px;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

/* メインロゴ枠 */
.main_logo_frame {
	position: relative;
	width:100%;
	height:auto;
	overflow: hidden;
}

/* メインロゴのマスク */
.main_logo_mask {
	position: absolute;
	width:100%;
	height:100%;
	background-color: #24ccb6;
	z-index: 1;
}
/* メインロゴ */
.main_logo {
	position: relative;
	width:100%;
	height:auto;
}

/* SUN INC */
.sun_inc_logo_frame {
	margin-top:10px;
	width: 25%;
	display: block;
	margin-left: auto;
	opacity:0;
}

/* 中央枠の背景 */
.main_header_bg {
	position: relative;
	width:100vw;
	height:100vh;
	background-color: #24ccb6;
	z-index: 1;
}

/* タブレット */
@media only screen and (max-width:1024px) {
	.main_header_bg, .main_header_frame, .main_mask {
		height:800px;
	}
}
/* スマホ */
@media only screen and (max-width:599px) {
	.main_header_bg, .main_header_frame, .main_mask {
		height:250px;
	}
}

/*------------------------------*/
/* オンラインストアのバナー枠 */
.online_store_icon_frame {
	width:100%;
	position: absolute;
	right:20px;
	bottom:30px;
	z-index: 0;
	opacity:0;
}
/* オンラインストアのバナー */
.online_store_icon {
	display: block;
	margin-left:auto;
	width:20%;
	min-width: 80px;
}

/* スマホ */
@media only screen and (max-width:599px) {
	.online_store_icon_frame {
		bottom:-50px;
	}
}

/*------------------------------*/
/* サブタイトル */
.sub_title_logo {
	width:100%;
	max-width:600px;
}

/*------------------------------*/
/* 中央基準・左側フリー領域 */
.freebox_wrapper {
	display: flex;
	width: 100%;
}
/* 左側領域 */
.freebox_left {
	width: calc(50% - 400px);
	background-image: url('/image/index_left_bar_no.png');
	background-image: url('/image/index_left_bar.webp');
	background-position: center;
	display: flex;
	background-repeat: repeat-x;
	align-items: center;
	justify-content: flex-end;
}
/* 中央エリア */
.freebox_main {
	width: 800px;
}

/* 緑丸アイコン */
.green_circle {
	width:100%;
	max-width:50px;
	height:auto;
}

/*------------------------------*/
/* 緑色の画像帯 */
.index_green_bg {
	background-image: url('/image/index_green_bg_no.png');
	background-image: url('/image/index_green_bg.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* CONTENT */
.content_logo {
	width:100%;
	max-width:300px;
	height:auto;
}
/* スマホ */
@media only screen and (max-width:599px) {
	.content_logo {
		max-width:150px;
	}
}

/* READ MORE */
.read_more_frame {
	background-color: #ffffff;
	text-align:center;
	padding: 5px;
	max-width: 200px;
	color:#24ccb6;
	font-size:14px;
	font-weight: bold;
}

/* マウス */
.mouse_image {
	position: absolute;
	right:0px;
	top:50%;
	transform: translate(50%, -50%);
	-webkit-transform: translate(50%, -50%);
	height:350px;
}

/*------------------------------*/
/* SCROLL 枠 */
.scroll_frame {
	position:absolute;
	width:60px;
	left:50%;

	background-image: url('/image/vertical_line_no.png');
	background-image: url('/image/vertical_line.webp');
	background-position: center;
	background-repeat: repeat-y;

	writing-mode: vertical-rl; /* 縦書き */
	color:#24ccb6;
	font-size:12px;
}

/* 針 */
.needle_core {
	position: absolute;
	top:0p;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(50%, -50%);
	font-size:20px;
	transition: 0.3s;
	animation: needleMove 2.5s linear infinite;
}

/* アニメーション定義 */
@keyframes needleMove {
	0% { top: 0px; }
	100% { top: 100%; }
}

/*------------------------------*/
/* MAC 大枠 */
.mac_frame {
	position: relative;
	height: 600px;
}
/* タブレット */
@media only screen and (max-width:1024px) {
	.mac_frame {
		height: 500px;
	}
}

/* スマホ */
@media only screen and (max-width:599px) {
	.mac_frame {
		height: 400px;
	}
}

/* 左側の背景 */
.mac_frame::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;

	background-image: image-set(url('/image/mac_bg_left_1x.webp') 1x, url('/image/mac_bg_left.webp') 2x);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: right top;

	z-index: 0;
	pointer-events: none;
}

/* 右側の背景 */
.mac_frame::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;

	background-image: image-set(url('/image/mac_bg_right_1x.webp') 1x, url('/image/mac_bg_right.webp') 2x);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: left top;

	z-index: 0;
	pointer-events: none;
}

/* MACの背景写真 (中央配置) */
.mac_bg_frame {
	position:absolute;
	top:0px;
	left:50%;
	height: 100%;
	width:100%;
	max-width:1000px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);

	background-image: url('/image/mac_bg_no.png');
	background-image: image-set(url('/image/mac_bg_1x.webp') 1x, url('/image/mac_bg.webp') 2x);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

/* MACの写真 */
.mac_image {
	max-height:80%;
	max-width:100%;
}

/* WORKS */
.works_font {
	color:#24ccb6;
	font-size:50px;
	font-weight:bold;
	line-height:1;
}

/*------------------------------*/
/* SHOP 枠 */
.shop_frame {
	position: relative;
	height:400px;
}

/* SHOP左枠 (写真) */
.shop_frame_left {
	height:100%;
	width:60%;
}

/* SHOP右枠 (緑背景) */
.shop_frame_right {
	position: absolute;
	right:0px;
	bottom:-50px;
	width:60%;
	background-color: #24ccb6;
	margin-left:auto;
	color:#ffffff;
	padding:20px 20px;
}

/* SHOP右枠内のコンテンツ枠 */
.right_box_500 {
	max-width:calc(10% + 500px);
	margin-right:auto;
}

/* SHOP右枠内のコンテンツ枠内フレックス枠 */
.right_box_500_inner {
	display: flex;
	align-items: center;  /* 上下中央揃 */
}

/* WORKS 枠 */
.shop_font {
	width:50%;
	color:#ffffff;
	font-size:70px;
	font-weight:bold;
	line-height:1;
}

/* READ MORE 枠 */
.shop_read_more {
	width:50%;
}

/* タブレット */
@media only screen and (max-width:1024px) {

	/* SHOP左枠 (写真) */
	.shop_frame_left {
		width:80%;
	}
	/* SHOP右枠 (緑背景) */
	.shop_frame_right {
		width:80%;
	}
	/* WORKS 枠 */
	.shop_font {
		font-size:55px;
	}

}

/* スマホ */
@media only screen and (max-width:599px) {

	/* SHOP左枠 (写真) */
	.shop_frame_left {
		width:100%;
	}
	/* SHOP右枠 (緑背景) */
	.shop_frame_right {
		width:100%;
	}
	/* WORKS 枠 */
	.shop_font {
		font-size:40px;
	}

}

/*------------------------------*/
/* フッター部の画像 */
.top_fotter_image_frame {
	position: relative;
	height:300px;
}

/* タブレット */
@media only screen and (max-width:1024px) {

	/* フッター部の画像 */
	.top_fotter_image_frame {
		height:200px;
	}

}

/* スマホ */
@media only screen and (max-width:599px) {

	/* フッター部の画像 */
	.top_fotter_image_frame {
		height:100px;
	}

}


/* 左側の背景 */
.top_fotter_image_frame::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;

	background-image: image-set(url('/image/top_fotter_image_left_1x.webp') 1x, url('/image/top_fotter_image_left.webp') 2x);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: right top;

	z-index: 0;
	pointer-events: none;
}

/* 右側の背景 */
.top_fotter_image_frame::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;

	background-image: image-set(url('/image/top_fotter_image_right_1x.webp') 1x, url('/image/top_fotter_image_right.webp') 2x);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: left top;

	z-index: 0;
	pointer-events: none;
}

/* フッター部の画像 (中央) */
.top_fotter_image_center {
	position:absolute;
	top:0px;
	left:50%;
	height:100%;
	width:100%;
	max-width:1000px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);

	background-image: url('/image/top_fotter_image_no.png');
	background-image: url('/image/top_fotter_image.webp');
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
}

/*------------------------------*/
/* フッター */
/*------------------------------*/
/* フッター上部 */
.footer_box_top {
	margin-top:50px;
}

/*------------------------------*/
/* フォントカラー */
.color_24ccb6 {
	color:#24ccb6;
}