@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	vertical-align:bottom;
	outline:none;
	font-family: Meiryo;
}

/**/


.loadingWrap{
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index:200;
}
.loadingWrap div{
    position: absolute;
    top: 46%;
    left: 46%;
    margin-top: 0px;
    margin-left: 0px;
}

.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.cube1, .cube2 {
  background-color: #F26964;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

/**/

body {
	background: #000;
}

#contents_pc {
	position:relative;
	display:block;
}

#contents_sp {
	display:none;
}

#back_area {
}

#side_menu {
	position:fixed;
	top: 25%;
	right: 0;
	z-index: 15;
}

#menu {
	list-style: none;
}

#menu li {
	background: #fff;
	
	margin: 0 0 3px 0;
	text-align:center;
	font-size: 14px;
	border-radius: 10px 0px 0 10px;
}

#menu li.active {
	background: red;
}

#menu li a {
	color: #ff0000;
	text-decoration: none;
}

#menu li.active a {
	color: #fff;
}

#menu p {
	padding: 5px 13px;
}

#sns_btn {
	padding-top: 10px;
	text-align:center;
}

#sns_btn li {
	list-style: none;
	margin: 15px 0 25px 0;
}

.twitter_btn,.facebook_btn {
	opacity: 1;
	transition: all 0.2s;
}

.twitter_btn:hover,.facebook_btn:hover {
	opacity: 0.5;
}

#wrapper {
	position:relative;
	width: 140vh;
	margin: 0 auto;
	background-color: rgba(0,0,0,0.6);
	z-index: 10;
	overflow:hidden;
}

.slide1 {
	text-align:center;
}

.logo {
	position:absolute;
	top: 30px;
	left: 30px;
	width: 12vh;
	height: 5.15vh;
}

h1 {
	position:absolute;
	top: 0;
	left: 30px;
	font-size: 10px;
	color:#242221;
}

.main_copy {
	display:inline-block;
	margin: 3% 0 3% 0;
	line-height: 1.1em;
	letter-spacing: 0.1em;
	font-size: 10vh;
	text-align:left;
	color: #fff;
	text-decoration:none;
	font-weight:normal;
	font-family: "kozuka-mincho-pro";
}

.main_sub {
	display:inline-block;
	margin-bottom: 10vh;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	font-size: 3.1vh;
	text-align:left;
	color:#fff;
}

#top_merit {
	width: 75vh;
	margin: 0 auto;
}

.merit {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align:left;
	font-size: 3vh;
	color: #fff;
	list-style: none;
}

.merit img  {
	width: 6vh;
	margin: 0 20px 0 0;
}

.merit_sub {
	font-size: 1.5vh;
	text-align:left;
}

/* slide2 ---------------------- */

.slide2 {
	position:relative;
}


#main_copy2 {
	position:relative;
	width: 150vh;
	margin: 0 auto;
	margin-top: -2vh;
	padding-top: 2vh;
	padding-bottom: 2vh;
	text-align:center;
	-webkit-transform:rotate(-3deg);
	transform:rotate(-3deg);
	background: #f26964;
	list-style-type: none;
	z-index: 10;
}

.main_copy_space {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items:center;
	align-items:center;
	position:relative;
	left: -7vh;
	width: 100vh;
	margin: 0 auto;
}

#main_copy2 p {
	letter-spacing: 0.15em;
	font-family: "a-otf-ud-shin-go-pr6n";
	font-size: 2.6vh;
	font-weight:bold;
	color: #fff;
}

.slide2_photo {
	position: relative;
	display:block;
	width: 100vh;
	margin: 7vh auto 0;
	z-index: 9;
}

#service {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 100vh;
	margin: 2.5vh auto 0;
}

.service_text {
	width: 48.5vh;
	text-align: center;
	background: #fff;
}

.service_headline {
	padding: 3vh 0 2vh;
	font-size: 3.1vh;
	color: #f26964;
}

.service_main_text {
	display:inline-block;
	padding: 0 3vh 3vh 3vh;
	line-height: 1.5em;
	font-size: 2.3vh;
	text-align:left;
}

/* slide3 ---------------------- */

.slide3_maintext {
	width: 74vh;
	margin: 0 auto;
	padding: 1vh;
	font-size: 4vh;
	letter-spacing: 0.2em;
	color: #fff;
	text-align:center;
	background: #cf0404;
}

.slide3_square {
	width: 74vh;
	margin: -10px auto 0;
	text-align:center;
}

.slide3_square img {
	width: 8vh;
}

.slide3_subtext {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:center;
	align-items:center;
	margin: 2vh 0 3vh 0;
	font-size: 2.8vh;
	letter-spacing: 0.1em;
	color: #fff;
}

.slide3_subtext img {
	width: 3vh;
}

.slide3_subtext p {
	padding: 0 2vh;;
}

a.slide3_thumbnail {
	display:block;
	width: 74vh;
	margin: 0 auto;
	text-align:center;
	background: #fff;
}

a.slide3_thumbnail img {
	width: 74vh;
	opacity: 1;
	transition: all 0.3s;
}

.slide3_thumbnail img:hover {
	opacity: 0.8;
}

/* slide4 ---------------------- */

#main_copy4 {
	position:relative;
	width: 150vh;
	margin-top: -2vh;
	padding: 2vh 0;
	text-align:center;
	-webkit-transform:rotate(-3deg);
	transform:rotate(-3deg);
	background: #f4f4f2;
	list-style-type: none;
	z-index: 10;
}

#main_copy4 p {
	letter-spacing: 0.15em;
	font-family: "a-otf-ud-shin-go-pr6n";
	font-size: 2.6vh;
	font-weight:bold;
	color: #333;
}

.slide4_photo {
	position: relative;
	display:block;
	width: 100vh;
	margin: 50px auto 0;
	z-index: 9;
}

.slide4_text_area {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	width: 100vh;
	margin: 0 auto;
	color: #333;
	text-align:center;
}

.slide4_textbox{
	width: 28.3vh;
	margin-top: 2vh;
	padding: 1.8vh;
	background:#f4f4f2;
}

.slide4_textbox img {
	width: 7vh;
	margin-bottom: 2vh;
}

.slide4_textbox_headline {
	display:inline-block;
	text-align:left;
	margin-bottom: 2vh;
	font-size: 3.1vh;
	line-height: 1.1em;
}

.slide4_textbox_main {
	display:inline-block;
	text-align:left;
	margin-bottom: 2vh;
	font-size: 1.75vh;
}

.slide4_textbox_fotter {
	display:inline-block;
	text-align:right;
	width: 26vh;
	font-size: 1.65vh;
}

/* slide5 ---------------------- */

#main_copy5 {
	position:relative;
	width: 150vh;
	margin: -2vh auto 0;
	padding: 2vh 0;
	text-align:center;
	-webkit-transform:rotate(-3deg);
	transform:rotate(-3deg);
	background: #f26964;
	list-style-type: none;
	z-index: 10;
}

#main_copy5 p {
	letter-spacing: 0.15em;
	font-family: "a-otf-ud-shin-go-pr6n";
	font-size: 2.6vh;
	font-weight:bold;
	color: #fff;
}

.slide5_textbox {
	display: -webkit-box;
	display: -webkit-flex 0 0 auto;
	display: flex 0 0 auto;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	width: 100vh;
	margin: 6vh auto 0;
	background: #f4f4f2;
}

.slide5_image {
}

.slide5_image img {
	width: 35vh;
}

.slide5_maintext {
	width: 58.7vh;
	padding: 3vh 3vh 3vh 3.5vh;
}

.slide5_headline {
	font-size: 3.1vh;
	margin-bottom: 1vh;
}

.slide5_text {
	font-size: 1.8vh;
	line-height: 1.5em;
}

/* slide6 ---------------------- */

#main_copy6 {
	position:relative;
	width: 150vh;
	margin: -2vh auto 0;
	padding: 2vh 0;
	text-align:center;
	-webkit-transform:rotate(-3deg);
	transform:rotate(-3deg);
	background: #f4f4f2;
	list-style-type: none;
	z-index: 10;
}

#main_copy6 p {
	letter-spacing: 0.15em;
	font-family: "a-otf-ud-shin-go-pr6n";
	font-size: 2.6vh;
	font-weight:bold;
	color: #333;
}

.slide6_top_box {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	width: 100vh;
	margin: 10vh auto 7vh;
}

.slide6_top_box img {
	width:31.57vh;
	height:31.57vh;
}

.slide6_text_box {
	width: 76.9vh;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:center;
	align-items:center;
	-webkit-flex-flow: column nowrap;
	flex-flow: column nowrap;
	color: #fff;
}

.slide6_text_headline {
	font-size: 6vh;
	margin-bottom: 3vh;
}

.slide6_text_main {
	font-size: 3.2vh;
}

.slide6_text_box_bottom {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	width: 110vh;
	margin: 2vh auto 0;
}

.slide6_text_box_main1 {
	width: 37vh;
	height: 25vh;
	padding: 3vh;
	margin: 0 3vh 0 0;
	text-align:center;
	border: #fff 1px solid;
	color: #fff;
}

.slide6_text_box_main2 {
	width: 47.5vh;
	height: 25vh;
	padding: 3vh;
	text-align:center;
	border: #fff 1px solid;
	color: #fff;
}

.date_headline {
	font-size: 2.8vh;
	margin-bottom: 1vh;
}

.slide6 hr {
	margin-bottom: 2vh;
}

.slide6_data {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	font-size: 2.1vh;
	margin-bottom: 0.5vh;
}

.data_color {
	color:#ff8400;
}

.data_caution {
	width: 100vh;
	margin: 1vh auto 0;
	color: #fff;
	text-align:right;
}

.data_caution p {
	font-size: 1.3vh;
}

/* slide7 ---------------------- */

.slide7 {
	text-align:center;
	color: #fff;
}

.slide7_main_copy {
	margin-top: -8vh; 
	font-size: 6.5vh;
	margin-bottom: 3vh;
}

.slide7_sub_copy {
	display: inline-block;
	margin: 0 auto 4vh;;
	text-align:left;
	font-size: 3.3vh;
}

.slide7_box {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:center;
	justify-content:center;
	margin-bottom: 4vh;
}

.slide7_box_image {
}

.slide7_box_text {
	width: 85vh;
	padding: 4vh 6vh;;
	font-size: 2.5vh;
	text-align:left;
}

.slide7_bottom {
	background: #f26964;
}

.slide7_bottom_copy {
	display:inline-block;
	padding: 1.8vh 0 1.5vh;;
	font-size:3.7vh;
	line-height: 1.3em;
	text-align:left;	
}

.link_btn {
	width: 65vh;
	margin: 5vh auto 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:space-between;
	justify-content:space-between;
}

.link_btn a {
	text-decoration: none;
	color: #fff;
}

.bitoru_btn {
	border: 1px solid #fff;
	transition: all  0.2s;
	background: rgba(255,255,255,0)
}

.bitoru_btn img {
	width: 14vh;
	padding: 1.3vh 8vh 1vh;
}

.bitoru_btn:hover {
	background: rgba(255,255,255,0.3)
}

.order_btn {
	font-size: 2.85vh;
	line-height: 1.2em;
	border: 1px solid #fff;
	transition: all  0.2s;
	background: rgba(255,255,255,0)
}

.order_btn p {
	padding: 1.3vh 8vh 1vh;
}

.order_btn:hover {
	background: rgba(255,255,255,0.3)
}

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


#footer {
	position:fixed;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:center;
	justify-content:center;
	width: 100%;
	bottom: 15px;
	left: 0;
	font-size: 12px;
	color: #fff;
	text-align:center;
}

#footer p {
	font-size: 1.5vh;
}

/* スクロールカーソル */

#single2 {
	width:50px;
	margin: 10vh auto 0;	
	-webkit-animation-name: single2;
	animation-name: single2;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
#single2 .scroll-arrow-container {
	height: 20px;
	width: 20px;
	position: relative;
}
#single2 span {
	position: absolute;
	height: 4px;
	width: 30px;
	background-color: #7f7f7f;
}
#single2 span.arrow-left {
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
	left: -17px;
}
#single2 span.arrow-right {
	-webkit-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	transform: rotate(-30deg);
	right: -17px;
}
@-webkit-keyframes single2 {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
		opacity: 0;
	}
}

@media screen and (max-width:1024px) {
	
	#single2 {
	}
	
	#footer {
		width: 100%;
		bottom: 0.5vh;
	}
	
	
}

@media screen and (max-width:768px) {
	
	#contents_pc {
		display:none;
	}
	
	#contents_sp {
		display:block;
	}
	
	#contents_sp img {
		width: 100%;
	}
	
}