@charset "utf-8";

/* CSS Document */


/* ------------------------------
	HTML5 ELEMENTS
------------------------------ */
header,article,aside,section,footer,
nav,menu,details,hgroup,summary {
	display: block;
}

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



	
.sp {
	display: none;
}

/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 3s;
	transform: translateY(0px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.animation2{
	opacity : 0;
	visibility: hidden;
	transition: 3s;
	transform: translateY(0px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active2{
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.animation3{
	opacity : 0;
	visibility: hidden;
	transition: 3s;
	transform: translateY(0px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active3{
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.animation4{
	opacity : 0;
	visibility: hidden;
	transition: 3s;
	animation-duration:8s;
	transform: translateY(0px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active4{
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.main_mv {
	width: 100%x;
	margin: 0px auto 60px;
}

.main_mv video {
	width: 100%;
}

.sns_box {
	width: 24%;
	text-align: center;
	margin: 5% 37% 2% 39%;
}

.sns_icon {
	width: 20px;
	float: left;
	margin: 3% 2% 0 0;
}	
	
.sns_icon img {
	width: 100%;
}	
	
.sns_txt {
	float: left;	
	margin: 3% 0% 0 0;
	font-size: 18px;
	color: #000;
}

.sns_box a {
	color: #000;
	text-decoration: underline;
}

.sns_box a:hover {
	color: #000;
	text-decoration: underline;
}

.look_bgc {
	background-color: #FFFFFF;
	width: 100%;
	margin: 0 auto;
}


.wrapper_kw {
	width:100%; 
	margin:0px auto 50px;
	padding: 0;
	position: relative;
	text-align: center;
	font-family: 'Lato', Calibri, Arial, sans-serif;
}

.wrapper_kw h1 {
	text-align: center;
	margin: 40px auto 20px;
	font-size: 18px;
	font-weight: 100;
	line-height: 1.5em;
	letter-spacing: 0.025em;
}

.wrapper_kw p{
	text-align:center;
	font-size:13px;
	line-height:1.6em;
	margin: 14px 0 0;
}


.wrapper_kw a:link { color: #000; text-decoration:none; }
.wrapper_kw a:visited {  }
.wrapper_kw a:hover { opacity: 0.7; text-decoration: underline; }
.wrapper_kw a:active { color: #000000; }


.title {
	width: 100%;
	max-width: 700px;
	margin: auto;
}

.title img {
	width: 100%;
}

.title_bgbox {
  width: 100%;
    height: 0; 
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 120%;
  animation: bg-color 6s;
  -webkit-animation: bg-color 6s;
  animation-fill-mode:forwards;
  animation-delay:2s;
}

@-webkit-keyframes bg-color {
  0% { background-image: url("../images/title2.jpg");background-size: contain;}
  100% { background-image: url("../images/title.jpg");background-size: contain;}
}
@keyframes bg-color {
  0% { background-image: url("../images/title2.jpg");background-size: contain;}
  100% { background-image: url("../images/title.jpg");background-size: contain;}
}

.title_bgbox img {
	width: 100%;
	opacity: 0;
}

.sub_title {
	width: 100%;
	margin: 0% auto 0;
	text-align: center;
}

.sub_title img {
	width: 100%;
}

.sub_txt{
	text-align: center;
	font-size: 12px;
	line-height: 1.6;
	margin: 0 auto 6%;
}

.look_base_box {
	width: 100%;
	margin: 0 auto -2%;
	padding: 0;
}

.look_1 {
	width: 60%;
}

.look_1 img {
	width: 100%;
}

.look_2 {
	width: 65%;
}

.look_2 img {
	width: 100%;
}

.look_3 {
	width: 100%;
}

.look_3 img {
	width: 100%;
}

.look_4 {
	width: 100%;
}

.look_4 img {
	width: 100%;
}

.look_5 {
	width: 90%;
}

.look_5 img {
	width: 100%;
}

.look_6 {
	width: 48%;
	float: left;
}

.look_6 img {
	width: 100%;
}

.cditem_txt1 {
	font-size: 15px;
	line-height: 1.6;
	margin: 8px auto 0;
	text-align: left;
}

.cditem_txt1 img {
	width: 100%;
}

.cditem_txt2 {
	width: 34%;
	font-size: 15px;
	line-height: 1.6;
	margin: 8px 0 0;
	text-align: left;
}

.cditem_txt2 img {
	width: 96%;
}

.cditem_txt a {
	color: #000;
	text-decoration: none;
}

.cditem_txt a:hover {
	color: #000;
	text-decoration: underline;
}

.item_link {
	float: left;
	font-size: 14px;
}

.item_link a {
	color: #000;
	text-decoration: none;
}

.item_link a:hover {
	color: #000;
	text-decoration: underline;
}

#slideshow {
   position: relative;
   width: 88%;
   height:auto;
   padding-top:125%;
	margin-left: 0.5%;
}

#slideshow img {
	width: 100%;
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}

#slideshow2 {
   position: relative;
   width:  600px; /* 画像の横幅に合わせて記述 */
   height: 745px; /* 画像の高さに合わせて記述 */
	margin: 0px;
}
#slideshow2 img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow2 img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow2 img.last-active {
   z-index: 9;
}


.submenu_box {
	width: 100%;
	border-top: solid #000 1px;
	border-bottom: solid #000 1px;
	padding-top: 1%;
	padding-bottom: 1%;
	font-size: 29px;
	text-align: center;
}

.submenu_box a {
	color: #000;
	text-decoration: none;
}

.submenu_box a:hover {
	color: #000;
	text-decoration: underline;
}

.Lead {
	font-size: 14px;
	text-align: center;
	margin: 5% auto 0%;
	line-height: 1.9;
}

.item_base_box {
	width: 96%;
	margin: 0 auto;
	background-color: #fff;
	padding: 0;
}

.item_box {
	width: 50%;
	float: left;
	margin: 0 auto;
}



.look_box {
	float: left;
	position: relative;
	width: 600px;
	margin: 0 auto 5% ;
	padding: 0;
}


.item_txt {
	position:relative;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	margin: 0px auto 10px 0;
	color: #000;
}



.item_txt a {
	text-decoration: underline;
}

.item_txt a:hover {
	text-decoration: none;
}

.btn_buy {
	margin: 10px auto 20px;
	width: 100%;
	text-align: center;
}

.btn_buy img {
	width: 15%;
}

.img_Box {
	position: relative;
	width: 57%;
	margin: 0% auto 0;
}

.img_Box img {
	width: 100%;
}

.img_Box2 {
	position: relative;
	width: 35%;
	margin: 3% auto 0;
}

.img_Box2 img {
	width: 100%;
}




.style_box {
	width: 960px;
	margin: 5% auto;
}


.style_txt {
	font-size: 13px;
	line-height: 2.0;
	text-align: left;
	margin: 5% auto 5% 22%;
	}


.cdt_box {
	width: 80%;
	margin: auto 7% 0;
	padding: 3%;
	text-align: center;
	font-size: 12px;
	line-height: 1.7;
	border: solid #1470ad 2px;
}

.cdt_box_y {
	width: 80%;
	margin: auto 7% 0;
	padding: 3%;
	text-align: center;
	font-size: 12px;
	line-height: 1.7;
	border: solid #f4bc22 2px;
}

.cdt_box2 {
	width: 88%;
	margin: 2% 6%;
	padding: 0;
	text-align: right;
	font-size: 16px;
	line-height: 1.7;
}

.bgprof{
	position:relative;
	width:817px;
	height:383px;
	margin:30px 199px 20px;		
	padding:0;
	background-image:url(https://www.dot-st.com/static/docs/andemiu/pages/200925_color/images/pc_prof.jpg);
	background-repeat:no-repeat;
	float: left;
}

.Lead_prof {
	position:absolute;
	top:102px;
	left:250px;
	height: auto;
	text-align: left;
	font-size: 13px;
	line-height: 1.8;
}

.Lead_b {
	font-size: 15px;
	line-height: 1.4;
	font-weight: bold;
}


 /*=== スライド ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 100%;
  height     : auto;
  object-fit: cover;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  left       : 100%;
  animation  : slideAnime 16s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 4s }
.slide img:nth-of-type(3) { animation-delay: 8s }
.slide img:nth-of-type(4) { animation-delay: 12s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { left: 100%  }
   2% { left: 0     }
  21% { left: 0     }
  25% { left: -100% }
 100% { left: -100% }
}
 /*=== スライド終了 ================================= */


.btn_box {
	width: 100%;
	background-color: #fff;
	margin: 0% 0 3%;
	padding: 3% 0 ;
	text-align: center;
	border-bottom: solid 0px #000;
}

.btn_box a {
	color: #000;
	text-decoration: none;
	font-size: 18px;
}

.btn_box a:hover {
	color: #000;
	text-decoration: none;
	opacity: 0.7;
}

a.all_btn{
	float: left;
	width:45%;
	text-decoration: none;
	display: block;
	color:#000;
	border: solid 1px #000 ;
	padding:1.5% 0;
	margin:2% ;
	text-align: center;
}

#st_footer{
	 color:#000000; text-align:center; padding:15px 0 35px; font-size:12px;margin-top:60px;
	 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	 border-top: solid 1px #c8c6cd;
}

#st_footer2{
	 color:#000000; text-align:center; padding:15px 0 35px; font-size:12px;margin-top:0px;
	 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}


.MA {
	margin: 0px auto 0px;
}

.ML_30 {
	margin-left: 40px;
}

.ML_40 {
	margin-left: 40px;
}

.ML_50 {
	margin-left: 50px;
}


.ML_60 {
	margin-left: 59px;
}

.ML_70 {
	margin-left: 70px;
}

.ML_79 {
	margin-left: 79px;
}

.ML_100 {
	margin-left: 100px;
}

.ML_180 {
	margin-left: 180px;
}

.ML_220 {
	margin-left: 220px;
}

.MR_52 {
	margin-right: 52px;
}

.MR_100 {
	margin-right: 100px;
}

.MR_120 {
	margin-right: 120px;
}

.MT_30 {
	margin-top: 30px;
}

.MT_40 {
	margin-top: 40px;
}

.MT_50 {
	margin-top: 50px;
}


.MT_70 {
	margin-top: 70px;
}

.MT_80 {
	margin-top: 80px;
}

.MT_90 {
	margin-top: 90px;
}

.MT_100 {
	margin-top: 100px;
}


.MT_110 {
	margin-top: 110px;
}

.MT_130 {
	margin-top: 130px;
}

.MT_160 {
	margin-top: 160px;
}

.MT_180 {
	margin-top: 180px;
}

.MT_200 {
	margin-top: 200px;
}

.MT_300 {
	margin-top: 300px;
}


.clear {
	clear: both;
}

@media only screen and (max-width: 750px) {
	
	
.pc {
	display: none;
}
	
.sp {
	display: block;
	}

	
.btn_buy {
	margin: 10px 40% 20px;
	width: 20%;
	text-align: center;
}

.btn_buy img {
	width: 100%;
}
	
.sns_box {
	width: 60%;
	text-align: center;
	margin: 6% 14% 6% 26%;
}

.sns_icon {
	width: 20px;
	float: left;
	margin: 1% 2% 0 0;
}	
	
.sns_icon img {
	width: 100%;
}	
	
.sns_txt {
	float: left;	
	margin: 1% 0% 0 0;
	font-size: 14px;
	color: #000;
}


.look_bgc {
	background-color: #FFFFFF;
}


.wrapper_kw {
	width:100%; 
	margin:0 auto 20px;
	position: relative;
	text-align: center;
	font-family: 'Lato', Calibri, Arial, sans-serif;
}

.wrapper_kw h1 {
	text-align: center;
	margin: 40px auto 20px;
	font-size: 18px;
	font-weight: 100;
	line-height: 1.5em;
	letter-spacing: 0.025em;
}

.wrapper_kw p{
	text-align:center;
	font-size:13px;
	line-height:1.6em;
	margin: 14px 0 0;
}


.wrapper_kw a:link { color: #000000; text-decoration:none; }
.wrapper_kw a:visited { color: #000000; }
.wrapper_kw a:hover { color: #000000; text-decoration: underline; }
.wrapper_kw a:active { color: #000000; }

	
.title {
	width: 100%;
}

.title img {
	width: 100%;
}	
	
.sub_title {
	width: 100%;
	margin: 0 0 5%;
	text-align: center;
}
	
.sub_txt{
	text-align: center;
	font-size: 11px;
	line-height: 1.6;
	margin: 0% auto 6%;
}
	
.look_base_box {
	width: 100%;
	padding: 0;
}
	
.item_link {
	float: left;
	font-size: 11px;
}

.item_link a {
	color: #000;
	text-decoration: none;
}

.cditem_txt {
	font-size: 14px;
	line-height: 1.6;
}
	
.cditem_txt2 {
	font-size: 14px;
	line-height: 1.6;
}
	
	
.submenu_box {
	width: 100%;
	border-top: solid #000 1px;
	border-bottom: solid #000 1px;
	padding: 2% auto;
	font-size: 12px;
	text-align: center;
}

.Lead {
	font-size: 12px;
	line-height: 2.0;
	margin: 0 auto 2%;
	text-align: center;
}

.look_box {
	position: relative;
	float: none;
	width: 92%;
	margin: 0% auto 5%;
	padding: 0;
}
	
.look_box img {
	width: 100%;
}

.float_box2 {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.img_Box {
	position: relative;
	width: 100%;
	margin: 0px auto 0;
}
	
.img_Box img{
	width: 100%;
}

.img_Box2 {
	position: relative;
	width: 80%;
	margin: 10% auto 10% ;
}

.img_Box2 img {
	width: 100%;
	margin: 0;
}
	
.style_box {
	width: 100%;
	margin: 8% auto;
}
	
.style_txt {
	font-size: 10px;
	text-align: left;
	margin-left: 3%;
	width: 94%;
	}

.cdt_box {
	width: 90%;
	margin: auto 2% 0;
	padding: 3%;
	text-align: center;
	font-size: 12px;
	line-height: 1.7;
	border: solid #1470ad 2px;
}
	
.cdt_box_y {
	width: 90%;
	margin: auto 2% 0;
	padding: 3%;
	text-align: center;
	font-size: 12px;
	line-height: 1.7;
	border: solid #f4bc22 2px;
}

.cdt_box2 {
	width: 96%;
	margin: 2% 2%;
	padding: 0;
	text-align: right;
	font-size: 15px;
	line-height: 1.7;
}
	
	
.style_box {
	width: 100%;
	margin: 0;
	position: relative;
}

.prof_txt {
	position: absolute;
	font-size: 10px;
	top:16%;
	left: 37%;
	width: 52%;
	text-align: left:
}
	
	

 /*=== スライド ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 100%;
  height     : auto;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  left       : 100%;
  animation  : slideAnime 16s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 4s }
.slide img:nth-of-type(3) { animation-delay: 8s }
.slide img:nth-of-type(4) { animation-delay: 12s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { left: 100%  }
   2% { left: 0     }
  21% { left: 0     }
  25% { left: -100% }
 100% { left: -100% }
}
 /*=== スライド終了 ================================= */

.btn_box {
	margin: 0% 0 3%;
}

.btn_box a {
	color: #000;
	text-decoration: none;
}

.btn_box a:hover {
	color: #000;
	text-decoration: none;
	opacity: 0.7;
}

a.all_btn{
	float: left;
	width:44.5%;
	text-decoration: none;
	display: block;
	padding:3% 0;
	margin:2;
	text-align: center;
	font-size: 11px;
}


#st_footer{
	 color:#000000; text-align:center; padding:25px 0 35px; font-size:12px;margin-top:60px;
	 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	 border-top: solid 1px #c8c6cd;
}

#st_footer2{
	 color:#000000; text-align:center; padding:25px 0 35px; font-size:12px;margin-top:0px;
	 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
	
	
}