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

/*　全体　*/

html{
	color:#000;
	background:#fff;
	}
	
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
	}

body{

	background-attachment: fixed;
	background-repeat:repeat;
	overflow: hidden;
	}



    body {
        overflow-y: scroll;
        -ms-overflow-style: none;    /* IE, Edge 対応 */
        scrollbar-width: none;       /* Firefox 対応 */
    }
    body::-webkit-scrollbar {  /* Chrome, Safari 対応 */
        display:none;
    }

* {
  box-sizing: border-box;
}

body {
  /*----display: flex;--*/
  justify-content: center;
  align-items: center;
}


a {	
	text-decoration: none;
	}


.main {
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 0;
}

.main_inner {
	width: auto;
	margin: 0 auto;
	text-align:center;
	padding-top:0px;
}

img {	
    width: inherit;
    max-width: 100%;
  	height: auto;
	text-decoration:none;
	border: 0px;
}



/*　画面サイズが800pxまでこのファイルのスタイルが適用される。*/
@media screen and (min-width: 0px) and (max-width: 800px) {	

body::before {
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  }

}


.clear {
	clear:both;
}



/*--------購入ボタン-----------*/

.button1{
	width:100%;
	height:auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding:10px;
	border:1px solid #E2E2E2;
	text-align:center;
	float:left;
}

.button1 a{
	letter-spacing: 0.1em;
	line-height:1.5;
	font-weight: bold;
	color:#8C8687;
	font-size:13px;
	text-decoration:none;
}


.button1 a img{
	width: 35px;
	vertical-align: middle;
	opacity: 0.9;
}

.button1 a:hover{
	color:#E5E0E0;
}

/*--------購入ボタン-----------*/

/*--------リンクボタン-----------*/

.button2{
	width:95%;
	height:auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding:0px;
	border:0px solid #E2E2E2;
	text-align:center;
}

/*　画面サイズが800pxまでこのファイルのスタイルが適用される。*/
@media screen and (min-width: 0px) and (max-width: 800px) {	
.button2{
	width:90%;
}
}

.button2 a img{
	width: 30px;
	vertical-align: middle;
	margin-right: 10px;
	opacity: 0.7;
}





/*効果効能*/
.narrow1{
    position: relative;
    /*ボタンの形状*/
    padding: 5px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
	letter-spacing: 0.1em;
	line-height:1.5;
	color:#000000;
	font-family: 'Outfit','Noto Sans JP', sans-serif;
  	font-weight: 400;
	font-size:11px;
    outline: none;
	margin:5px;
	border-radius: 9999px;
	min-width: 80px;
}




/*矢印が右に移動して背景がつく*/

.btnarrow5{
    /*矢印の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    border: 1px solid #000;
    padding: 4px 10px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
	letter-spacing: 0.1em;
	line-height:1.5;
	color:#000;
	font-family: 'Outfit','Noto Sans JP', sans-serif;
  	font-weight: 400;
	font-size:12px;
    outline: none;
    /*アニメーションの指定*/
    transition: all .4s linear;
	background:rgba(255,255,255,0.0);
	margin:20px 0px 0px 0px;
}

/*　画面サイズが800pxまでこのファイルのスタイルが適用される。*/
@media screen and (min-width: 0px) and (max-width: 800px) {	
.btnarrow5{
	font-size:10px;
}
}

.btnarrow5:hover{
  background:rgba(130,125,90,0.30);
  color:#fff;
}

/*矢印と下線の形状*/
.btnarrow5::before{
  content:"";
    /*絶対配置で下線の位置を決める*/
  position: absolute;
  top:50%;
  right:-16px;
    /*下線の形状*/
  width:22px;
  height:1px;
  background:#000;
    /*アニメーションの指定*/
    transition: all .4s linear;
}

.btnarrow5::after{
  content:"";
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top: 15%;
    right: -12px;
    /*矢印の形状*/
  width:1px;
  height:10px;
  background:#000;
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .4s linear;
}

/*hoverした際の移動*/
.btnarrow5:hover::before{
  right:-20px;
}

.btnarrow5:hover::after{
  right:-16px;
}



/*矢印が右に移動して背景がつく*/

.btnarrow4{
    /*矢印の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    border: 1px solid #000;
    padding: 8px 22px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
	letter-spacing: 0.1em;
	line-height:1.5;
	color:#000;
	font-family: 'Outfit','Noto Sans JP', sans-serif;
  	font-weight: 400;
	font-size:12px;
    outline: none;
    /*アニメーションの指定*/
    transition: all .4s linear;
	background:rgba(255,255,255,0.0);
	width:300px;
}

/*　画面サイズが800pxまでこのファイルのスタイルが適用される。*/
@media screen and (min-width: 0px) and (max-width: 800px) {	
.btnarrow4{
	padding: 8px 8px;
	font-size:10px;
	width:220px;
}
}

.btnarrow4:hover{
  background:rgba(255,255,255,0.30);
  color:#999;
}

/*矢印と下線の形状*/
.btnarrow4::before{
  content:"";
    /*絶対配置で下線の位置を決める*/
  position: absolute;
  top:50%;
  right:-28px;
    /*下線の形状*/
  width:40px;
  height:1px;
  background:#000;
    /*アニメーションの指定*/
    transition: all .4s linear;
}

.btnarrow4::after{
  content:"";
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top: 20%;
    right: -22px;
    /*矢印の形状*/
  width:1px;
  height:15px;
  background:#000;
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .4s linear;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
  right:-35px;
}

.btnarrow4:hover::after{
  right:-28px;
}


.btnarrow4 img{
	width: 30px;
	vertical-align: middle;
	opacity: 1.0;
	margin-right: 10px;
}




/*--------リンクボタン-----------*/




/*--------ラッパー-----------*/
.wrapper1 {
	margin: 0 auto;
	width: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: left 50% top 0%; 
	}
	
.wrapper2 {
	margin: 0 auto;
	width: 100%;
	background: url(../img/back01.gif);
	background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
	
	
    z-index: -2;
    }
	
.wrapper3 {
	margin: 0 auto;
	width: 100%;
	background-color:#FFF;
	}

.wrapper3_2 {
	margin: 0 auto;
	width: 100%;
	background-color:none;
	}

.wrapper4 {
	margin: 0 auto;
	width: 100%;
	background-color:#F8F8F8;
	}

.wrapper4_2 {
	margin: 0 auto;
	width: 100%;
	background-color:#EBD6C4;
	}

.wrapper5 {
	margin: 0 auto;
	width: 100%;
	}	

.wrapper6 {
	margin: 0 auto;
	width: 100%;
	background-color:#6D6D6D;
	}	

@media screen and (max-width: 900px) {
    .wrapper1, .wrapper2, .wrapper3, .wrapper3_2, .content {
          float: none;
          margin: 0;
          width: auto;
     }		
}
/*--------ラッパー-----------*/



/*--------領域確認-----------*/
.content {
	border: 0px dotted #000;
	margin: 0 auto;
	padding:0px;
	max-width:1200px;
	box-sizing: border-box;
	display: flex;
	}
/*--------領域確認-----------*/

/*--------領域確認-----------*/
.content2 {
	border: 0px dotted #000;
	margin: -40px auto;
	padding:0px 0px 0px 0px;
	max-width:1200px;
	box-sizing: border-box;
	
	}
/*--------領域確認-----------*/


/*-------pcのみ改行-----------*/

@media screen and (max-width: 768px) {
	.br-pc { display:none; }
}




/*--------改行レスポンシブ-----------*/


@media screen and (max-width: 768px) {
	.br-pc { display:none; }
}

@media screen and (min-width: 600px) {
	.br-sp { display:none; }
}

/*--------イメージレスポンシブ-----------*/
@media screen and (max-width: 801px) {
	.img-pc { display:none; }
}
@media screen and (min-width: 800px) {
	.img-sp { display:none; }
}

/*--------イメージレスポンシブ2-----------*/

	.img-size { max-width: 500px }

/*--------インスタレスポンシブ-----------*/
@media screen and (max-width: 801px) {
	.snapwidget { display:none; }
}


/*--------margin-----------*/

	
.margin-top200{
	margin-top: 200px;
	}
.margin-top150{
	margin-top: 150px;
	}
.margin-top100{
	margin-top: 100px;
	}

.margin-top90{
	margin-top: 90px;
	}
	
.margin-top80{
	margin-top: 80px;
	}

.margin-top70{
	margin-top: 70px;
	}

.margin-top50{
	margin-top: 50px;
	}
	
.margin-top20{
	margin-top: 20px;
	}
.margin-top10{
	margin-top: 10px;
	}

.margin-20{
	margin: 20px;
	}	

.margin-bottom50{
	margin-bottom: 50px;
	}

.margin-bottom30{
	margin-bottom: 30px;
	}

.margin-bottom20{
	margin-bottom: 20px;
	}
.margin-bottom10{
	margin-bottom: 10px;
	}

.padding-bottom50{
	padding-bottom: 50px;
	}	
	
.padding-bottom30{
	padding-bottom: 30px;
	}

.padding-bottom20{
	padding-bottom: 20px;
	}

.padding-bottom10{
	padding-bottom: 10px;
	}

.padding-bottom_100px{
	padding-bottom: 100px;
	}	


.padding_40px {
	padding:40px;
}
.padding_30px {
	padding:30px;
}
.padding_20px {
	padding:20px;
}

.padding_10px {
	padding:10px;
}

.padding-top_100px {
	padding-top:100px;
}

.padding-top_40px {
	padding-top:40px;
}

.padding-top_30px {
	padding-top:30px;
}

.padding-top_20px {
	padding-top:20px;
}

/*-------pcのみ-----------*/

@media screen and (min-width: 800px) {
	.padding-top_150px-pc {
	padding-top:150px;
}
}



.height_250px {
	 height:250px;
}




/*--------色-----------*/

.green {
	color: #6dba44;
}

.white {
	color: #FFFFFF;
}

.gray2 {
	color: #A8A8A8 !important;
}

.gray {
	color: #555555 !important;
}


.black {
	color: #000000;
}


.orange {
	color: #eab025;
}


.blue {
	color: #317CC3;
}

.purple {
	color: #663399;
}

.red {
	color: #DE0A00;
}

.gold {
	color: #BCA267;
}

.pink {
	color: #B97DA3;
}

.bg_b{
	background-color: #000000;
	}

.bg_w{
	background-color: #FFFFFF;
	}

.bg_dg{
	background-color: #8E8E8E;
	}
.bg_g{
	background-color: #E2E2E2;
	}

.bg_gr{
	background-color: #008B2D;
	}

.bg_pb {
	 background-color:#D3C6EC;
}

.bg_wb {
	 background-color:#D2E6F5;
}

.bg_bl {
	 background-color:#79C8D8;
}

.bg_o {
	background-color:#ECBC49;
}

.bg_y {
	background-color:#FFF7E4;
}

.bg_r{
	background-color: #D05557;
	}

.bg_o2{
	background-color: #E2D8D0;
	}

.bg_o3{
	background-color: #FFF6EE;
	}

.bg_p{
	background-color: #B97DA3;
	}

.bg_p2{
	background-color: #FFF6FE;
	}

/*--------ボーダー-----------*/



.border {
    position: relative;
    width: 100%;
	border-bottom: 1px solid #000000;
	padding: 0px 0px 10px 0px;

	}

.border_white {
    position: relative;
    width: 100%;
	border-bottom: 1px solid #FFFFFF;
	margin:20px 0 20px 0;
	}


.border2 {
    position: relative;
    width: 100%;
	border-bottom: 1px dotted #000000;
	margin:0px 0 10px 0;
}

.border_black{
	border:1px solid #000000;
	}

.border_black2{
	border:1px solid #000000;
	padding: 2px;
	}

.border_blue{
	border:2px solid #00BFFF;
	}

.border_green{
	border:2px solid #6dba44;
	}

.p_border {
	 border-bottom:1px solid #000000;
}


.border_white2 {
    width: 100%;
	border:10px solid #FFFFFF;
	}

/*--------リスト装飾-----------*/

ol.list1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'Inter','Noto Sans JP', sans-serif;
  padding: 0px;
  margin-bottom: 20px;
}
  
ol.list1 li{
  position:relative;
  line-height: 20px;
  margin: 20px 0 20px 30px;
  padding-left: 10px;
  font-size:14px;
  color: #555;
  text-align:left;
	

}
  
ol.list1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -30px;
  width: 25px;
  height: 25px;
  background: #fff;
  text-align: center;
  color: #000;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  border-right: 1px double #000;
  border-bottom: 1px double #000;

}
/*--------リスト装飾(HOW TO USE)-----------*/



dd {
  margin-left: 0;
  text-align: left;
  color: #000;
  font-size:16px;
  letter-spacing:0.05em;
  font-family: 'Inter','Noto Sans JP', sans-serif;
  font-weight: 400;
}

.flow {
  padding-left: 120px;
  position: relative;
  max-width: 100%;
}
.flow::before {
  content: "";
  width: 1px;
  height: 100%;
  background: #999;
  margin-left: -4px;
  display: block;
  position: absolute;
  top: 0;
  left: 100px;
}
.flow > li {
  position: relative;
}
.flow > li:not(:last-child) {
  margin-bottom: 5vh;
}
.flow > li .icon {
  font-size: 14px;
  font-family: 'Shippori Mincho', serif;
  color: #000;
  background: rgb(227 235 235);
  padding: 8px 10px;
  display: block;
  position: absolute;
  top: 0;
  left: -120px;
  z-index: 100;
}
.flow > li .icon::after {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent  rgb(227 235 235);
  position: absolute;
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.flow > li dl {
  padding-left: 20px;
  position: relative;
}
.flow > li dl::before,
.flow > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}
.flow > li dl::before {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background:  rgb(227 235 235);
  border-radius: 50%;
  left: -33px;
}
.flow > li dl::after {
  width: 20px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: -13px;
}
.flow > li dl dt {
  font-size: 20px;
  font-weight: 400;
  color:  rgb(227 235 235);
  margin-bottom: 1vh;
}



/*-------チェックリスト-----------*/

.list_check {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.list_check > li {
    position: relative;
    padding: 3px 0px 3px 2em;
    margin: 0px;
    
}
.list_check > li::before,
.list_check > li::after {
    position: absolute;
    top: 50%;
    height: 1.0em;
    content: "";
}
.list_check > li::before {
    left: 0px;
    transform: translateY(-50%);
    width: 1.0em;
    border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
}
.list_check > li::after {
    left: 0.4em;
    transform: translateY(-75%) rotate(45deg);
    width: 0.25em;
	height: 0.5em;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

.list_check > li + li {
    margin: 0.1em 0px 0px;
}



/*--------リスト装飾(3層レイヤー)-----------*/
.List-Inner{
  list-style: none;
  margin: 2em 0px 2em 0em;
}

.List-Item {
  border-top: 0px solid #555;
  width: 100%;
}
@media screen and (max-width: 540px) {
  .List-Item {
    border-top: 0;
  }
}
.List-Item:nth-of-type(1) {
  border-top: 0;
}
.List-Item-Content {
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  max-width: 1000px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 540px) {
  .List-Item-Content {
    flex-wrap: wrap;
  }
}
.List-Item-Content.one {
  padding-top: 0;
}
.List-Item-Content-Number {
  position: relative;
  margin-right: 20px;
  padding-top: 5px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 20px;
  text-align: center;
  background: #fff;
  color: #777;
  font-size: 12px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  border: 1px solid #777;
  z-index: 5 !important;
}
@media screen and (max-width: 540px) {
  .List-Item-Content-Number {
    width: 40px;
    height: 40px;
	font-size: 10px;
	line-height: 15px;
  }
}
.List-Item-Content-Number-Line {
  position: absolute;
  top: -24%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 2px;
  height: 22px;
  background: #777;
}
@media screen and (max-width: 540px) {
  .List-Item-Content-Number-Line {
    top: -95%;
    width: 2px;
    height: 70px;
  }
}
.List-Item-Content-Title {
  margin-top: 10px;
  margin-right: 10px;
  width: 240px;

}
@media screen and (max-width: 540px) {
  .List-Item-Content-Title {
    margin-right: 0;
    max-width: 230px;
  }
}
.List-Item-Content-Description {
  line-height: 1.5;
}
@media screen and (max-width: 540px) {
  .List-Item-Content-Description {
    margin-left: 60px;
  }
}