@charset "utf-8";
/*=================================
ヘナページレイアウト
===================================*/

/*チェック文*/
.check {
margin-bottom: 15px;
}
.check ul{
}
.check li{
position: relative;
font-size: 14px;
color: #333;
font-weight: bold;
align-items: center;
padding-left: 20px;
padding-bottom: 10px;
letter-spacing: 0em;
width: 100%;
}
.check li:before{ 
position: absolute;
width: 0.8em;
height: 0.4em;
border-bottom: 4px solid #265CFF;
border-left: 3px solid #265CFF;
transform: rotate(-45deg) translate(2px, -2px);
content: '';
top:10px;
right: 0;
bottom: 0;
left:0px;
}
/*ヘナチェック文*/
.henna5 {
margin-top: 15px;
}
.henna5 ul{
}
.henna5 li{
position: relative;
font-size: 14px;
color: #333;
font-weight: bold;
align-items: center;
padding-left: 25px;
padding-bottom: 10px;
letter-spacing: 0em;
width: 100%;
}
.henna5 li:before{ 
position: absolute;
top:0px;
right: 0;
bottom: 0px;
left:0px;
width: 1.25em;
height: 1.25em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.00488 19H22.0049V21H2.00488V19ZM2.00488 5L7.00488 8L12.0049 2L17.0049 8L22.0049 5V17H2.00488V5Z' fill='%23ffb500'%3E%3C/path%3E%3C/svg%3E");
content: '';
}
/*クレンジングクレイ文*/
.spa {
margin-top: 20px;
}
.spa ul{
}
.spa li{
font-size: 15px;
color: #333;
align-items: center;
padding-bottom: 5px;
letter-spacing: 0em;
width: 100%;
}

/*内容*/
.area > p{
text-align:justify;
}

.area ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

/*駅名タイトル*/
.area p.train-text2{
display: block;
font-family: "Klee One", cursive;
text-align: left;
color: #fff;
background-color: rgba(38, 92, 255, 0.7);
}

p.henna-text{
font-size: 15px;
line-height: 1.6em;
letter-spacing: 0.05em;
margin-bottom: 0px
}
p.patch-1{
text-align: center;
color:#265CFF;
}
p.patch-2{
text-align: center;
}
/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {
/* ================= 表 ================= */
.tbl-r03 {
width: 100%;
color: #333;
border-collapse:collapse;
}
.tbl-r03 tr {
display: block;
float: left;
  }
.tbl-r03 th {
border-bottom: 1px solid #265CFF;
}
.tbl-r03 td {
border-bottom: 1px solid #265CFF;
font-size: 14px;
}
.tbl-r03 tr td, 
.tbl-r03 tr th {
    border-left: none;
    display: block;
  }
/* メインタイトル */
.tbl-r03 thead.tittle1 {
font-family: "Klee One", cursive;
background-color: rgba(38, 92, 255, 0.7);
border-style: none;
font-size: 15px;
color: #fff;

}
/* メインタイトル */
.tbl-r03 th.tittle1-1 {
font-weight: normal;
text-align: left;
padding: 14px;

}
/* タイトル2 */
.tbl-r03 thead.tittle2 {
color: #333;
font-weight: normal;
text-align: center;
width: 30%;
display: block;
float: left;
font-size: 14px;
}
 .tbl-r03 thead tr {
    width: 100%;
  }
 .tbl-r03 tbody tr {
    width: 100%;
  }
  .tbl-r03 tbody {
    display: block;
    float: left;
    width: 70%;
  }
	
/* タイトル2 */	
.tbl-r03 th{
padding: 10px 0 0 0
}
.tbl-r03 th.price {
	text-align: center;
	height: 60px
}	
.tbl-r03 th.time {
	text-align: center;
	height: 60px
}
.tbl-r03 th.come {
	text-align: center;
	height: 150px
}
.tbl-r03 th.come1-1 {
	text-align: center;
	height: 60px
}
.tbl-r03 th.come3 {
	text-align: center;
	height: 280px
}
/* 詳細 */
.tbl-r03 td{
padding: 10px 0 0 0;
}
.tbl-r03 td.price2 {
text-align: center;
	height: 60px
}	
.tbl-r03 td.time2 {
text-align: center;
	height: 60px
}
.tbl-r03 td.come2 {
text-align: left;
	height: 150px
}
.tbl-r03 td.come2-2 {
text-align: left;
	height: 60px
}
.tbl-r03 td.come3-3 {
text-align: left;
	height: 280px
}
}
/* ########### 428pxから530pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 530px) {
/* ================= 表 ================= */
.tbl-r03 {
width: 100%;
color: #333;
border-collapse:collapse;

}
.tbl-r03 tr {
display: block;
float: left;
  }
.tbl-r03 th {
border-bottom: 1px solid #265CFF;

}
.tbl-r03 td {
border-bottom: 1px solid #265CFF;
font-size: 15px;
}
.tbl-r03 tr td, 
.tbl-r03 tr th {
    border-left: none;
    display: block;
  }
/* メインタイトル */
.tbl-r03 thead.tittle1 {
font-family: "Klee One", cursive;
background-color: rgba(38, 92, 255, 0.7);
border-style: none;
font-size: 17px;
color: #fff;

}
/* メインタイトル */
.tbl-r03 th.tittle1-1 {
font-weight: normal;
text-align: left;
padding: 15px;

}
/* タイトル2 */
.tbl-r03 thead.tittle2 {
color: #333;
font-weight: normal;
text-align: center;
width: 30%;
display: block;
float: left;
font-size: 15px;
}
 .tbl-r03 thead tr {
    width: 100%;
  }
 .tbl-r03 tbody tr {
    width: 100%;
  }
  .tbl-r03 tbody {
    display: block;
    float: left;
    width: 70%;
  }
	
/* タイトル2 */	
.tbl-r03 th{

}
.tbl-r03 th.price {
	text-align: center;
	padding: 10px;
	height: 70px
}	
.tbl-r03 th.time {
	text-align: center;
	padding: 10px;
	height: 70px
}
.tbl-r03 th.come {
	text-align: center;
	padding: 10px;
	height: 150px
}
.tbl-r03 th.come1-1 {
	text-align: center;
	padding: 10px;
	height: 80px
}
.tbl-r03 th.come3 {
	text-align: center;
	padding: 10px;
	height: 270px
}
/* 詳細 */
.tbl-r03 td{
padding: 10px;
}
.tbl-r03 td.price2 {
text-align: center;
height: 70px
}	
.tbl-r03 td.time2 {
text-align: center;
height: 70px

}
.tbl-r03 td.come2 {
text-align: left;
	padding: 10px;
	height: 150px

}
.tbl-r03 td.come2-2 {
text-align: left;
	padding: 10px;
	height: 80px
}
.tbl-r03 td.come3-3 {
text-align: left;
	padding: 10px;
	height: 270px
}
}
/* ########### 530px 以上 ########### */
@media screen and (min-width: 530px) {
/* ================= 表 ================= */
.tbl-r03 {
width: 100%;
color: #333;
border-collapse:collapse
}

.tbl-r03 th {
border-bottom: 1px solid #265CFF;
}
.tbl-r03 td {
border-bottom: 1px solid #265CFF;
font-size: 15px;
}

/* メインタイトル */
.tbl-r03 thead.tittle1 {
font-family: "Klee One", cursive;
background-color: rgba(38, 92, 255, 0.6);
border-style: none;
font-size: 18px;
color: #fff;
}
/* タイトル */
.tbl-r03 th.tittle1-1 {
font-weight: normal;
text-align: left;
padding: 15px;
}
/* タイトル2 */
.tbl-r03 thead.tittle2 {
color: #333;
font-weight: normal;
text-align: center;
height: 45px;
font-size: 15px;
}

.tbl-r03 th.price {
	width:30%;
	text-align: center;
}	
.tbl-r03 th.time {
	width:30%;
	text-align: center
}
.tbl-r03 th.come {
	width:40%;
	text-align: center
}
.tbl-r03 th.come1-2 {
	width:40%;
	text-align: center
}

/* 詳細 */
.tbl-r03 td{
padding: 20px 0px 20px 0px;
}
.tbl-r03 td.price2 {
text-align: center;
}	
.tbl-r03 td.time2 {
text-align: center
}
.tbl-r03 td.come2 {
text-align: left
}
.tbl-r03 td.come2-2 {
text-align: left
}
}


/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {

/*駅名タイトル*/
.area p.train-text2{
display: block;
font-size: 15px;
letter-spacing: 0em;
padding:10px 5px 10px 10px;
margin-bottom:30px
}
}		
/* ########### 529px 以下 ########### */
@media screen and (max-width: 529px) {
	
/*内容*/
/*左文字右画像*/
.area ul.area-1-box{
margin-bottom: 30px;
}
/*左画像右文字*/
.area ul.area-2-box{
margin-bottom: 0px;
}
/*パッチテスト*/
.area ul.area-3-box{
margin-top: 20px;
}
.area-1-2/*右画像*/, .area-1-3/*左画像*/{
width: 100%;
margin-bottom: 0px;
}
.area-1-1 , .area-1-4{
margin-bottom: 20px;
}
.area-1-2 img{
width: 100%;
height: auto;
text-align:right;
display: block;	
margin: 0 0 0 auto
}
.area-1-3 img{
width: 100%;
height: auto;
display: block;	
}
	
.area ul li.area-1-4/*右文字*/{
order: 1
}
.area ul li.area-1-3/*左画像*/{
order: 2
}

.area-3-1/*ヘナチェック*/{
width: 100%;
margin-top: 0px;
}
.area-3-1 img{
width: 80%;
height: auto;
display: block;	
margin-left: auto;
margin-right: auto
}
p.patch-1{
font-size: 24px;
margin-bottom: 5px
}
p.patch-2{
line-height: 1.5;
font-size: 16px;
margin-bottom: 10px
}
}

/* ########### 428pxから530pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 530px) {
/*駅名タイトル*/
.area p.train-text2{
display: block;
font-size: 17px;
letter-spacing: 0em;
padding:10px 5px 10px 10px;
margin-bottom:30px
}
}
/* ########### 531px 以上 ########### */
@media screen and (min-width: 531px) {
/*内容*/	
/*左文字右画像*/
.area ul.area-1-box{
margin-bottom: 50px;
}
/*左画像右文字*/
.area ul.area-2-box{
margin-bottom: 0px;
}
/*パッチテスト*/
.area ul.area-3-box{
margin-bottom: 0px;
}	
	
.area ul li.area-1-1/*左文字*/ , .area-1-4/*右文字*/, .area-1-2/*右画像*/, .area-1-3/*左画像*/{
width: 50%;
margin-bottom: 0px;
}
	
/*駅名タイトル*/
.area p.train-text2{
display: block;
font-size: 17px;
letter-spacing: 0.1em;
padding:10px 0px 10px 20px;
margin-top: 0px;
margin-bottom:30px;
}

}
/* ########### 531pxから768pxまで ########### */
@media screen and (min-width: 531px) and (max-width: 768px) {
	
/*内容*/
.area-3-1/*ヘナチェック*/{
width: 31%;
margin-bottom: 0px;
}
.area-3-1 img{
width: 100%;
height: auto;
display: block;	
}
.area-1-2 img{
width: 90%;
height: auto;
text-align:right;
display: block;	
margin: 0 0 0 auto
}
.area-1-3 img{
width: 90%;
height: auto;
display: block;	
}
p.patch-1{
font-size: 20px;
margin-bottom: 5px
}
p.patch-2{
line-height: 1.5;
font-size: 14px;
margin-bottom: 10px
}
}
/* ########### 769px 以上 ########### */
@media screen and (min-width: 769px) {
		
/*内容*/
.area-3-1/*ヘナチェック*/{
width: 31%;
margin-bottom: 0px;
}
.area-3-1 img{
width: 100%;
height: auto;
display: block;	
}
.area-1-2 img{
width: 90%;
height: auto;
text-align:right;
display: block;	
margin: 0 0 0 auto
}
.area-1-3 img{
width: 90%;
height: auto;
display: block;	
}
p.patch-1{
font-size: 24px;
margin-bottom: 5px
}
p.patch-2{
line-height: 1.5;
font-size: 15px;
margin-bottom: 10px
}
}