@charset "UTF-8";
/* CSS Document */

/* web font
----------------------------------------------- */
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);


/* reset
----------------------------------------------- */

/*要素のフォントサイズやマージン・パディングをリセット*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, a,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, select, input,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
	font-weight: normal;
    vertical-align: baseline;
    background: transparent;
}

html {
	font-size: 62.5%;/*ベースを10px*/
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	-webkit-text-size-adjust: 100%;
	line-height: 1;/*行の高さをフォントサイズと同じに*/
	word-break: break-all;
	color: #666666;
}

/*インライン要素をブロック要素へ変更*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display: block;
}

/*マーカー（行頭記号）を表示しないように*/
dt, dd, ul, li {
    list-style: none;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*縦方向の揃え位置を中央揃えに指定*/
input, select {
    vertical-align:middle;
}

a {
	cursor: pointer;
	color: #666666;
}

a:link{
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

*, *:before, *:after {
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

img {
	border: none;
	vertical-align: bottom;
	font-size:0;
	line-height: 0;
}

#container {
	overflow: hidden;
}

/*　clearfix
----------------------------------------------- */

.cf {
	zoom: 1;
}

.cf:before,
.cf:after {
	content: "";
	display: table;
}

.cf:after {
	 clear: both;
}

/*　共通スタイル
----------------------------------------------- */

.inner {
	width: 1000px;
	margin: 0 auto;
	max-width: 1000px;
}

.animated {
	opacity: 0;
}

.dummyPanel {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	z-index:999;
}

.fp-viewing-firstPage #header {
	display: none;
}

.fp-viewing-firstPage .sns_box {
	display: none;
}

.font_yellow {
	color: #ffdc45;
}

.font_blue {
	color: #1ac1f1;
}

.font_pink {
	color: #f29bc1;
}

.font_purple {
	color: #8490c8;
}

.font_darkpink {
	color: #F85CA2;
}

.font_green {
	color: #84cb29;
}

.bd_midashi {
	padding: 5px 0 5px 20px;/*上下 左右の余白*/
	color: #95b0bd;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 1px #95b0bd;/*左線*/
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: 700;
	margin-bottom: 30px;
	letter-spacing: 2px;
}


/* トップページ / ヘッダー
----------------------------------------------- */

#header {
	position: fixed;
	z-index: 999;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100%;
}

#header .inner {
	display: -webkit-box;/* Androidブラウザ用 */
	display: -moz-box;/* Firefox21 */
	display: -ms-flexbox;/* IE10 */
	display: -webkit-flex;/* safari（PC）用 */
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-webkit-justify-content:space-between;
	justify-content:space-between;
}

#header h1 {
	padding-top: 45px;
}

#header .online_shop_btn {
	padding-top: 55px;
}

#header .online_shop_btn a {
	background-color: #95b0bd;
	padding: 8px 10px;
	color: #ffffff;
	font-size: 14px;
	letter-spacing: 1px;
}

#header .online_shop_btn a:hover {
	opacity: 0.6;
}

/* sns_box
----------------------------------------------- */

.sns_box {
	position: absolute;
	z-index: 999;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.sns_box ul {

}

.sns_box ul li {
	margin-bottom: 25px;
	width: 30px;
	text-align: center;
}

/*-----------------------------------------------

トップページ

----------------------------------------------- */

/* stage01
----------------------------------------------- */

.stage01 {
	position: relative;
	width: 100%;
}

.inner_box {
	border: 10px solid #95b0bd;
	width: 100%;
	height: 100%;
	display: -webkit-box;/* Androidブラウザ用 */
	display: -moz-box;/* Firefox21 */
	display: -ms-flexbox;/* IE10 */
	display: -webkit-flex;/* safari（PC）用 */
	display: flex;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	-webkit-box-align: center;
	align-items: center;
	padding: 30px 0;
}
.stage01 .logo {
	width: 71.8%;
	margin: 0 auto;
	text-align: center;
}

.stage01 .logo img {
	max-width: 718px;
	width: 100%;
	height: auto;
}

.stage01 .scroll_icon {
	position: absolute;
	z-index: 999;
	left: 50%;
	bottom: 30px;
	transform: translate(-50%, -50%);
	text-align: center;
}

/* stage02
----------------------------------------------- */

.stage02 {
	position: relative;
}

.stage02 .inner_box {
	border: 10px solid #95b0bd;
	width: 100%;
	height: 100%;
	padding: 30px 0;
}

.stage02 .midashi {
	font-family: "a-otf-futo-go-b101-pr6n",sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	font-size: 1.8rem;
	letter-spacing: 6px;
	margin-bottom: 30px;
	text-align: center;
}

.stage02 .content_btn_box {
	max-width: 1000px;
}

.stage02 ul.content_top_box {
	display: -webkit-box;/* Androidブラウザ用 */
	display: -moz-box;/* Firefox21 */
	display: -ms-flexbox;/* IE10 */
	display: -webkit-flex;/* safari（PC）用 */
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	-webkit-align-items: center;
	-ms-flex-align: center;
	-webkit-box-align: center;
	align-items: center;
	width: 1000px;
	margin: 0 auto 35px;
}

.stage02 ul.content_top_box li {

}

.stage02 ul li .tuzuru_img,
.stage02 ul li .tukuru_img,
.stage02 ul li .odekake_img,
.stage02 ul li .tanosimu_img,
.stage02 ul li .otome_moyou_img,
.stage02 ul li .otome_mado_img,
.stage02 ul li .otome_gokoro_img,
.stage02 ul li .brand_img {
	position: relative;
	margin-bottom: 20px;
	width: 200px;
	text-align: center;
}

.stage02 ul li .img {
	position: relative;
	margin-bottom: 20px;
	width: 200px;
	text-align: center;
}

.stage02 ul li .ttl {
	font-family: "futura-pt",sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	font-size: 2.4rem;
	letter-spacing: 3px;
	color: #95b0bd;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	z-index: -1;
}

.stage02 ul li .ttl span {
	font-family: "futura-pt",sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 2px;
	color: #F85CA2;
	text-align: center;
	display: block;
	margin-top: 15px;
	-webkit-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-delay: 2s;
	-webkit-animation-iteration-count: 3;
	-ms-animation-iteration-count: 3;
	animation-iteration-count: 3;
}

.stage02 ul li a:hover > .ttl {
	display: none;
}

.stage02 ul li .text_box {
	text-align: center;
}

.stage02 ul li .text_box .daiji {
	margin-bottom: 15px;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 3px;
}

.stage02 ul li .text_box p {
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.8em;
	letter-spacing: 2px;
}

.stage02 ul.content_bottom_box {
	display: -webkit-box;/* Androidブラウザ用 */
	display: -moz-box;/* Firefox21 */
	display: -ms-flexbox;/* IE10 */
	display: -webkit-flex;/* safari（PC）用 */
	display: flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	-webkit-align-items: center;
	-ms-flex-align: center;
	-webkit-box-align: center;
	align-items: center;
	width: 1000px;
	margin: 0 auto 35px;
}

.stage02 ul.content_bottom_box li {

}

.circle {
    animation-name: css3RotationGraphic;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 20s;
    -webkit-animation-name: css3RotationGraphic;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;
    -moz-animation-name: css3RotationGraphic;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 20s;
}

.tuzuru_circle {
    animation-name: css3RotationGraphic;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 20s;
    -webkit-animation-name: css3RotationGraphic;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;
    -moz-animation-name: css3RotationGraphic;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 20s;
}
@keyframes css3RotationGraphic {
  0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@-webkit-keyframes css3RotationGraphic {
  0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes css3RotationGraphic {
  0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}

.stage02 .scroll_icon {
	text-align: center;
}



/* stage03
----------------------------------------------- */

.stage03 {
	position: relative;
}

.stage03 .inner_box {
	border: 10px solid #95b0bd;
	width: 100%;
	height: 100%;
	padding: 30px 0;
}

.stage03 .midashi {
	font-family: "a-otf-futo-go-b101-pr6n",sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	font-size: 1.8rem;
	letter-spacing: 6px;
	margin-bottom: 30px;
	text-align: center;
}

.stage03 .shop_jyoho_box {
	max-width: 1000px;
	position: relative;
}

.stage03 .shop_box {
	display: table;
}

.stage03 .shop_box .box_l {
	display: table-cell;
	width: 560px;
	padding-right: 60px;
	position: relative;
}

.stage03 .shop_box .box_l table {
	width: 560px;
	font-size: 14px;
	font-size: 1.4rem;
	background-color: #ffffff;
}

.stage03 .shop_box .box_l table th {
	text-align: center;
	vertical-align: middle;
	width: 80px;
	height: 30px;
	color: #ffffff;
}

.stage03 .shop_box .box_l table td {
	text-align: center;
	vertical-align: middle;
}

.stage03 .shop_box .box_l table td.w80 {
	width: 80px;
	height: 80px;
}

.stage03 .shop_box .box_l table td.h30 {
	height: 30px;
}

.stage03 .shop_box .box_l table .bd_left_top_right {
	border-left: 1px solid #95b0bd;
	border-top: 1px solid #95b0bd;
	border-right: 1px solid #95b0bd;
}

.stage03 .shop_box .box_l table .bd_left_bottom_right {
	border-left: 1px solid #95b0bd;
	border-bottom: 1px solid #95b0bd;
	border-right: 1px solid #95b0bd;
}

.stage03 .shop_box .box_l table .bd_bottom_right {
	border-bottom: 1px solid #95b0bd;
	border-right: 1px solid #95b0bd;
}

.stage03 .shop_box .box_l table .white_bd_left_bottom_right {
	border-left: 1px solid #95b0bd;
	border-bottom: 1px solid #95b0bd;
	border-right: 1px solid #ffffff;
}

.stage03 .shop_box .box_l table .white_bd_bottom_right {
	border-bottom: 1px solid #95b0bd;
	border-right: 1px solid #ffffff;
}

.stage03 .shop_box .box_l table .bg_gray {
	background-color: #95b0bd;
}

.stage03 .shop_box .box_l table .bg_space_gray {
	background-color: #eaeff2;
}

.stage03 .shop_box .box_l table .font_bold {
	font-weight: 700;
}

.stage03 .shop_box .box_l table .font_space {
	letter-spacing: 1px;
}

.stage03 .shop_box .box_l table .yellow_maru {
	display: inline-block;
	border-radius: 50%;
    height: 34px;
    width: 34px;
	background-color: #ffdc45;
	line-height: 34px;
	color: #ffffff;
}

.stage03 .shop_box .box_l table .blue_maru {
	display: inline-block;
	border-radius: 50%;
    height: 34px;
    width: 34px;
	background-color: #1ac1f1;
	line-height: 34px;
	color: #ffffff;
}

.stage03 .shop_box .box_l table .pink_maru {
	display: inline-block;
	border-radius: 50%;
    height: 34px;
    width: 34px;
	background-color: #f29bc1;
	line-height: 34px;
	color: #ffffff;
}

.stage03 .shop_box .box_l table .green_maru {
	display: inline-block;
	border-radius: 50%;
    height: 34px;
    width: 34px;
	background-color: #84cb29;
	line-height: 34px;
	color: #ffffff;
}

.stage03 .shop_box .box_l .font_kome {
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 1px;
	margin-top: 20px;
	line-height: 1.6em;
}

.stage03 .shop_box .box_l .font_kome a {
	text-decoration: underline;
	color: #F85CA2;
}

.stage03 .shop_box .box_l .font_kome a:hover {
	opacity: 0.6;
}

.stage03 .shop_box .box_l .anniversary_icon {
  position: absolute;
  top: 160px;
  right: 40px;
  width: 55px;
}

.stage03 .shop_box .box_l .anniversary_icon img {
	max-width: 100%;
}

.stage03 .shop_box .box_l .event_icon {
	position: absolute;
	top: 240px;
	left: -30px;
}

.stage03 .shop_box .box_l .event_icon a {
	transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	-ms-transition: .2s linear;
}

.stage03 .shop_box .box_l .event_icon a:hover {
	opacity: 0.8;
}

.stage03 .shop_box .box_r {
	display: table-cell;
	width: 380px;
}

.stage03 .shop_box .box_r .jyoho_box {
	margin-bottom: 35px;
}

.stage03 .shop_box .box_r .jyoho_box p {
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.8em;
}

.stage03 .shop_box .box_r .access_box {

}

.stage03 .shop_box .box_r .access_box .btn {
	text-align: right;
}

.stage03 .shop_box .box_r .access_box .btn a {
	display: inline-block;
	font-size: 14px;
	font-size: 1.4rem;
	position: relative;
	padding-bottom: 10px;
	border-bottom: 1px solid #95b0bd;
	padding-left: 20px;
	letter-spacing: 1px;
}

.stage03 .shop_box .box_r .access_box .btn a:before {
	content: url(../../img/common_img/exlink_icon.png);
    position: absolute;
    top: 4px;
	left: 0;
}

.stage03 .shop_box .box_r .access_box .btn a:hover {
	color: #95b0bd;
}

.stage03 .scroll_icon {
	text-align: center;
}

/* footer
----------------------------------------------- */

#footer {
	margin-top: 35px;
}

#footer .copy {
	position: absolute;
	bottom: 0px;
	right: 0;
	font-size: 10px;
	font-size: 1.0rem;
	color: #95b0bd;
	letter-spacing: 2px;
}