/* ===== base ===== */
* {
  box-sizing: border-box;
}

/* ============================================= Prodcut Page ============================================= */
#hydrangea .common-content {width: 100%; padding: 100px 0; background-color: #ffffff;}
#hydrangea .common-content>.header-logo {width: 400px; margin: 0 auto 80px;}
#hydrangea .common-content>.header-logo>img {width: 100%;}
#hydrangea .common-content>.lead {width: 100%; margin: 50px auto 100px;}
#hydrangea .common-content>.lead .leadWrap {width: 85%; margin: 0 auto; text-align: center;}
#hydrangea .common-content>.lead .leadWrap>h2 {margin: 0 auto 20px; font-size:1.3rem; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-weight:700; line-height:1; letter-spacing:0.1em;}
#hydrangea .common-content>.lead p {margin: 0 auto 20px; color: #000000; font-size: 0.9rem; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-weight: 700; line-height: 1.0; letter-spacing: 0.07em;}

@media screen and (max-width: 1000px) {
	#hydrangea .common-content {padding: 100px 0;}
	#hydrangea .common-content>.header-logo {width: 80%; margin: 40px auto 80px;}
}

#hydrangea .tool-content {max-width: 92%; margin: 0 auto 200px; padding: 0 0;}
#hydrangea .tool-content>h3 {display: block; width: 100%; margin: 0 auto 50px; padding: 10px 0; color: #ffffff; font-size:1.0rem; font-family: 'Inter', 'Noto Sans JP', sans-serif; background-color: #000000; font-weight:700; line-height:1; letter-spacing:0.1em; text-align: center;}
#hydrangea .tool-content>h4 {margin: 0 auto 10px; padding: 0 0; color: #000000; font-size:1.1rem; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-weight:700; line-height:1; letter-spacing:0.1em; text-align: center;}
#hydrangea .tool-content>h4:nth-of-type(2),
#hydrangea .tool-content>h4:nth-of-type(3) {margin: 0 auto 20px;}
#hydrangea .tool-content>p {margin: 0 auto 20px; color: #000000; font-size: 0.85rem; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-weight: 400; line-height: 1.0; letter-spacing: 0.07em; text-align: center;}
#hydrangea .downloadArea {max-width: 90%; margin: 0 auto 80px; padding: 0 0; display: flex; justify-content: space-between; align-items: stretch; gap: 5%;}
#hydrangea .downloadArea>.twocolumn73 {max-width: 100%; display: grid; grid-template-columns: 6.7fr 3.3fr; gap: 20px;}
#hydrangea .downloadArea>.threecolumn {max-width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
#hydrangea .downloadArea>div>div>a>img {width: 100%; margin: 0 auto 10px;}
#hydrangea .downloadArea>div>div>p {margin: 0 auto 20px; color: #000000; font-size: 0.7rem; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-weight: 400; line-height: 1.0; letter-spacing: 0.07em; text-align: center;}

#hydrangea a.btn_dl {display: block; width: 85%; margin: 0 auto; padding: 10px 0 14px; color: #ffffff; font-size: 0.7rem; font-weight: 700; line-height: 1.0; letter-spacing: 0.1em; border-radius: 10px; cursor: pointer; text-align: center; transition: background-color 0.3s ease, color 0.3s ease;}
#hydrangea a.btn_dl::after {font-size: 1.1rem; font-weight: 400; transition: all .3s ease; margin-left: 5px; color: #ffffff; position: relative; top: 2px;}
#hydrangea a.btn_dl {background-color: #000000; border: 2px solid #000000;}
#hydrangea a.btn_dl:hover {color: #000000; background-color: #ffffff;}
#hydrangea a.btn_dl::after {font-family: 'Material Symbols rounded'; content: "download";}
#hydrangea a.btn_dl:hover::after {color: #000000;}

.line-heading {display: flex; margin: 0 auto 30px; align-items: center; gap: 20px; color: #000; font-size: 0.85rem; text-align: center; letter-spacing: 0.1em;}
.line-heading::before,
.line-heading::after {content: ""; flex: 1; height: 1px; background-color: #333;}

@media screen and (max-width: 1000px) {
	#hydrangea .tool-content>h3 {font-size:0.9rem;}
	#hydrangea .tool-content>h4 {font-size:0.95rem;}
	#hydrangea .tool-content>p {font-size: 0.7rem; line-height: 1.5;}
	#hydrangea .downloadArea>div>div>p {font-size: 0.65rem; line-height: 1.5;}
	#hydrangea a.btn_dl {width: 95%; font-size: 0.65rem; letter-spacing: 0.01em;}
	#hydrangea a.btn_dl::after {font-size: 0.9rem; margin-left: 3px;}
}

/* ============================================= Back to ============================================= */
#hydrangea .backto {padding: 100px 0 200px !important;}
#hydrangea .backto>.backToBasics {color: #000000 !important;}
#hydrangea .backto>.backToBasics>.backToBasics__arrow::before{background:#000000 !important;}
#hydrangea .backto>.backToBasics>.backToBasics__arrow::after{background:#000000 !important;}

/* ============================================= Footer ============================================= */
#hydrangea footer>p {color: #000000 !important;}