@charset "utf-8";

/* reset */
#wrap { width:auto; padding-bottom:91px; }
#header { width:920px; margin:0 auto; }
#globalNav { display:none; }
#footer ul { display:none; }
#footer { height:91px; }
/* font */
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 700;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 900;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.otf) format('opentype');
 }

/* iconfont */
@font-face {
    font-family: 'WebHostingHub-Glyphs';
    src: url('../font/webhostinghub-glyphs.eot');
    src: url('../font/webhostinghub-glyphs.eot?#iefix') format('embedded-opentype'),
         url('../font/webhostinghub-glyphs.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    -moz-font-feature-settings: "calt=0,liga=0";
}

a img { outline: none; }
.section {
	position:relative;
}
.anchor {
	position:absolute;
	top:-72px;
}
.inner {
	width:920px;
	font-family: 'Noto Sans Japanese', sans-serif;
	word-break:break-all;
	padding:40px 0 30px;
	margin:0 auto;
	position: relative;
}
.sectionTit {
	font-size:40px;
	font-weight:300;
}

/* loading */
#loading {
	width:100%;
	height:100%;
	background:#f5f5f5;
	position:fixed;
	left:0;
	top:0;
	z-index:9999;
}
.home #loading  { display:block; }
#loading #bar {
	width:200px;
	height:5px;
	background:#ccc;
	position:absolute;
	left:50%;
	top:50%;
	margin:0 0 0 -100px;
}
#loading #bar span {
	display:block;
	width:0;
	height:5px;
	background:#FF71A8;
	position:absolute;
	left:0;
	top:0;
}

/* pageNav */
#pageNav {
	width:100%;
/*	background:#ffdfed; */
	background:#fff;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size:20px;
	font-weight:700;
	text-align:center;
	box-shadow:0 0 2px rgba(0,0,0,0.4);
}
#pageNav.fixed {
	position:fixed;
	left:0;
	top:0;
	z-index:1000;
}
#pageNav ul {
	width:920px;
	margin:0 auto;
}
#pageNav li {
	display:inline-block;
	padding:0 15px;
}
#pageNav a {
	display:inline-block;
	color:#222;
	text-decoration:none;
/*	border-bottom:3px solid #ffdfed; */
	border-bottom:3px solid #fff;
	padding:20px 10px;
}
#pageNav a:hover {
	color:#FF3785;
	border-bottom:3px solid #FF3785;

}

/* keyVisual */
#keyVisual {
	background:#fff url(../images/ph_main.jpg) no-repeat center top; 
	box-shadow:0 0 100px rgba(200,200,200,0.2) inset;
}
#keyVisual .inner {
	height:630px;
	padding:0;
}
#keyVisual .play {
	width:126px;
	height:126px;
	background:url(../images/btn_keyvisual_movie_on.png);
	position:absolute;
	right:-50px;
	bottom:90px;
}
#keyVisual .bnrList {
	position:absolute;
	bottom:15px;
}
#keyVisual .bnrList li {
	width:180px;
	float:left;
	margin:0 5px 0 0;
}
#keyVisual .snsBtn {
	position:absolute;
	top:20px;
	right:-20px;
}
#keyVisual .snsBtn li { float:left; }
#keyVisual .snsBtn .twitter { width:100px; }
#keyVisual .snsBtn .facebook { width:150px; }

#keyVisual .youtube {
	width:350px;
	height:214px;
	position:absolute;
	right:0;
	bottom:20px;
	border:2px solid #fff;
	box-shadow:0 0 4px rgba(0,0,0,0.3);
}
#keyVisual .youtube:hover {
	border-color:#FE3887;
}
#keyVisual .bnr {
	display:block;
	width:500px;
	position:absolute;
	left:5px;
	bottom:15px;
}
#keyVisual .bnr img {
	width:100%;
}


/* howtouse */
#howtouse {
	background:url(../images/bg_houtouse.png) no-repeat center 70px;
}
#howtouse .sectionTit {
	height:55px;
	text-align:center;
	margin:0 0 30px;
}
#howtouse .step {
	font-size:14px;
	font-weight:500;
	text-align:center;
}
#howtouse .stepTit {
	font-size:24px;
	font-weight:500;
	margin:0 0 20px;
}
#howtouse .userComment {
	width:600px;
	background:#FA92AC;
	border-radius:10px;
	padding:10px 10px 15px;
	margin:0 auto;
}
#howtouse .commentTit {
	color:#fff;
	font-size:20px;
	font-weight:500;
	margin:0 0 10px;
}
#howtouse .lead {
	font-size:16px;
	font-weight:500;
	margin:0 0 20px;
}
#howtouse .subTxt {
	font-size:13px;
	margin:0 0 5px;
}
#howtouse .ph {
	margin:0 0 20px;
}
#howtouse .thumbList li {
	width:220px;
	float:left;
	padding:0 5px;
}
#howtouse .thumbList .thumb {
	margin:0 0 10px;
}
#howtouse .thumbList a {
	display:block;
	width:113px;
	margin:0 auto;
	position:relative;
}
.thumbList .zoom {
	position:absolute;
	right:-10px;
	bottom:-3px;
}
#howtouse .thumbList .txt {
	background:#FDF7C0;
	font-size:13px;
	font-weight:700;
	border-radius: 6px;
	padding: 20px 0;
	margin:0 0 10px;
}
#step1 { padding:120px 460px 0 40px; }
#step2 { height:200px; padding:80px 0 0 410px; }
#step2 .appDl li {
	padding:0 5px;
}
#step3 { height:470px; padding:80px 230px 0 0; }
#step4 { height:535px; padding:105px 0 0 225px; }
#step5 { padding:130px 0 0; }
#step5 .stepTit { font-size:26px; }

/* memorial */
#memorial { background:#F7EDD3; box-shadow:0 0 200px #ecd9ad inset; }
#memorial .inner {
	background:url(../images/ph_memorial_captuer.png) no-repeat left top;
	color:#4b422c;
	padding:40px 0 50px;
}
#memorial .contents {
	width:580px;
	padding: 40px 0 40px 340px;
}
#memorial .sectionTit {
	font-weight:400;
	margin:0 0 10px;
}
#memorial .contents .lead {
	font-size:20px;
	font-weight:700;
	margin:0 0 15px;
}
#memorial .contents .txt {
	font-size:15px;
	font-weight:700;
	margin:0 0 20px;
}
#memorial .contents .thumbList {
	margin: 0 -30px 20px 0;
}
#memorial .contents .thumbList li {
	width:130px;
	float:left;
	margin:0 17px 0 0;
	position:relative;
}
#memorial .contents .thumbList li:before {
	content:'';
	width:70px;
	height:20px;
	box-shadow:0 0 30px rgba(0,0,0,0.5);
	border-radius:50%;
	position:absolute;
	top:190px;
	left:30px;
	z-index:0;
}
#memorial .contents .thumbList a {
	display:block;
	line-height:0;
	box-shadow:0 0 1px rgba(0,0,0,0.5);
	margin:0 0 10px;
	position:relative;
	z-idnex:1;
}
#memorial .contents .thumbList .caption {
	font-size:12px;
	font-weight:700;
	text-align:center;
}
#memorial .contents .other {
	background:#FFF7C1;
	padding:10px;
	border-radius:6px;
}
#memorial .contents .other ul {
	margin:0 0 5px;
}
#memorial .contents .other .listTit {
	font-size:14px;
	font-weight:700;
	margin:0 0 5px;
}
#memorial .contents .other li {
	float:left;
	font-size:12px;
	font-weight:500;
	margin:0 10px 0 0;
}
#memorial .contents .bg_cap {
	width:340px;
	font-size:12px;
	font-weight:500;
	text-align:center;
	position:absolute;
	left:0;
}

#memorial .example .sectionTit {
	font-size:28px;
	text-align:center;
	margin:0 0 30px;
}
#memorial .example .thumbList li {
	width: 220px;

	float:left;
	margin:0 10px 0 0;
	position:relative;
}
#memorial .example .thumbList a {
	display:block;
	height:440px;
	overflow:hidden;
	
	cursor:default;
}
#memorial .example .thumbList a:hover img {
	opacity:1;
}
#memorial .example .thumbList .caption {
	font-size:13px;
	font-weight:500;
	padding:10px 0;
}
#memorial .example .thumbList .date {
	font-size:12px;
}
/* faq */
#faq {
	background:#f9f9f9;
}
#faq .sectionTit {
	margin:0 0 30px;
}
#faq .catTit {
	color:#f75391;
	font-size:28px;
	margin:0 0 30px;
}
.faqList {
	margin:0 0 40px;
}
.faqList dt {
	font-size:17px;
	font-weight:700;
	margin:0 0 10px;
}
.faqList dt:before {
	content:'Q.';
	color:#f75391;
	font-weight:800;
	margin:0 5px 0 0;
}
.faqList dd {
	background:#FDFCB9;
	font-size:14px;
	font-weight:500;
	text-indent:-17px;
	padding:10px 25px 15px 45px;
	margin:0 0 20px;
}
.faqList dd strong {
	display:block;
	color:#f75391;
	font-size:24px;
	font-weight:700;
	margin:0 0 5px;
}
.faqList dd:before {
	content:'A.';
	color:#f75391;
	font-weight:800;
	margin:0 3px 0 0;
}
.faqList dd .subTxt {
	display:block;
	font-size:13px;
	padding:5px 0 0;
}

/* download */
#download { background:#f0f0f0; box-shadow:0 0 200px rgba(0,0,0,0.2) inset; }
#download .inner {
	width:560px;
	background:url(../images/ph_download_capture.png) no-repeat left top;
	padding:100px 0 60px 360px;
}
#download .sectionTit {
	font-size:44px;
	letter-spacing:-0.04em;
	margin:0 0 30px;
}
#download .appDl {
	margin:0 0 30px;
}
#download .listTit {
	font-size:16px;
	font-weight:700;
	margin:0 0 15px;
}
#download .deviceList li {
	font-size:12px;
	font-weight:500;
	text-align:justify;
	text-justify:inter-ideograph;
	margin:0 0 10px;
	position:relative;
}
#download .deviceList li:before {
	content: '\2713';
	color:#aaa;
	font-family:'WebHostingHub-Glyphs';
	position:absolute;
	left:-15px;
	top:2px;
}

.appDl {
	text-align:center;
}
.appDl li {
	width:171px;
	display:inline-block;
	padding:0 15px;
}
.appDl li .mail {
	color:#555;
	font-size:15px;
	font-weight:700;
	text-decoration:none;
	
}
.appDl li .mail:before {
	content:'\f049';
	font-family:'WebHostingHub-Glyphs';
	font-weight:normal;
	margin:0 2px 0 0;
	position:relative;
	top:2px;
}
.appDl li .mail:hover {
	color:#FF0066;
}