body {
	padding:0;
	margin:0;
	background-color: #eaeff5;
}

.preloader.finish { -webkit-animation: loadBk .8s linear forwards; animation: loadBk .8s linear forwards; transform-origin: right bottom; }
@keyframes loadBk {
	30% { width: 100%; left: -30%; -webkit-transform: skewX(-10deg); transform: skewX(-10deg); }
	60% { width: 30%; -webkit-transform: skewX(5deg); transform: skewX(5deg); }
	100% { width: 0; }
}


.a{
	text-decoration: none;
}

.st_wrap {
	clear: both;
	width:100%;
	max-width: 1000px;
	padding: 0 0;
	margin:0 auto 3%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #000000;	
	font-size:14px;
}

.st_wrap p {
	padding:0;
	margin:0;
}

.pc {
	display:block;
}
.sp {
	display:none;
}
.clear {
	clear:both;
}

.title_img_box {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
}

.title_lead {
	position: relative;
	width: 100%;
	text-align: center;
	font-size: 13px;
	letter-spacing: 1.0;
	line-height: 2.0;
	color: #666666;
	margin: 6% auto;
	z-index: 15;
}

.title_lead span {
	font-size: 16px;
	font-weight: 600;
}

.lineup_txt {
	position: relative;
	width: 100%;
	text-align: center;
      font-size: 55px;
      color: #2f4c67;
      letter-spacing: 0em;
      line-height: 1;
      font-family: "din-condensed", sans-serif;
      font-weight: 400;
      font-style: normal;
	margin-bottom: 1%;
	z-index: 100;
}

.lineup {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	border: double #bfd7ed 5px;
}


.border_1 {
	width: 33.5%;
	border-right: double #bfd7ed 5px;
}

.border_2 {
	width: 33%;
}

.img_box1 {
	margin: 0%;
	float: left;
	color: #000;
	line-height: 1.6;
	font-size: 12px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	text-align: center;
	background-color: #fff;
}

.img_box1 img {
	width: 100%;
	padding-bottom: 4%;
}

.img_box1 span {
	width: 100%;
	font-size: 14px;
	font-family: "din-condensed", sans-serif;
	font-weight: 400;
	margin-bottom: 3%;
	color: #666666;
}

.img_box1 p {
	font-size: 18px;
	font-family: "din-condensed", sans-serif;
	font-weight: 400;
	margin-bottom: 3%;
	color: #666666;
}

.img_box1 a {
	color: #666666;
	text-decoration: none;
	font-size: 12px;
	line-height: 2.4;
}


.btn_buy{
	color: #fff;
	background-color: #808081;
	text-align: center;
	margin: 3% auto 8%;
	padding:0;
	width:70%;
	box-sizing: border-box;
	font-family: "din-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.2em;
}

.btn_buy a{
	text-decoration: none;
	display: block;
	color:#fff;
	font-size: 160%;
}
	
.btn_all{
	color: #808081;
	font-size: 150%;
	text-align: center;
	margin: 3% auto 7%;
	padding:3% 0;
	width:50%;
	box-sizing: border-box;
	border: double #bfd7ed 5px;
	background-color: #fff;
	font-family: "din-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.1em;
}

.btn_all a{
	text-decoration: none;
	display: block;
	color:#808081;
	font-weight: bold;
}

.main_item {
	position: relative;
      background-color: #ffffff;
      width: 80%;
      margin: 5% auto;
      max-width: 600px;
            display: flex;
      box-sizing: border-box;
      border: double #bfd7ed 5px;
      background-color: #d9e6f2;
}

    .vertical-text_main {
		position: absolute;
		top:1.5%;
      writing-mode: vertical-rl;
      font-size: 55px;
      color: #808081;
      letter-spacing: 0em;
      line-height: 1;
      font-family: "din-condensed", sans-serif;
      font-weight: 400;
      font-style: normal;
 }

.main_item .img {
	width: 79%;
	margin-left: 21%;
	text-align: center;
}

.main_item .img p {
	margin: 2.5% 0;
	color: #585860;
	font-weight: bold;
	font-size: 115%;
	line-height: 1.5em;
}

.main_item .img img {
	width: 100%;
}


.subtitle_box {
      background-color: #ffffff;
      width: 70%;
      margin: 5% 10% 0 20%;
      max-width: 450px;
      aspect-ratio: 4 / 5;
      padding: 0% 1%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
	box-sizing: border-box;
border: double #bfd7ed 5px;
}

.subtitle_txt {
      font-size: 30px;
      color: #808081;
      margin-top: 2.5%;
      margin-bottom: 0.8rem;
      letter-spacing: 0.02em;
      font-family: "din-condensed", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    .vertical-text {
      writing-mode: vertical-rl;
      font-size: 55px;
      color: #808081;
      letter-spacing: 0em;
      line-height: 1;
      font-family: "din-condensed", sans-serif;
      font-weight: 400;
      font-style: normal;
 }

    .vertical-text span {
      font-size:40%;
 }

.styling_box {
      background-color: #ffffff;
      width: 70%;
      margin: -71.5% 20% 0 10%;
	padding-bottom: 2%;
      max-width: 450px;
	box-sizing: border-box;
border: double #bfd7ed 5px;
	text-align: center;
	line-height: 1.6;
	color: #585860;
}

.styling_box img {
      width: 100%;
	margin-bottom: 2%;
}

.styling_box p {
      font-size: 120%;
	font-weight: 700;
	color: #8ab5db;
	line-height: 1.8;
	margin: 1% 0 1.5%;
}

.styling_box_s {
      background-color: #ffffff;
      width: 46%;
      margin: 5% 2%;
	padding-bottom: 2%;
      max-width: 450px;
	box-sizing: border-box;
border: double #bfd7ed 5px;
	text-align: center;
	line-height: 1.6;
	float: left;
	font-size: 11px;
	color: #585860;
}

.styling_box_s img {
      width: 100%;
	margin-bottom: 2%;
}

.styling_box_s span {
      font-size: 200%;
      font-family: "din-condensed", sans-serif;
      font-weight: 400;
      font-style: normal;
      color: #808081;
}

.styling_box_s p {
      font-size: 110%;
	font-weight: 700;
	color: #8ab5db;
	line-height: 1.5;
	margin: 1.5% 0 2%;
}


#styling {
	width: 80%;
	max-width: 700px;
	margin: 5% auto 3%;
}

.footer_txt{
	width: 100%;
	  font-family: "din-condensed", sans-serif;
      font-weight: 400;
      font-style: normal;
	font-size: 18px;
	text-align: center;
	color: #666;
	letter-spacing: 0.1em;
	padding-bottom: 1%;
}


@media only screen and (max-width: 900px) {
	
	

	
.st_wrap {
	clear: both;
	width:100%;
	max-width: 1000px;
	margin:0 auto 0;
	padding-bottom: 2%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #000000;	
	font-size:12px;
}
	
.pc {
	display:none;
}
.sp {
	display:block;
}
	
.title_img_box {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
	
.title_lead {
	font-size: 12px;
}
	
.title_lead span {
	font-size: 14px;
	font-weight: 600;
}

	
.lineup_txt {
      font-size: 35px;
	margin-bottom: -5%;
}
	
.lineup {
	width: 70%;
	margin: 0 auto;
	border: double #bfd7ed 5px;
}
	
.border_1 {
	width: 100%;
	border-bottom: double #bfd7ed 5px;
	border-right: none;
}

.border_2 {
	width: 100%;
	border: none;
}

.main_item {
      width: 90%;
      margin: 10% auto 7%;
}
	
.vertical-text_main {
      font-size: 35px;
	left: 1%;
      line-height: 0.9;
}
	
.subtitle_box {
      background-color: #ffffff;
      padding: 0% 1%;
}
	
.subtitle_txt {
      margin-top: 0;
      font-size: 25px;
    }

    .vertical-text {
      font-size: 33px;
 }

#styling {
	width: 100%;
}
	
.styling_box {
      width: 69%;
      margin: -76.5% 21% 0 10%;
	font-size: 90%;
	padding-bottom: 3%;
}
	
.styling_box_s img {
	margin-bottom: 1.5%;
}

.btn_buy a{
	font-size: 140%;
}
	
.btn_all{
	width:70%;
}
	
}