@charset "UTF-8";
/* CSS Document */

header{
	margin-top: 8.5rem;
}

h2{
	font-family: 'Shippori Mincho', serif;
    font-size: 4rem;
    font-size: 40px;
    text-shadow: 1px 1px 0px #ffffff;
    color: #08287E;
    text-align: left;
	background: none;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
}

/*----------top-img----------*/
#top-img{
	background-image: url(../img/product-top-back.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto;
	height: 700px;
	position: relative;
	display: flex;
    align-items: center;
}
#top-img p{
    color: #08287E;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-top: 3rem;
    line-height: 3.5rem;
}
#top-img .container{
	z-index: 1;
    position: inherit;
}
#top-img::after {
    content: '';
    position: absolute;
    background-image: url(../img/logo.svg),url(../img/product-top-img.png);
    background-repeat: no-repeat,no-repeat;
    background-size: 190px auto,990px auto;
    background-position: right 2% bottom 15%,right center;
    right: 0;
    top: 10%;
    height: 80%;
    width: 100%;
}
/*----------product-mainimg----------*/
#product-mainimg{
	background-image: url("../img/product-mainimg-back.png");
    background-position: top 40% center;
	background-repeat: no-repeat;
    background-size: auto;
	margin-bottom: 10rem;
}
#product-mainimg .container{
	position: relative;
}
#product-mainimg .waterdrop-l{
    position: absolute;
    top: 15%;
    left: 0;
    margin: auto;
    transition: transform 3s ease;
	z-index: 1;
}
#product-mainimg .waterdrop-r{
    position: absolute;
    top: 10%;
    right: 0;
    margin: auto;
    transition: transform 3s ease;
	z-index: 1;
}
#product-mainimg figcaption div{
	background-color: white;
	padding: 4rem 3rem 3rem;
	filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.2));
}
#product-mainimg figure img{
	max-height: 600px;
}
#product-mainimg figcaption img{
	max-height: 150px;
	margin-bottom: 2rem;
}

/*----------message----------*/
#message{
    position: relative;
}
#message p{
    color: #08287E;
    font-weight: 400;
    margin-top: 3rem;
    line-height: 3.5rem;
}
#message .message-img1{
    position: absolute;
    left: 0;
    top: 11%;
    width: 1000px;
}
#message .message-img1::before {
    content: '';
    position: absolute;
    background-image: url(../img/logo-re.svg);
    background-repeat: no-repeat;
    background-size: 25% auto;
    background-position: left 5% bottom 20%;
    left: 0;
    bottom: 0;
    height: 50%;
    width: 100%;
}
#message .message-img2{
    position: absolute;
    right: 0;
    top: 0;
    height: 300px;
    width: 450px;
	z-index: -1;
	transition: ease-in-out 1s;
}
#message h2{
	margin-top: 18rem;
}

/*----------about-product----------*/
#about-product h3{
	display: block;
    text-align: center;
    background-image: url(../img/logo-blue.svg);
    background-repeat: no-repeat;
    background-position: center;
    font-size: 4rem;
    font-size: 40px;
    font-weight: bold;
    color: #08287E;
    line-height: 3rem;
    padding: 70px 50px 30px 50px;
    margin: 6rem 0 4rem 0;
}
#about-product h3 span{
	font-size: 1.4rem;
	font-size: 14px;
    color: #808080;
}
#about-product dt{
    font-size: 3rem;
    font-size: 30px;
	text-align: center;
    color: #08287E;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6rem;
}
#about-product dt span{
	font-size: 7.5rem;
    font-size: 75px;
    font-family: 'Shippori Mincho', serif;
    margin-right: 3rem;
    padding-bottom: 1rem;
}
#about-product dd p{
	text-align: justify;
    letter-spacing: 0.05em;
}
/*----about-01----*/
.about-01{
    background-image: url("../img/about-01-back.png");
    background-repeat: no-repeat;
    background-position: center;
	background-size: cover;
    text-align: center;
    padding: 8rem 0 4rem;
    margin-bottom: 1.5rem;
}
.about-01 dd h4{
    font-size: 3rem;
    font-size: 30px;
    color: #08287E;
    margin: 2rem 0;
}
.about-01 dd ul li{
    padding: 4rem;
}
.about-01 dd ul li{
	position: relative;
}
.about-01 dd ul li:first-child::after,
.about-01 dd ul li:nth-child(2)::after{
	content: "";
    position: absolute;
    top: 35%;
    right: -8%;
    transform: translateY(-35%);
    border: 20px solid transparent;
    border-left: 25px solid #08287E;
}
/*----about-02----*/
.about-02{
    background-image: url("../img/about-02-back.png");
    background-repeat: no-repeat;
    background-position: center;
	background-size: cover;
    text-align: center;
    padding: 8rem 0;
    margin-bottom: 1.5rem;
}
.about-02 dd ul li p{
    font-size: 3.5rem;
    font-size: 35px;
	font-weight: bold;
    color: #08287E;
	text-align: center!important;
}
.about-02 dd ul li:last-child p{
    color: #2E97D0;
    margin-top: 2rem;
	margin-left: 3em;
}
.about-02 dd ul li p span{
    font-size: 2rem;
    font-size: 20px;
}
.about-02 dd ul{
	background-color: white;
	filter: drop-shadow(0px 0px 16px rgba(57,193,255,0.6));
    padding: 5rem 0 4rem;
	margin-top: 3rem;
    align-items: baseline;
}
.about-02 dd ul li{
	position: relative;
}
.about-02 dd ul li:first-child::after{
	content: "＋";
    position: absolute;
    top: 20%;
    right: 0;
    transform: translateY(-20%);
    font-size: 4.5rem;
    font-size: 45px;
    font-weight: 900;
    color: #08287E;
}
.about-02 dd ul li:nth-child(3)::before{
	content: "＋";
    position: absolute;
    top: 20%;
    left: 0;
    transform: translateY(-20%);
    font-size: 4.5rem;
    font-size: 45px;
    font-weight: 900;
    color: #08287E;
}
.about-02 dd ul li:last-child::before{
	content: "＝";
    position: absolute;
	top: 45%;
    left: 22%;
	transform: translateY(-20%);
    font-size: 4.5rem;
    font-size: 45px;
    font-weight: 900;
    color: #08287E;
}
/*----about-03----*/
.about-03{
    background-image: url("../img/about-03-back.png");
    background-repeat:repeat-y;
    background-position: center;
	background-size: cover;
    text-align: center;
    padding: 8rem 0;
}
.about-03 h4{
    font-size: 2rem;
    font-size: 20px;
    color: #08287E;
	font-weight: bold;
    letter-spacing: 0.05em;
	margin-top: 3rem;
}
.about-03 h4 span{
	font-weight: normal;
}
.about-03 .table-container,
.about-03 .table-container2{
	margin-inline: auto;
	margin-top: 1rem;
	overflow-x: auto;
	white-space: nowrap;
	width: 800px;
}
.about-03 .table-container{
	margin-bottom: 5rem;
}
.about-03 .table-container2{
	margin-bottom: 1rem;
}
.about-03 table {
	width: 800px;
	background-color: white;
}
.about-03 table th{
	background-color: #38508F;
	color: white;
	border-right: 1px solid white;
	font-weight: normal;
	padding: 1.5rem 1rem;
}
.about-03 table td{
	border-right: 1px solid #38508F;
	padding: 1.5rem 1rem;
}
.about-03 table th:last-child,
.about-03 table td:last-child{
	border: none
}
.about-03 .table-container tr:nth-of-type(2n+1){
	background-color: #E8EAF3;
}
.about-03 .table-container2 tr:first-child th{
	border-bottom: 1px solid white;
}
.about-03 .table-container2 tr:first-child td,
.about-03 .table-container2 tr:nth-child(2) td{
	border-bottom: 1px solid #38508F;
}
.about-03 .table-container2 tr:nth-child(3) td{
	border-bottom: 1px dashed #38508F;
}
/*----detail----*/
.detail{
	background-color: white;
	filter: drop-shadow(0px 0px 16px rgba(57,193,255,0.6));
    padding: 5rem 0 4rem;
	margin-top: 10rem;
}
.detail h4{
	font-family: 'Shippori Mincho', serif;
    font-size: 3rem;
    font-size: 30px;
    color: #08287E;
	letter-spacing: 0.05em;
	margin: 6rem 0 3rem;
}
.detail h4.title{
	font-family: 'Noto Sans JP';
    font-size: 3rem;
    font-size: 30px;
    color: white;
    background-color: #08287E;
    font-weight: 600;
    letter-spacing: 0;
    margin-top: -8.5rem;
    padding: 1.5rem 2rem 2rem;
    position: relative;
}
.detail h4.title + p{
    text-align: center!important;
	margin-top: 4rem;
}
.detail h4.title::after{
	content: "";
    position: absolute;
    bottom: -58px;
    left: 47%;
    right: 45%;
    margin: auto;
    border: 30px solid transparent;
    border-top: 40px solid #08287E;
    z-index: -1;
}
.detail ul{
    margin-top: 3rem;
}
.detail ul li p{
    font-size: 2.3rem;
    font-size: 23px;
	color: #08287E;
	font-weight: bold;
	letter-spacing: 0.05em;
}
.detail ul li figcaption{
	color: #2E97D0;
	font-weight: bold;
	text-align: justify;
    letter-spacing: 1px;
}
/*----point----*/
.point-01 figure{
	width: 90%;
	margin-right: 3rem;
}
.point-01 ul li{
	text-align: left;
	line-height: 2em;
}
.point-01 ul li::before{
	content: "●";
	color: #BAE9FF;
	padding-right: 0.5em;
}
.point-02 h4{
	letter-spacing: -2px;
}
.point-02 h4 + ul{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.point-02 h4 + ul li{
	position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #2E97D0;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));
    margin: 0.5rem 1.5rem;
}
.point-02 h4 + ul li span{
	position: absolute;
    display: inline-block;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 150px;
    text-align: center;
    font-size: 23px;
    font-size: 2rem;
    color: #2E97D0;
}
.point-02 dl{
	align-items: center;
    justify-content: center;
}
.point-02 dl dt{
	margin-bottom: 0!important;
}
.point-02 dl li{
	text-align: left;
	font-size: 23px;
	font-size: 2.3rem;
	font-weight: 600;
	position: relative;
	line-height: 2em;
	letter-spacing: 3px;
}
.point-02 dl li::before{
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-weight: 900;
	padding-right: 0.5em;
	color: #2E97D0;
}
.point-02 p span{
	color: #08287E;
	font-weight: 600;
}
.point-02 a{
    display: flex;
    align-items: center;
    background-image: url(../img/about-03-img5.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    color: white;
    min-height: 160px;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
	margin: 5rem 0 4rem;
}
.point-02 a:hover{
    opacity: 0.5;
}
.point-02 a p span{
	display: block;
	font-size: 23px;
	font-size: 2.3rem;
	color: white;
	margin-bottom: 1rem;
}
.point-02 a p{
	display: inline-block;
	position: relative;
    margin-bottom: 0;
}
.point-02 a p::after{
	content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -30px;
    width: 30px;
    height: 30px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: auto;
    vertical-align: middle;
	transition: 0.3s;
}
.point-02 a:hover p::after{
    right: -50px;
}
/*----------example-of-use----------*/
#example-of-use{
	margin: 6rem;
}
#example-of-use h2{
	display: block;
	text-align: center;
}
.flex-box img{
	width: 100%;
	height: auto;
}
.flex-box{
  display: flex;
  justify-content: space-between;
  padding: 40px;
  margin: auto;
}
.flex-box img{
  width: 100%;
  height: auto;
}
.column{
  width: 48%;
}
.column-outside-right{
    flex: 1;
    margin-right: calc(50% - 50vw);
    margin-left: 4%;
}
.column-outside-left{
    flex: 1;
    margin-left: calc(50% - 50vw);
    margin-right: 4%;
}
#example-of-use .column{
	border-top: 1px solid #08287E;
}
#example-of-use .column-outside-right,
#example-of-use .column-outside-left{
	border-top: none;
}
#example-of-use .flex-box h3{
	font-size: 3rem;
	font-size: 30px;
	margin:2rem 0 3rem;
	color: #08287E;
}
#example-of-use .flex-box h3 + p{
	letter-spacing: 1px;
    margin-bottom: 2rem;
}
#example-of-use .flex-box dl dt{
	font-size: 2.1rem;
	font-size: 21px;
    border: 1px solid #08287E;
    color: #08287E;
    font-weight: 600;
    display: inline-block;
    padding: 1rem 0 1.2rem;
    min-width: 250px;
    text-align: center;
    letter-spacing: 1px;
}
#example-of-use .flex-box dl + dl dt{
    background-color:  #08287E;
    color: white;
}
#example-of-use .flex-box dl dd{
    color: #08287E;
    font-weight: 600;
    padding: 1em;
    letter-spacing: 1px;
	text-indent: -1em;
    padding-left: 1em
}
#example-of-use .column-left dl dd:nth-child(2){
    padding-bottom: 0;
}
#example-of-use .column-left dl dd:nth-child(3){
    padding-top: 0;
}
#example-of-use .flex-box3{
	display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../img/usage-back.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	border: 1px solid #08287E;
	border-radius: 3rem;
    margin-top: 4rem;
	padding: 2rem 6rem;
}
#example-of-use .flex-box3 dt img{
	filter: drop-shadow(0px 0px 16px rgba(8,40,126,0.3));
	margin-left: 2em;
	width: 800px;
}
#example-of-use .flex-box3 dd p,
#example-of-use .flex-box3 dd table th,
#example-of-use .flex-box3 dd table td{
	font-size: 2.2rem;
	font-size: 22px;
    color: #08287E;
	font-weight: 600;
}
#example-of-use .flex-box3 dd table td span{
	font-size: 1.6rem;
	font-size: 16px;
}
#example-of-use .flex-box3 dd table th::before{
	content: "■";
	color: #2E97D0;
	padding-right: 0.5em;
}
#example-of-use .flex-item-1,
#example-of-use .column-right,
#example-of-use .column-outside-right {
	order: 2;
}
#example-of-use .flex-item-2,
#example-of-use .column-left,
#example-of-use .column-outside-left {
	order: 1;
}
#example-of-use .info {
	font-size: 16px;
	font-size: 1.6rem;
	color: black;
    padding-top: 1rem;
	text-align: justify;
    text-indent: -1em;
    padding-left: 1em;
	line-height: 1.5em;
}


/*----------how-to-use----------*/
#how-to-use h3{
	display: block;
    text-align: center;
    background-image: url(../img/logo-blue.svg);
    background-repeat: no-repeat;
    background-position: center;
    font-size: 4rem;
    font-size: 40px;
    font-weight: bold;
    color: #08287E;
    line-height: 3rem;
    padding: 70px 50px 30px 50px;
    margin: 6rem 0 4rem 0;
}
#how-to-use h3 span{
	font-size: 1.4rem;
	font-size: 14px;
    color: #808080;
}
#how-to-use p{
    display: inline-block;
    border-top: 1px solid #231815;
    padding-top: 3rem;
    margin-top: 3rem;
}
#how-to-use p span{
	display: inline-block;
    font-size: 2.3rem;
    font-size: 23px;
	font-weight: 600;
	margin-bottom: 1rem;
}
#how-to-use figcaption{
	margin-top: 2rem;
}
#how-to-use table{
	width: 100%;
    border: 1px solid #08287E;
    margin-top: 4rem;
}
#how-to-use table th{
    font-size: 2.3rem;
    font-size: 23px;
    font-weight: 600;
    background-color: #DADFEC;
    color: #08287E;
    width: 25%;
    padding: 2rem;
    text-align: center;
}
#how-to-use table td{
    color: #08287E;
    padding: 2rem 3rem;
}
/*----------attention----------*/
#attention{
    background-image: url("../img/attention-back.png");
    background-repeat: no-repeat;
    background-position: center;
	background-size: cover;
	margin: 8rem 0 6rem;
	padding: 6rem 0;
}
#attention h3{
    font-size: 2.3rem;
    font-size: 23px;
    font-weight: 600;
    text-align: center;
	margin-bottom: 3rem;
}
#attention ul li::before{
	content: "●";
}
#attention ul li{
	text-indent: -1em;
    padding-left: 1em;
}
/*----------how-to-buy----------*/
#how-to-buy h3{
	display: block;
    text-align: center;
    background-image: url(../img/logo-blue.svg);
    background-repeat: no-repeat;
    background-position: center;
    font-size: 4rem;
    font-size: 40px;
    font-weight: bold;
    color: #08287E;
    line-height: 3rem;
    padding: 70px 50px 30px 50px;
    margin: 6rem 0 4rem 0;
}
#how-to-buy h3 span{
	font-size: 1.4rem;
	font-size: 14px;
    color: #808080;
}
#how-to-buy p{
	letter-spacing: 1px;
	margin-bottom: 0.5rem;
}

#how-to-buy .ec-img {
	display: flex;
    align-items: center;
    background-image: url(../img/how-to-buy-img.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: white;
    min-height: 242px;
    filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.1));
    margin: 3rem 0 8rem;
	transition: 0.2s;
}
#how-to-buy .ec-img:hover {
	transform: translateY(1px);
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.1));
	opacity: 0.7;
/*    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.3);*/
}


#how-to-buy ul{
    margin: 2rem 0 8rem;
}
#how-to-buy li:first-child a{
    display: flex;
    align-items: center;
    border: 1px solid #08287E;
    font-size: 3.2rem;
    font-size: 32px;
    font-weight: 500;
    color: #08287E;
    padding: 2rem 3rem;
}
#how-to-buy li:last-child a{
    display: flex;
    align-items: center;
	border: 1px solid #00B900;
	position: relative;
    font-size: 3.2rem;
    font-size: 32px;
    font-weight: 500;
    color: #00B900;
    padding: 2rem 3rem;
}
#how-to-buy li a:hover{
    opacity: 0.5;
}
#how-to-buy li:first-child a img{
	max-width: 75px;
	padding-right: 2rem;
}
#how-to-buy li:last-child a img{
	max-width: 65px;
    padding-right: 2rem;
}
#how-to-buy li:last-child a::after{
	font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;
    padding-right: 0.5em;
    color: #00B900;
    position: absolute;
    right: 10px;
    font-size: 25px;
}





/* ↓　lg 幅以下の時に反映される設定　↓ */
@media only screen and (max-width: 1400px) {
}
/* ↓　lg 幅以下の時に反映される設定　↓ */
@media only screen and (max-width: 1199px) {
/*----------top-img----------*/
	#top-img::after {
		background-size: 15% auto,70% auto;
		background-position: right 4% bottom 20%,right center;
	}
	h2 {
		font-size: 3.7rem;
		font-size: 37px;
	}
	#top-img p {
		letter-spacing: 0;
		text-align: justify;
	}
	#top-img {
		height: 500px;
	}
/*----------message----------*/
	#message .message-img1 {
		position: absolute;
		left: 0;
		top: 11%;
		width: 800px;
	}
/*----------about-product----------*/
	.about-02 dd ul li p {
		font-size: 3.2rem;
		font-size: 32px;
	}
	.about-02 dd ul li p span {
		font-size: 1.8rem;
		font-size: 18px;
	}
	.about-02 dd ul li:first-child::after {
		font-size: 4rem;
		font-size: 40px;
	}
	.about-02 dd ul li:nth-child(3)::before {
		font-size: 4rem;
		font-size: 40px;
	}
	.about-02 dd ul li:last-child::before {
		font-size: 4rem;
		font-size: 40px;
	}
	.about-03 .table-container, .about-03 .table-container2 {
		width: 100%;
	}
/*----------example-of-use----------*/
	.flex-box {
		padding: 4rem 0 0;
	}
	#example-of-use .flex-box h3 {
		font-size: 2.7rem;
		font-size: 27px;
	}
	#example-of-use .flex-box3 .flex-item-1 {
		width: 90%;
	}
	#example-of-use .flex-box3 {
    padding: 2rem 3rem;
	}
	#example-of-use .flex-box3 dt img {
		margin-left: 1em;
	}
	#example-of-use .flex-box3 dd p,
	#example-of-use .flex-box3 dd table th,
	#example-of-use .flex-box3 dd table td {
		font-size: 2rem;
		font-size: 20px;
	}
	
}
/* ↓　md 幅以下の時に反映される設定　↓ */
@media only screen and (max-width: 991px) {
/*----------top-img----------*/
	#top-img {
		background-position: left bottom;
		background-size: cover;
		height: 400px;
		padding-top: 5rem;
	}
	#top-img::after {
		background-size: 10% auto,50% auto;
		background-position: right 3% bottom 36%,right center;
		top: 0;
		height: 70%;
	}
/*----------product-mainimg----------*/
	#product-mainimg figure img {
		max-height: 500px;
	}
/*----------message----------*/
	#message .message-img1 {
		left: 0;
		top: -5%;
		width: 600px;
	}
	#message .message-img2 {
		right: 0;
		top: 11%;
	}
	#message h2 {
		margin-top: 36rem;
	}
/*----------about-product----------*/
	.about-02 dd ul li p {
		font-size: 3rem;
		font-size: 30px;
	}
	.detail h4.title {
		font-size: 2.5rem;
		font-size: 25px;
	}
	.detail ul li p {
		font-size: 2rem;
		font-size: 20px;
		letter-spacing: 0;
	}
	.point-01 figure {
		width: 100%;
		margin: 0 0 2rem 0;
	}
	.point-01 .d-flex{
		flex-wrap: wrap;
		justify-content: center;
	}
	.detail h4 {
		font-size: 2.5rem;
		font-size: 25px;
	}
	.point-02 h4 + ul li {
		width: 130px;
		height: 130px;
		margin: 0.5rem 1rem;
	}
	.point-02 h4 + ul li span {
		width: 130px;
	}
	.point-02 dl li {
		font-size: 20px;
		font-size: 2rem;
		letter-spacing: 0;
	}
	.point-02 dt {
		width: 30%;
	}
	.point-02 a {
		background-image: url(../img/about-03-img5.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: auto;
		margin: 3rem 0 0rem;
		padding: 2rem;
	}
/*----------example-of-use----------*/
	.column {
		width: auto;
		margin: initial;
	}
	.flex-box {
		flex-wrap: wrap;
	}
	#example-of-use .column-outside-left,
	#example-of-use .column-outside-right {
		flex: auto;
		order: 1;
	}
	#example-of-use .column-left,
	#example-of-use .column-right
	 {
		order: 2;
	}
	#example-of-use .column {
		padding: 2rem 0 0 0;
		border: none;
	}
	#example-of-use .column {
		flex-wrap: wrap;
		justify-content: inherit;
	}
	#example-of-use .flex-box3 {
		flex-wrap: wrap;
		padding-bottom: 3rem;
	}
	#example-of-use .flex-box3 .flex-item-1 {
		order: 1;
	}
	#example-of-use .flex-box3 .flex-item-2 {
		order: 2;
	}
	#example-of-use .flex-box3 .flex-item-1 {
		width: 80%;
		text-align: center;
		margin: 0;
	}
	/*----------how-to-buy----------*/
	#how-to-buy li:first-child a img {
		max-width: 25%;
		padding-right: 1.5rem;
	}
	#how-to-buy li:last-child a img {
		max-width: 21%;
		padding-right: 1.5rem;
	}
	#how-to-buy li:first-child a {
		font-size: 2.4rem;
		font-size: 24px;
		padding: 2rem 2rem;
	}
	#how-to-buy li:last-child a {
		font-size: 2.4rem;
		font-size: 24px;
		padding: 2rem 2rem;
	}
}
/* ↓　sm 幅以下の時に反映される設定　↓ */
@media only screen and (max-width: 767px) {
/*----------top-img----------*/
	#top-img {
		height: auto;
		flex-wrap: wrap;
		padding: 0;
	}
	#top-img div.d-md-none.d-block{
		position: relative;
	}
	#top-img div.d-md-none.d-block::after {
		content: '';
		position: absolute;
		background-image: url(../img/logo.svg);
		background-repeat: no-repeat;
		background-size: 20%;
		background-position: right 5% bottom 10%;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
	}
	#top-img::after {
		display: none;
	}
	h2 {
		margin-top: 3rem;
	}
/*----------product-mainimg----------*/
	#product-mainimg .waterdrop-l {
		top: 15%;
		left: -5%;
	}
	#product-mainimg .waterdrop-r {
		top: 15%;
		right: -5%;
	}	
	#product-mainimg .waterdrop-l img,
	#product-mainimg .waterdrop-r img {
		width: 80%;
	}
	#product-mainimg {
		margin-bottom: 5rem;
	}
/*----------message----------*/
	#message p {
		line-height: 3rem;
	}
	#message .message-img1 {
		left: 0;
		top: 0;
		width: 530px;
	}
	#message .message-img2 {
		height: 240px;
		width: 350px;
		right: 0;
		top: 10.3%;
	}
/*----------about-product----------*/
	#about-product h3 {
		font-size: 3rem;
		margin: 5rem 0 2rem 0;
	}
	#about-product dt span {
		font-size: 5.5rem;
		font-size: 55px;
		margin-right: 2rem;
	}
	#about-product dt {
		font-size: 2.5rem;
		font-size: 25px;
		margin-bottom: 3rem;
	}
	.about-01 {
		padding: 6rem 0 1rem;
	}
	.about-01 dd ul li {
		padding: 1.5rem;
	}
	#about-product dd p {
		letter-spacing: 0;
	}
	.about-01 dd ul li:first-child::after,
	.about-01 dd ul li:nth-child(2)::after {
		top: 20%;
		right: -13%;
		border: 13px solid transparent;
		border-left: 18px solid #08287E;
	}
	.about-01 dd h4 {
		font-size: 3rem;
		font-size: 25px;
		color: #08287E;
		margin: 1.5rem 0;
	}
	.about-02 {
		padding: 6rem 0;
	}
	.about-02 dd ul li p {
		font-size: 2.3rem;
		font-size: 23px;
	}
	.about-02 dd ul li p span {
		font-size: 1.4rem;
		font-size: 14px;
	}
	.about-02 dd ul {
		padding: 2.5rem 0 1.5rem;
		margin-top: 2rem;
		align-items: center;
	}
	.about-02 dd ul li:nth-child(2) p {
		line-height: 2rem;
		margin-bottom: 0;
	}
	.about-02 dd ul li:first-child::after {
		font-size: 3.5rem;
		font-size: 35px;
	}
	.about-02 dd ul li:nth-child(3)::before {
		font-size: 3.5rem;
		font-size: 35px;
	}
	.about-02 dd ul li:last-child::before {
		font-size: 3.5rem;
		font-size: 35px;
	}
	.about-03 {
		padding: 6rem 0;
	}
	.detail h4.title {
		font-size: 2.2rem;
		font-size: 22px;
	}
	.detail h4.title::after {
		left: 45%;
		right: 45%;
	}
	.detail h4.title + p {
		text-align: justify!important;
		margin: 4rem 2.5rem 0;
	}
	.detail ul li p {
		font-size: 1.6rem;
		font-size: 16px;
	}
	.detail ul li figcaption {
		letter-spacing: 0;
		font-size: 1.4rem;
		font-size: 14px;
		line-height: 1.5em;
		margin-top: 1rem;
	}
	.point-01 figure + div{
		padding: 0 1rem;
	}
	.point-02 h4 + ul li {
		width: 100px;
		height: 100px;
		margin: 0rem 0.5rem;
	}
	.point-02 h4 + ul li span {
		width: 100px;
	}
	.point-02 dl {
		flex-wrap: wrap;
	}
	.point-02 dt {
		width: 40%;
	}
	.detail ul {
		margin-top: 0;
	}
	.point-02 a p::after {
		right: -20px;
	}
	.point-02 a:hover p::after{
		right: -40px;
	}
/*----------example-of-use----------*/
	#example-of-use h2 {
		font-size: 3rem;
		font-size: 30px;
		margin-top: 0;
		line-height: 5rem;
	}
	#example-of-use {
		margin: 3rem;
	}
	.flex-box {
		padding: 2rem 0 0;
	}
	#example-of-use .flex-box h3 {
		margin: 1rem 0 2rem;
	}
	#example-of-use .flex-box3 {
		margin-top: 2rem;
	}
	#example-of-use .flex-box3 dd p,
	#example-of-use .flex-box3 dd table th,
	#example-of-use .flex-box3 dd table td {
		font-size: 1.6rem;
		font-size: 16px;
	}
	#example-of-use .flex-box3 dd table td span {
		font-size: 1.4rem;
		font-size: 14px;
	}
/*----------how-to-use----------*/
	#how-to-use h3 {
		font-size: 3rem;
		margin: 5rem 0 2rem 0;
	}
	#how-to-use table th {
		font-size: 2rem;
		font-size: 20px;
	}
	#how-to-use table {
		margin-top: 2rem;
	}
/*----------attention----------*/
	#attention {
    margin: 5rem 0 4rem;
    padding: 4rem 0;
}
/*----------how-to-buy----------*/
	#how-to-buy h3 {
		font-size: 3rem;
		margin: 5rem 0 2rem 0;
	}
	
	#how-to-buy .ec-img {
		display: flex;
		align-items: center;
		background-image: url(../img/how-to-buy-img.jpg);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		min-height: 150px;
		margin: 3rem 0 8rem;
		transition: 0.2s;
	}	
	
	#how-to-buy li:first-child a {
		font-size: 3.5rem;
		font-size: 35px;
		padding: 1.5rem 3rem;
		margin-bottom: 2rem;
	}
	#how-to-buy li:last-child a {
		font-size: 3.5rem;
		font-size: 35px;
		padding: 1.5rem 3rem;
	}
}	
/* ↓　col 幅以下の時に反映される設定　↓ */
@media only screen and (max-width: 575px) {
/*----------top-img----------*/
	h2 {
		font-size: 2.8rem;
		font-size: 28px;
		line-height: 1.8em;
	}
	#top-img p {
		letter-spacing: 0;
		margin-top: 2rem;
		line-height: inherit;
	}
	#top-img div.d-md-none.d-block::after {
		display: none;
	}
/*----------product-mainimg----------*/
	#product-mainimg {
		background-image: url(../img/product-mainimg-back.png);
		background-position: top 15% center;
		background-repeat: no-repeat;
		background-size: cover;
		margin-bottom: 0rem;
	}
	#product-mainimg .waterdrop-l {
		top: 20%;
		z-index: -1;
	}
	#product-mainimg .waterdrop-r {
		top: 20%;
		z-index: -1;
	}
	#product-mainimg figcaption div {
		padding: 3rem 2rem 2rem;
	}
/*----------p#message----------*/
	#message .message-img1 {
		left: -10%;
		top: 2%;
		width: 450px;
	}
	#message .message-img2 {
		height: 130px;
		width: 50%;
		right: 0;
		top: 15.2%;
	}
	#message .message-img1::before{
		display: none;
	}
	#message h2 {
		margin-top: 34rem;
	}
	#message p {
		margin-top: 2rem;
	}
/*----------about-product----------*/
	#about-product h3 {
		font-size: 2.5rem;
		margin: 4rem 0 1rem 0;
		padding: 4rem 2rem 2rem;
	}
	#about-product dt {
		margin: 0 1rem 2rem;
		text-align: left;
	}
	.about-01 dd ul li {
		padding: 2rem;
	}
	.about-01 dd ul li:first-child::after,
	.about-01 dd ul li:nth-child(2)::after,
	.about-01 dd ul li:last-child::after{
		content: "1";
		position: absolute;
		top: 5%;
		right: 0;
		left: 5%;
		bottom: 0;
		transform: none;
		border: none;
		font-size: 20px;
		font-size: 2.5rem;
		font-weight: bold;
		color: #fff;
		width: 50px;
		height: 50px;
		background: #08287E;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		display: flex;
		padding: 0 0 0.5rem;
	}
	.about-01 dd ul li:nth-child(2)::after {
		content: "2";
	}
	.about-01 dd ul li:last-child::after {
		content: "3";
	}
	.about-02 dd ul li {
		margin-bottom: 4rem;
	}
	.about-02 dd ul li {
		margin-bottom: 0.5rem;
	}
	.about-02 dd ul li:first-child::after {
		right: -15px;
	}
	.about-02 dd ul li:nth-child(3)::before {
		left: -20px;
	}
	.about-02 dd ul li:last-child::before {
		top: 20%;
		left: 7%;
	}
	.about-02 dd ul li:last-child p {
		margin-top: 0;
		margin-left: 2em;
	}
	.about-02 {
		padding: 5rem 0;
	}
	.about-03 h4 {
		font-size: 1.8rem;
		font-size: 18px;
	}
	.detail h4.title::after {
		left: 40%;
		right: 45%;
	}
	.detail ul li p {
		font-size: 2rem;
		font-size: 20px;
		margin-top: 2rem;
	}
	.about-03 h4 {
		font-size: 2.5rem;
		font-size: 25px;
		line-height: 1.5em;
		margin: 4rem 0 1.5rem;
	}
	.point-01 figure {
		margin: 0 1rem 2rem;
	}
	.point-01 ul li {
		font-size: 1.4rem;
		font-size: 14px;
	}
	.point-02 h4 + ul li {
		width: 90px;
		height: 90px;
		margin: 0.5rem 0.5rem;
	}
	.point-02 h4 + ul li span {
		width: 90px;
		font-size: 18px;
		font-size: 1.8rem;
	}
	.point-02 dt {
		width: 60%;
	}
	.point-02 dl li {
		font-size: 15px;
		font-size: 1.5rem;
	}
	.point-02 dl li::before {
		padding-right: 0.5rem;
	}
	.point-02 dl + p {
		padding: 0 2rem;
	}
	.point-02 a {
		background-image: url(../img/about-03-img5-2.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		min-height: auto;
		margin: 3rem 0 0rem;
		padding: 8rem 1rem 2rem;
	}
	.point-02 a p{
		font-size: 14px;
		line-height: 2.5rem;
	}
	.point-02 a p span {
		font-size: 18px;
		font-size: 1.8rem;
		margin-bottom: 1rem;
	}
	.point-02 a p::after {
		right: -10px;
		width: 20px;
		height: 20px;
	}
	.point-02 a:hover p::after{
		right: -20px;
	}
	.about-03 {
		padding: 6rem 0 4rem;
	}
/*----------example-of-use----------*/
	#example-of-use {
		margin: 3rem 1rem;
	}
	#example-of-use .flex-box h3 {
		margin: 0rem 0 1rem;
		font-size: 2.1rem;
		font-size: 21px;
	}
	#example-of-use .flex-box h3 + p {
		text-align: justify;
	}
	#example-of-use .flex-box dd {
		padding: 1rem 0 1em;
		letter-spacing: 0;
	}
	#example-of-use .flex-box3 {
		margin-top: 3rem;
	}
	#example-of-use .flex-box3 .flex-item-1 {
		width: 100%;
	}
	#example-of-use .flex-box3 dt img {
		margin-left: 0;
	}
	#example-of-use .flex-box3 dd p,
	#example-of-use .flex-box3 dd table th,
	#example-of-use .flex-box3 dd table td {
		font-size: 1.8rem;
		font-size: 18px;
		width: 100%;
		display: block;
	}
	#example-of-use .flex-box3 dd table td {
		text-align: right;
	}
	#example-of-use .flex-box3 table{
		width: 100%;
	}
/*----------how-to-use----------*/
	#how-to-use ul li {
		margin-bottom: 3rem;
	}
	#how-to-use table th {
		width: 100%;
		display: block;
	}
	#how-to-use table td {
		padding: 1rem 2rem 2rem;
		display: block;
	}
	#how-to-use p {
		margin-top: 0;
	}
/*----------attention----------*/
	#attention {
		margin: 3rem 0 0;
		padding: 3rem 0;
	}
/*----------how-to-buy----------*/
	#how-to-buy ul li {
		padding: 0;
	}
	#how-to-buy li:first-child a {
		font-size: 2.8rem;
		font-size: 28px;
		padding: 1.5rem;
	}
	#how-to-buy li:last-child a {
		font-size: 2.8rem;
		font-size: 28px;
		padding: 1.5rem;
	}
	#how-to-buy ul {
		margin: 2rem 0 5rem;
	}
	
	#how-to-buy .ec-img {
		display: flex;
		align-items: center;
		background-image: url(../img/how-to-buy-img-s.jpg);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		min-height: 195px;
		margin: 2rem 0 4rem;
		transition: 0.2s;
	}	

	
}