/*hop drip css*/
#hopdrip img {
	width: 100%;
	height: auto;
}
#hopdrip .show_pc {
	display: none !important;
}
#hopdrip .show_sp {
	display: block !important;
}

/*ttl-area*/
#hopdrip .ttl-area {
width: 100%;
margin: 0 auto;
}

/*about-area*/
#hopdrip .about-area {
width: 100%;
background-color: #FFF9E0;
margin: 0 auto;
padding: 35px;
}
#hopdrip .about-area .about-inner {
margin: 0 auto 20px;
}
#hopdrip .about-area h2 {
margin-bottom: 10px;
}
#hopdrip .about-area p {
margin: 0 auto;
}
#hopdrip .about-area .about-img {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
#hopdrip .about-area .about-img01 ,
#hopdrip .about-area .about-img02 {
margin-bottom: 10px;
}

/*outline-area*/
#hopdrip .outline-area {
width: 100%;
background-color: #FFF;
margin: 0 auto;
padding: 25px 22.5px;
}
#hopdrip .outline-area .outline-inner {
margin: 0 auto 30px;
}
#hopdrip .outline-area p {
margin: 0 auto;
}
#hopdrip .outline-area .products-wrapper {
margin-bottom: 25px;
}
#hopdrip .outline-area .products-img {
margin-bottom: 20px;
}
#hopdrip .outline-area .component-wrapper {
border: 1px solid #007E6A;
padding: 15px 15px 20px;
}
#hopdrip .outline-area .component-inner {
position: relative;
}
#hopdrip .outline-area .component-inner::before {
content: "";
width: 44px;
height: 0;
border-top: 1px solid #007E6A;
top: 0;
left: -22px;
position: absolute;
transform: rotate(-45deg);
}
#hopdrip .outline-area .component-inner::after {
content: "";
width: 44px;
height: 0;
border-top: 1px solid #007E6A;
bottom: -5px;
right: -22px;
position: absolute;
transform: rotate(-45deg);
}
#hopdrip .outline-area .component-pkg {
width: 61.6%;
margin: 0 0 10px auto;
}
#hopdrip .outline-area p.component-cap {
font-size: 12px;
line-height: 1.333;
color: #007E6A;
margin: 0;
text-align: center;
position: absolute;
bottom: 35%;
left: 30%;
transform: translate(-50%,-50%);
}
#hopdrip .outline-area .component-eyecatch {
width: 35.6%;
position: absolute;
top: 5%;
left: 12%;
}
#hopdrip .outline-area .component-body {
position: relative;
width: 100%;
border-top: 1px solid #007E6A;
padding-top: 20px;
margin-top: 10px;
}

#hopdrip .outline-area .component-body p {
font-size: 12px;
line-height: 1.5;
color: #007E6A;
}
#hopdrip .outline-area .component-body p strong {
font-weight: bold;
}

/*detail-area*/
#hopdrip .detail-area {
width: 100%;
background-color: #007E6A;
margin: 0 auto;
padding: 25px 22.5px;
}
#hopdrip .detail-area h2 {
margin: 0 auto 22px;
}
#hopdrip .detail-area .detail-wrapper {
width: 100%;
margin: 0 auto;
background: #FFF;
position: relative;
/*background: linear-gradient(135deg, transparent 15px, #FFF 0) top left,
linear-gradient(-135deg, transparent 15px, #FFF 0) top right,
linear-gradient(-45deg, transparent 15px, #FFF 0) bottom right,
linear-gradient(45deg, transparent 15px, #FFF 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;*/
}
#hopdrip .detail-area .detail-wrapper-top::before {
content: "";
width: 0;
height: 0;
border-bottom: solid 15px #fff;
border-left: solid 15px #007E6A;
position: absolute;
top: 0;
left: 0;
}
#hopdrip .detail-area .detail-wrapper-top::after {
content: "";
width: 0;
height: 0;
border-top: solid 15px #007E6A;
border-left: solid 15px #fff;
position: absolute;
top: 0;
right: 0;
}
#hopdrip .detail-area .detail-wrapper-bottom::before {
content: "";
width: 0;
height: 0;
border-top: solid 15px #fff;
border-left: solid 15px #007E6A;
position: absolute;
bottom: 0;
left: 0;
}
#hopdrip .detail-area .detail-wrapper-bottom::after {
content: "";
width: 0;
height: 0;
border-bottom: solid 15px #007E6A;
border-left: solid 15px #fff;
position: absolute;
bottom: 0;
right: 0;
}
#hopdrip .detail-area .detail-inner {
width: 100%;
margin: 0 auto;
padding: 20px;
}
#hopdrip .detail-area .detail-inner p {
margin: 0 auto;
}
#hopdrip .detail-area .detail-inner .detail01,
#hopdrip .detail-area .detail-inner .detail02,
#hopdrip .detail-area .detail-inner .detail03 {
margin-bottom: 40px;
}
#hopdrip .detail-area .detail-inner .mov-area {
width: 100%;
padding-top: 56.25%;
position: relative;
margin: 15px auto 0;
}
#hopdrip .detail-area .detail-inner .mov-area iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#hopdrip .detail-area .detail-inner .detail-ill {
width: 106.9%;
margin-left: -3.45%;
}
#hopdrip .detail-area .detail-inner .detail03 h3 {
margin-bottom: 20px;
}
#hopdrip .detail-area .detail-inner .faq-area {
background-color: #005145;
}
#hopdrip .detail-area .detail-inner .faq-area *{
margin: 0;
padding: 0;
}
#hopdrip .detail-area .detail-inner .profile-area {
border: 1px solid #440205;
margin-bottom: 30px;
}
#hopdrip .detail-area .detail-inner .profile-inner {
padding: 0 15px 15px;
position: relative;
}
#hopdrip .detail-area .detail-inner .profile-img {
width: 37.2%;
position: absolute;
top: 2px;
right: 15px;
}
#hopdrip .detail-area .detail-inner .profile-person .name {
width: 58.8%;
margin: 0 auto 0 0;
}
#hopdrip .detail-area .detail-inner .profile-person .career {
width: 100%;
margin: 12px 0;
padding-bottom: 10px;
border-bottom: 1px solid #440205;
}
#hopdrip .detail-area .detail-inner .profile-products p {
font-size: 10px;
line-height: 1.5;
}
#hopdrip .detail-area .detail-inner .profile-products p strong {
font-weight: bold;
margin-bottom: 10px;
display: inline-block;
}

/*pc*/
@media only screen and (min-width: 769px) {
	#hopdrip .show_pc {
		display: block !important;
	}
	#hopdrip .show_sp {
		display: none !important;
	}
	
	/*about-area*/
#hopdrip .about-area {
padding: 35px 0;
}
#hopdrip .about-area .about-inner {
width: 80%;
max-width: 900px;
margin: 90px auto 50px;
}
#hopdrip .about-area h2 {
margin-bottom: 30px;
}
#hopdrip .about-area p {
margin: 0 auto;
}
#hopdrip .about-area .about-img {
width: 94%;
max-width: 1200px;
margin: 0 auto 100px;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#hopdrip .about-area .about-img01 ,
#hopdrip .about-area .about-img02 ,
#hopdrip .about-area .about-img03 {
width: 32.75%;
margin: 0;
}

/*outline-area*/
#hopdrip .outline-area {
width: 100%;
background-color: #FFF;
margin: 0 auto;
padding: 92px 0 140px;
}
#hopdrip .outline-area .outline-inner {
width: 90%;
max-width: 1100px;
margin: 0 auto 30px;
}
#hopdrip .outline-area h2 {
width: 900px;
margin: 0 auto 50px;
}
#hopdrip .outline-area p {
margin: 0 auto;
}
#hopdrip .outline-area .products-wrapper {
margin-bottom: 30px;
display: flex;
align-items: center;
}
#hopdrip .outline-area .products-img {
width: 40.9%;
max-width: 450px;
margin: 0 -5% 0 0;
order: 2;
}
#hopdrip .outline-area .products-txt {
width:64.1%;
max-width: 705px;
margin: auto 0;
order: 1;
}
#hopdrip .outline-area .component-wrapper {
border: 1px solid #007E6A;
padding: 15px 15px;
}
#hopdrip .outline-area .component-inner {
position: relative;
display: flex;
}
#hopdrip .outline-area .component-inner::before {
content: "";
width: 44px;
height: 0;
border-top: 1px solid #007E6A;
top: 0;
left: -22px;
position: absolute;
transform: rotate(-45deg);
}
#hopdrip .outline-area .component-inner::after {
content: "";
width: 44px;
height: 0;
border-top: 1px solid #007E6A;
bottom: 0;
right: -22px;
position: absolute;
transform: rotate(-45deg);
}
#hopdrip .outline-area .component-pkg {
width: 16.82%;
margin: 0 2% 0 2.7%;
}
#hopdrip .outline-area p.component-cap {
font-size: 12px;
line-height: 1.333;
color: #007E6A;
margin: 0;
text-align: center;
position: static;
transform: translate(0,0);
}
#hopdrip .outline-area .component-eyecatch {
width: 15.2%;
position: absolute;
top: 50%;
left: unset;
right: 9%;
transform: translate(0,-50%);
}
#hopdrip .outline-area .component-body {
position: relative;
width: 50%;
border-top: none;
border-left: 1px solid #007E6A;
padding: 0 0 0 54px;
margin: 0;
display: flex;
flex-wrap: wrap;
flex-flow: column;	
align-content: center;
justify-content: center;
}
#hopdrip .outline-area .component-body p {
font-size: 16px;
line-height: 1.5;
color: #007E6A;
margin: 0;
text-align: left;
}
#hopdrip .outline-area .component-body p strong {
font-weight: bold;
display: inline-block;
margin-bottom: 12px;
}

/*detail-area*/
#hopdrip .detail-area {
width: 100%;
background-color: #007E6A;
margin: 0 auto;
padding: 95px 25px;
}
#hopdrip .detail-area h2 {
width: 900px;
margin: 0 auto 90px;
}
#hopdrip .detail-area .detail-wrapper {
width: 100%;
max-width: 1600px;
margin: 0 auto;
display: block;
background: #FFF;
/*background: linear-gradient(135deg, transparent 15px, #FFF 0) top left,
linear-gradient(-135deg, transparent 15px, #FFF 0) top right,
linear-gradient(-45deg, transparent 15px, #FFF 0) bottom right,
linear-gradient(45deg, transparent 15px, #FFF 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;*/
}
#hopdrip .detail-area .detail-wrapper-top::before {
border-bottom: solid 30px #fff;
border-left: solid 30px #007E6A;
}
#hopdrip .detail-area .detail-wrapper-top::after {
border-top: solid 30px #007E6A;
border-left: solid 30px #fff;
}
#hopdrip .detail-area .detail-wrapper-bottom::before {
border-top: solid 30px #fff;
border-left: solid 30px #007E6A;
}
#hopdrip .detail-area .detail-wrapper-bottom::after {
border-bottom: solid 30px #007E6A;
border-left: solid 30px #fff;
}
#hopdrip .detail-area .detail-inner {
width: 100%;
max-width: 1374px;
margin: 0 auto;
padding: 150px 25px;
background-color: #FFF;
}
#hopdrip .detail-area .detail-inner p {
margin: 0 auto;
}
#hopdrip .detail-area .detail-inner .detail01 {
width: 900px;
margin: 0 auto 95px;
}
#hopdrip .detail-area .detail-inner .detail02 {
width: 100%;
margin: 0 auto 95px;
}
#hopdrip .detail-area .detail-inner .detail02 h3, 
#hopdrip .detail-area .detail-inner .detail02 p {
width: 900px;
margin-left: auto;
margin-right: auto;
}
#hopdrip .detail-area .detail-inner .detail-ill {
width: 100%;
margin: 0 auto;
}
#hopdrip .detail-area .detail-inner .voice-ill {
width: 900px;
margin: 0 auto;
}
#hopdrip .detail-area .detail-inner .detail03 {
max-width: 1200px;
margin: 0 auto;
}
#hopdrip .detail-area .detail-inner .detail03 h3 {
width: 900px;
margin: 0 auto 80px;
}
#hopdrip .detail-area .detail-inner .faq01 ,
#hopdrip .detail-area .detail-inner .faq02 ,
#hopdrip .detail-area .detail-inner .faq03 ,
#hopdrip .detail-area .detail-inner .faq04 ,
#hopdrip .detail-area .detail-inner .faq05 {
display: flex;
}
#hopdrip .detail-area .detail-inner .faq02 ,
#hopdrip .detail-area .detail-inner .faq04 {
flex-direction: row-reverse;
}

#hopdrip .detail-area .detail-inner .profile-area {
border: 1px solid #440205;
margin: 90px auto 0;
max-width: 1200px;
}
#hopdrip .detail-area .detail-inner .profile-inner {
padding: 0 0 35px;
position: relative;
}
#hopdrip .detail-area .detail-inner .profile-img {
width: 26.6%;
position: absolute;
top: unset;
right: 35px;
bottom: 0;
}
#hopdrip .detail-area .detail-inner .profile-person {
width: 63%;
padding: 35px 0 14px;
margin: 0 auto 0 7.0%;
}
#hopdrip .detail-area .detail-inner .profile-person .name {
width: 100%;
margin: 0 auto;
}
#hopdrip .detail-area .detail-inner .profile-person .career {
width: 100%;
margin: 0;
padding-bottom: 10px;
border-bottom: none;
}
#hopdrip .detail-area .detail-inner .profile-products {
width: 63%;
margin: 0 auto 0 7.0%;
padding: 10px 0;
padding-left: 19px;
border-bottom: none;
border-left: 4px solid #440205;
}
#hopdrip .detail-area .detail-inner .profile-products p {
font-size: 16px;
line-height: 1.5;
}
#hopdrip .detail-area .detail-inner .profile-products p strong {
font-size: 17px;
font-weight: bold;
margin-bottom: 15px;
display: inline-block;
}

}