@charset "UTF-8";
/*リセット
--------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
	font-feature-settings: "palt";
}
html {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
q, blockquote {
	quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none;
}
a img {
	border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block;
}

@font-face {
	font-family: 'apercu';
	font-style: normal;
	font-weight: 100;
	src: url("../font/apercu/apercu_regular_pro.eot");
	src: url("../font/apercu/apercu_regular_pro.eot?#iefix") format("embedded-opentype"), url("../font/apercu/apercu_regular_pro.woff") format("woff"), url("../font/apercu/apercu_regular_pro.ttf") format("truetype");
	/* Safari, Android, iOS */ }

html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
} 
body {
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
	line-height:180%;
	font-family: 'YuGothic','游ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック', arial, helvetica, sans-serif;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

p {
	margin: 0;
	padding: 0;
}

h1 {
	margin: 0;
	padding: 0;
	display: block;
}

img {
	width: 100%;
	vertical-align: bottom;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover{
	opacity: 0.5 ;
}

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
}


/*--------------------
 animation
 ---------------------*/
.invisible {
	transition: opacity 0.2s ease;
	opacity: 0.0;
}

.visible {
	transition: opacity 0.2s ease;
	opacity: 1.0;
}

.animated{
	animation-duration:0.1s;
}

 /* ------------------------main------------------------ */

.magictime {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}
.puffIn {
  -webkit-animation-name: puffIn;
          animation-name: puffIn;
}
@-webkit-keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1.1,1.1);
            transform: scale(1.1,1.1);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes puffIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1.1,1.1);
            transform: scale(1.1,1.1);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}

#main {
	width:100%;
	padding-bottom:10%;
}
.main__image {
	width: 100%;
/*	height: 100vh;*/
	height:0;
	padding-top: 180%;
	background:url("../images/main.jpg");
	background-size: cover;
	background-position: center;
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.main__image--logo {
	width:200px;
	margin:-180% auto 0 auto;
	animation-delay: 0.5s;
}
.main__image--logo .pc {
	display:none;
}
.main__image--copyright {
	width:200px;
	margin:15px auto 0 auto;
	display:block;
}
.main__title {
	width:85%;
	max-width:500px;
	margin:30px auto 0 auto;
	animation-delay: 1.5s;
}
.main__lead {
	width:200px;
	margin:15px auto 0 auto;
	animation-delay: 2.0s;
}
/*
.main__scrolldown {
	width:52px;
	margin:35px auto 0 auto;
	display:block;
}*/

/* アニメーション設定 */
.arrowWrap {
	margin:50px auto;
}
.arrow1 {
  width: 15px;
  margin: 0 auto;
  -webkit-animation: arrow1 2s linear 0s infinite normal;
  animation: arrow1 2s linear 0s infinite normal;
}
.arrow2 {
  width: 15px;
  margin: 0 auto;
  -webkit-animation: arrow2 2s linear 0s infinite;
  animation: arrow2 2s linear 0s infinite;
}
.arrow1 span,
.arrow2 span {
  position: relative;
  display: block;
  left: 50%;
}
.arrow1 span {
  margin-top: -10px;
}
.arrow1 span:before,
.arrow2 span:before {
  content: '';
  width: 35px;
  height: 30px;
  border: 0;
  border-top: solid 1px #999;
  border-right: solid 1px #999;
   -webkit-transform: rotate(135deg);
  transform: rotate(150deg) skewX(30deg) translate(0px,10px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
}

@keyframes arrow1 {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  20% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  40% {
    -webkit-transform: translate3d(-50%, 10px, 0);
    transform: translate3d(-50%, 10px, 0);
  }
  60% {
    -webkit-transform: translate3d(-50%, 10px, 0);
    transform: translate3d(-50%, 10px, 0);
  }
  80% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes arrow2 {
  0% {
    -webkit-transform: translate3d(-50%, 5px, 0);
    transform: translate3d(-50%, 5px, 0);
  }
  20% {
    -webkit-transform: translate3d(-50%, 15px, 0);
    transform: translate3d(-50%, 15px, 0);
  }
  40% {
    -webkit-transform: translate3d(-50%, 15px, 0);
    transform: translate3d(-50%, 15px, 0);
  }
  60% {
    -webkit-transform: translate3d(-50%, 15px, 0);
    transform: translate3d(-50%, 15px, 0);
  }
  80% {
    -webkit-transform: translate3d(-50%, 5px, 0);
    transform: translate3d(-50%, 5px, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 5px, 0);
    transform: translate3d(-50%, 5px, 0);
  }
}


 /* ------------------------item------------------------ */
.item {
	width:100%;
}

 /* -------item__main------- */
.item__main.item01 {
	background:#d8caba;
}
.item__main.item02 {
	background:#d8d6d4;
}
.item__main {
	padding:10%;
}
.item__main--title {
	margin:0 0 10px 0;
	display:block;
}
.item01 .item__main--title {
	width:192px;
}
.item02 .item__main--title {
	width:223px;
}
.item__main--lead {
	margin:0 0 30px 0;
	display:block;
}
.item01 .item__main--lead {
	width:138px;
}
.item02 .item__main--lead {
	width:180px;
}
.item__point {
	padding:0 0 30px 0;
	color:#fff;
	border-bottom:solid 5px #fff;
}
.item__point--title {
	margin:0 0 30px 0;
	display: flex;
	align-items: center;
}
.item__point--title img {
	width:110px;
}
.item__point--title:after {
	width:calc(100% - 120px);
	margin-left: 20px;
	content: "";
	flex-grow: 1;
	height: 5px;
	background: #fff;
	display: block;
}
.item__point--list li {
	margin:0 0 15px 0;
}
.item__point--list li:last-child {
	margin:0;
}
.item__point--list li strong {
	margin:0 0 5px 0;
	font-weight:bold;
	display:block;
}
.checkmark{
	padding-left:30px;
	position:relative;
}
.checkmark:before,
.checkmark:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark:before{
	width:16px;
	height:16px;
	border:1px solid #fff;
	left:0;
	top:2px;
}
.checkmark:after{
	border-left:2px solid #d71518;
	border-bottom:2px solid #d71518;
	width:18px;
	height:5px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:4px;
	top:3px;
}

 /* -------item__style------- */
.item__style {
	padding:10% 10% 0 10%;
}
.item__style--box{
	margin:0 0 50px 0;
}
.item__style--box:last-child{
	margin:0;
}
.item__style--img {
	margin:0 0 25px 0;
}
.item__style--title {
	margin:0 0 10px 0;
}
.item01_style1 .item__style--title {
	width:167px;
}
.item01_style2 .item__style--title {
	width:68px;
}
.item02_style1 .item__style--title {
	width:110px;
}
.item02_style2 .item__style--title {
	width:80px;
}
.item__style--text {
	margin:0 0 20px 0;
}

.item__style--text-cmt {
	margin:0 0 20px 0;
	position: relative;
	padding: 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.item__style--text-cmt::before,
.item__style--text-cmt::after {
	position: absolute;
	content: '';
	width: 35px;
	height: 35px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.item__style--text-cmt::before {
	top: 0;
	left: 0;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}
.item__style--text-cmt::after {
	bottom: 0;
	right: 0;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
}


 /* -------item__arrange------- */
.item__arrange {
	padding:10%;
}
.item__arrange--box{
	margin:0 0 50px 0;
}
.item__arrange--box:last-child{
	margin:0;
}
 .item__arrange--box-inner {
	margin:0 0 20px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
 }
.item01_arrange2 .item__arrange--box-inner,
.item02_arrange1 .item__arrange--box-inner {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	 flex-direction: row-reverse;
}
.item__arrange--box-detail {
	width:49%;
}
.item01_arrange1 .item__arrange--title {
	width:86px;
	margin:0 auto 15px auto;
}
.item01_arrange2 .item__arrange--title {
	width:69px;
	margin:0 auto 15px auto;
}
.item02_arrange1 .item__arrange--title {
	width:95px;
	margin:0 auto 15px auto;
}
.item02_arrange2 .item__arrange--title {
	width:80px;
	margin:0 auto 15px auto;
}
.item__arrange--editor {
	width:85px;
	margin:0 auto 10px auto;
}
.item__arrange--text {
	position: relative;
	padding: 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.item__arrange--text::before,
.item__arrange--text::after {
	position: absolute;
	content: '';
	width: 35px;
	height: 35px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.item__arrange--text::before {
	top: 0;
	left: 0;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}
.item__arrange--text::after {
	bottom: 0;
	right: 0;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
}
.item__arrange--img {
	width:50%;
	height:auto;
}

 /* -------credit------- */
.credit {
	font-size:1.1rem;
}
.credit li {
	margin-bottom:10px;
	position: relative;
}
.credit a {
	color: #000;
}
.credit .buy {
	width: 70px;
	position: absolute;
	text-align: center;
	bottom:0;
	right: 0; 
	border: 1px solid #999;
}
.credit span {
	width: 70px;
	position: absolute;
	text-align: center;
	bottom:0;
	right: 0;
}
.credit--under {
	background:linear-gradient(rgba(0, 0, 0, 0) 50%, #d8caba 50%);
	display:inline-block;
}
.credit--under2 {
	background:linear-gradient(rgba(0, 0, 0, 0) 50%, #d8d6d4 50%);
	display:inline-block;
}

 /* ------------------------more------------------------ */
.more {
	padding:10%;
}
.more__title {
	width:175px;
	margin:0 auto 15px auto;
}
.more__lead {
	margin:0 0 25px 0;
}
.more__lead br {
	display:none;
}
.more__style {
}
.more__style--box {
	margin:0 0 50px 0;
}
.more__style--img {
	margin:0 0 25px 0;
}
.more__style--text {
	margin:0 0 25px 0;
}
.more__style--info {
}
.more__style--info-name {
	width:100%;
	margin:0 0 10px 0;
	padding:0 0 8px 0;
	border-bottom:solid 1px #999;
}
.more__style--info-name.item1 img {
	width:124px;
}
.more__style--info-name.item2 img {
	width:112px;
}
.more__style--info-name.item3 img {
	width:150px;
}
.more__style--info-name.item4 img {
	width:54px;
}
.more__style--info-name.item5 img {
	width:61px;
}
.more__style--info-text {
	margin:0 0 10px 0;
	padding:0;
}
.more__style--info-credit {
	margin:0 0 25px 0;
	padding:0;
	position: relative;
	font-size:1.1rem;
}
.more__style--info-credit:last-child{
	margin:0;
	padding:0;
}
.more__style--info-credit a {
	color: #000;
}
.more__style--info-credit .buy {
	width: 70px;
	position: absolute;
	text-align: center;
	bottom:0;
	right: 0; 
	border: 1px solid #999;
}
.more__style--info-credit span {
	width: 70px;
	position: absolute;
	text-align: center;
	bottom:0;
	right: 0;
}



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

.box {
	margin: 100px auto 0;
}
footer {
	text-align: center;
}
footer .fotter_btn a {
	border: 1px solid #000;
	margin: 0 auto;
	display: block;
	padding: 10px 0;
}
footer .code_staff a {
	color: #fff;
	background-color: #000;
}
footer .fotter_btn a {
	width: 300px;
}
footer .code_staff p {
	padding-bottom: 10px;
}
footer .code_staff {
	padding-bottom: 40px;
}
footer .pageup_img {
	width: 5%;
	margin: 40px auto;
}
footer .footer_menu {
	margin: 0 auto;
}
footer .footer_menu li {
	display: inline-block;
	border-left: 1px solid #000;
}
footer .footer_menu li {
	width: 140px;
}
footer .footer_menu li:last-child {
	border-right: 1px solid #000;
}
footer .copy_right {
	padding: 40px 0 10px;
}
footer .copy_right .footer_logo {
	margin: 0 auto;
}
footer .copy_right .footer_logo {
	width: 23%;
}
footer .copy_right p {
	font-size: 10px;
	padding-top: 10px;
}




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

PC

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

@media screen and (min-width: 769px) {

 /* ------------------------main------------------------ */

#main {
	width:100%;
	max-width:1200px;
	margin:50px auto 0 auto;
	padding:0 0 80px 0;
	overflow:hidden;
}
.main__image {
	width:100%;
	height: 0;
	padding-top:58.333%;
	background:url("../images/main_pc.jpg");
	background-size: cover;
}
.main__image--logo {
	width:60%;
	max-width:730px;
	margin-top:-58.333%;
}
.main__image--logo .pc {
	display:inherit;
}
.main__image--logo .sp {
	display:none;
}

 /* ------------------------item------------------------ */
.item {
	width:100%;
}

 /* -------item__main------- */

.item__main {
	padding:60px 0;
	margin:0 auto 80px auto;
}
.item__main-innner{
	max-width:1000px;
	margin:0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.item__main-detail {
	width:30%;
}
.item__point {
	width:60%;
}
 /* -------item__style------- */
.item__style {
	max-width:1000px;
	margin:0 auto 100px auto;
	padding:0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.item__style--box{
	width:46%;
	margin:0;
}

 /* -------item__arrange------- */
.item__arrange {
	max-width:1000px;
	margin:0 auto 100px auto;
	padding:0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.item__arrange--box{
	width:46%;
	margin:0;
}
.item01_arrange2 .item__arrange--box-inner,
.item02_arrange1 .item__arrange--box-inner {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	 flex-direction: row;
}
.item__arrange--box-detail {
	width:41%;
}
.item__arrange--img {
	width:55%;
	height:auto;
}

 /* -------credit------- */
.credit {
}

 /* ------------------------more------------------------ */

.more {
	max-width:1000px;
	margin:0 auto;
	padding:0;
}
.more__title {
	width:220px;
	margin:0 auto 30px auto;
}
.more__lead {
	margin:0 0 40px 0;
	text-align:center;
}
.more__lead br {
	display:inherit;
}
.more__style {
	margin:0 0 80px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.more__style--box {
	width:46%;
	margin:0;
}
.more__style3 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.more__style3 .more__style--img {
	width:55%;
	height:auto;
}
.more__style3 .more__style--info {
	width:40%;
}
.more__style--info-credit {
	margin:0 0 25px 0;
	padding:0;
	position: static;
}
.more__style--info-credit .buy {
	width: 70px;
	margin:5px 0 0 0;
	position: static;
	display:block;
}
.more__style--info-credit span {
	width: 70px;
	margin:5px 0 0 0;
	position: static;
	display:block;
	text-align: left;
}

 /* ------------------------footer------------------------ */
 
.box {
	max-width: 1200px;
}
footer .fotter_btn a {
	width: 350px;
}
footer .code_staff p {
	padding-bottom: 15px;
}
footer .code_staff {
	padding-bottom: 50px;
}
footer .pageup_img {
	width: 1.8%;
	margin: 50px auto;
}
footer .footer_menu li {
	width: 170px;
}
footer .copy_right {
	padding: 50px 0 20px;
}
footer .copy_right .footer_logo {
	width: 8%;
}

.item01_style2,
.item01_arrange2,
.item02_style2,
.item02_arrange2,
.more__style2 {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

.pc {
	display:inherit;
}

}