@charset "utf-8";

/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

　01. 大枠
　02. コンテンツ

******************************************************************************* */

/*
 * "Noto Sans CJK" licensed under the SIL Open Font License
 * https://www.google.com/get/noto/help/cjk/
 */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 500;
	src: url('/common/fonts/NotoSansCJKjp-Medium.woff2') format('woff2'),
		url('/common/fonts/NotoSansCJKjp-Medium.woff') format('woff'),
		url('/common/fonts/NotoSansCJKjp-Medium.otf') format('opentype');
}

/* ==

　01. 大枠

=============================================================================== */
#main {
	border-top: 3px solid #dddddd;
	color: #000;
	font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, Helvetica, sans-serif;
}
.main_in {
	width: 100%;
	margin: 0 auto;
}
.comNav {
	margin-bottom: 0;
}
.main_head_in {
	padding: 6px 0;
}
.main_head_txt {
	margin-top: 10px;
	text-align: left;
	color: #666;
	display: none;
}
h1 {
	max-width: 1240px;
	margin: 0 auto;
  padding: 0 10px;
	font-size: 26px;
}

/* ==

　02. コンテンツ

=============================================================================== */

/* movie
------------------------------------------------------------------------------- */
.loupeVideo {
	width: 950px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -265px 0 0 -475px;
	z-index: 11111;
}
.loupeVideo #movie01 {
	width: 100%;
	opacity: 0;
}
.loupeVideo_skip {
	position: absolute;
	top: 20px;
	right: 20px;
	display: none;
}

/* loupeコンテンツ
------------------------------------------------------------------------------- */
.loupeBg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
/*
.loupeBg:after {
	content: "";
	background: url(/about/community/servicefield/images/indexx_loading.png) no-repeat 0 0;
	width: 179px;
	height: 37px;
	position: absolute;
	top: 20%;
	left: 50%;
	margin: -18px 0 0 -90px;
}
.loupeBg.loupeBg-loaded:after {
	display: none;
}
*/
.loupeBg .loupeBg_in {
	width: 100%;
	height: 100%;
	background: url(/about/community/servicefield/images/index_visual01.jpg) no-repeat 0 0;
	background-size: 100%;
}
.loupeBg .loupeBg_overlay {
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.loupeArea_in.isdetail { pointer-events: none; }
.loupeWrap {
	overflow: hidden;
	width: 100%;
	height: auto;
  min-width: 1040px;
  min-height: 1100px;
	position: relative;
	margin: 0 auto;
}
.loupeArea {
	display: none;
}
.loupeArea .loupeArea_bg01 {
	width: 100%;
	height: auto;
	height: auto;
}
.loupe {
	border-radius: 150px;
	border: 3px solid #fff;
	background-color: #333;
}
.loupe::after {
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; left:0;
	border-radius: 150px;
  box-shadow:inset 3px 3px 10px rgba(0,0,0,1);
  pointer-events: none;
}
#main .loupeNote01 {
	font-size: 14px;
  margin-top: 5px;
  padding-right: 10px;
  color: #666;
  text-align: right;
}

/* pin
------------------------------------------------------------------------------- */
#pins {
	position: absolute;
	top: 0;
	left: 0;
	width: 1240px;
	height: 1240px;
	z-index: 1;
}
.pin {
	position: absolute;
	z-index: 11;
	cursor: pointer;
}
.pin.pinAnimate {
  animation: pinAnimate 1s linear 0s 1;
  animation-iteration-count: infinite;
}
@keyframes pinAnimate {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  7%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  15%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  25%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  35%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  50% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
#pin01 { top: 1154px;left: 455px; }
#pin02 { top: 895px;left: 145px; }
#pin03 { top: 124px;left: 618px; }
#pin04 { top: 1272px;left: 430px; }
#pin05 { top: 628px;left: 1604px; }
#pin06 { top: 510px;left: 2142px; }
#pin07 { top: 1088px;left: 1107px; }
#pin08 { top: 304px;left: 1263px; }
#pin09 { top: 471px;left: 1683px; }
#pin10 { top: 507px;left: 2332px; }
#pin11 { top: 30px;left: 2176px; }
#pin12 { top: 143px;left: 821px; }
#pin13 { top: 656px;left: 401px; }
#pin14 { top: 717px;left: 145px; }
#pin15 { top: 731px;left: 847px; }
#pin16 { top: 88px;left: 1507px; }
#pin17 { top: 824px;left: 1149px; }
#pin18 { top: 433px;left: 2374px; }
#pin19 { top: 879px;left: 1927px; }
#pin20 { top: 1036px;left: 779px; }
#pin21 { top: 896px;left: 934px; }
#pin22 { top: 377px;left: 2100px; }
#pin23 { top: 789px;left: 1661px; }
#pin24 { top: 234px;left: 113px; }
#pin25 { top: 187px;left: 180px; }
#pin26 { top: 250px;left: 1191px; }
#pin27 { top: 291px;left: 1795px; }
#pin28 { top: 534px;left: 1018px; }
#pin29 { top: 787px;left: 2274px; }
#pin30 { top: 1094px;left: 2241px; }
#pin31 { top: 1009px;left: 54px; }
#pin32 { top: 438px;left: 1272px; }
#pin33 { top: 450px;left: 133px; }
#pin34 { top: 760px;left: 1764px; }
#pin35 { top: 1181px;left: 285px; }
#pin36 { top: 406px;left: 1030px; }
#pin37 { top: 205px;left: 2163px; }
#pin38 { top: 598px;left: 2253px; }
#pin39 { top: 1475px;left: 290px; }
#pin40 { top: 1436px;left: 30px; }
#pin41 { top: 1760px;left: 240px; }
#pin42 { top: 1730px;left: 2220px; }
#pin43 { top: 1414px;left: 865px; }
#pin44 { top: 1396px;left: 2220px; }
#pin45 { top: 1862px;left: 865px; }
#pin46 { top: 2220px;left: 955px; }
#pin47 { top: 2020px;left: 1740px; }
#pin48 { top: 1994px;left: 1422px; }
#pin49 { top: 2350px;left: 330px; }
#pin50 { top: 1410px;left: 1410px; }

/*
	detail
*/
.detail {
	width: 828px;
	height: 508px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -372px;
	margin-top: -228px;
	display: none;
	z-index: 1112;
}
.detailBg {
	width: 100%;
	height: 100%;
	background-color: #000;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0.5;
	z-index: 1111;
}
.detailBg:after {
	content: "";
	background: url(/about/community/servicefield/images/indexx_loading.png) no-repeat 0 0;
	width: 179px;
	height: 37px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -18px 0 0 -90px;
}
.detailBg.detailBg-loaded:after {
	display: none;
}
.detail_in {
	width: 820px;
	height: 500px;
	position: relative;
}
.detail .detail_colL {
	width: 410px;
	height: 500px;
	float: left;
}
.detail .detail_colR {
	position: relative;
	width: 350px;
	height: 380px;
	float: right;
	background-color: #fff;
	padding: 120px 30px 0;
}
.detail .detail_title .detail_icon {
	font-size: 16px;
	background: url(/about/community/servicefield/images/index_icon01.png) no-repeat 0 0;
	width: 42px;
	height: 57px;
	display: inline-block;
	text-align: center;
	margin-right: 20px;
	padding-top: 7px;
	float: left;
}
.detail .detail_title h2 {
	font-size: 32px;
	font-weight: bold;
	display: table;
	height: 64px;
}
.detail .detail_title h2 span {
	display: table-cell;
	vertical-align: middle;
}
.detail .detail_txt {
	color: #666;
	line-height: 1.8;
}
.detail .detail_more {
	width: 100%;
	text-align: center;
  position: absolute;
  bottom: 48px;
  left: 0;
}
.detail .detail_close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 19px;
  height: 19px;
  background: url(/about/community/servicefield/images/index_icon03.png) no-repeat 0 0;
  cursor: pointer;
}
.detail .detail_in:before {
	content: "";
	width: 820px;
	height: 500px;
	background: url(/about/community/servicefield/images/index_bg01.png) repeat 0 0;
	position: absolute;
	bottom: -8px;
	right: -8px;
	z-index: -1;
}

/*
	tutorial
*/
.loupeTutorial {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -280px;
	margin-top: -268px;
	display: none;
	z-index: 1112;
}
.loupeTutorial:before {
	content: "";
  width: 560px;
  height: 535px;
	background: url(/about/community/servicefield/images/index_bg01.png) repeat 0 0;
	position: absolute;
	bottom: -8px;
	right: -8px;
	z-index: -1;
}
.loupeTutorial 	.loupeTutorial_close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 19px;
  height: 19px;
  background: url(/about/community/servicefield/images/index_icon03.png) no-repeat 0 0;
  cursor: pointer;
}
.loupeTutorial .loupeTutorial_head {
	padding-top: 20px;
}
.loupeTutorial .loupeTutorial_in {
	width: 560px;
	height: 536px;
	background-color: #fff;
}
.loupeTutorial .loupeTutorial_title {
	margin-top: 20px;
	margin-bottom: 10px;
	line-height: 1.2;
	padding-left: 45px;
	background: url(/about/community/servicefield/images/index_icon01.png) no-repeat 0 center;
	background-size: 35px;
}
.loupeTutorial .loupeTutorial_title_in01 {
	font-size: 16px;
}
.loupeTutorial .loupeTutorial_title_in02 {
  font-size: 40px;
  margin-left: -5px;
  letter-spacing: -4px;
}
.loupeTutorial .loupeTutorial_title_in03 {
	font-size: 28px;
  letter-spacing: -2px;
}
.loupeTutorial .loupeTutorial_title-02 {
	font-size: 40px;
}
.loupeTutorial .loupeTutorial_txt {
	color: #666;
/* 	min-height: 60px; */
	letter-spacing: -1px;
}
#main .loupeTutorial_item-02 .loupeTutorial_title-02,
#main .loupeTutorial_item-03 .loupeTutorial_title-02 {
  font-size: 34px;
  margin-top: 10px;
}
#main .loupeTutorial_item-01 .loupeTutorial_txt {
	margin-bottom: 32px;
}
#main .loupeTutorial_item-02 .loupeTutorial_txt,
#main .loupeTutorial_item-03 .loupeTutorial_txt {
	margin-bottom: 35px;
}
.loupeTutorial .loupeTutorial_slider {
	width: 494px;
	margin: 15px auto 0;
}
.loupeTutorial .loupeTutorial_btn {
	width: 314px;
	margin: 0 auto 20px;
	background: url(/about/community/servicefield/images/index_bg03.png) no-repeat 0 0;
}
.loupeTutorial .loupeTutorial_btn.hover {
	background: url(/about/community/servicefield/images/index_bg03_on.png) no-repeat 0 0;
}
.loupeTutorial .loupeTutorial_btn a {
	width: 314px;
	height: 43px;
	padding-top: 11px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-size: 18px;
}
.loupeTutorial .loupeTutorial_btn.hover a {
	color: #f80348;
}

/* カルーセル
------------------------------------------------------------------------------- */
.detail .slick-dots {
	bottom: 10px;
}
.slick-dots li {
	margin: 0 2px;
}
.slick-dots li button {
	background-color: #bfbfbf;
	border-radius: 6px;
	width: 12px;
	height: 12px;
}
.slick-dots li button:before {
	content: none;
}
.slick-dots li.slick-active button {
	background-color: #f80348;
}