jutakushoene.scss
/*----------------- 202310 ---------------- edit */
/* -------- reset -------- */
#layout03 {
margin: 1% auto 0 auto;
width: 100%;
}
.pg {
padding: 0;
}
h3:before,
h3:after,
h4:before,
h4:after {
content: none;
}
div {
box-sizing: border-box;
}
/* -------- ALL -------- */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: stretch;
}
@media screen and (max-width: 769px) {
.flex {}
.pg {
max-width: 100%;
}
}
@media screen and (max-width: 1024px) {
.pg {
max-width: 100%;
}
}
.inner {
padding: 0 4%;
}
@media screen and (min-width: 769px) {
.sp {
display: none;
}
}
@media screen and (max-width: 769px) {
.sp {
display: block;
}
}
.clr01 {
color: #58BEB8 !important;
}
.keikou {
background: linear-gradient(transparent 70%, #ff6 60%);
}
.fv_in {
background: #f1f1f1;
}
.fvimg {
margin: 0 auto;
}
.about_in {
padding-bottom: 10px;
}
.about_list {
width: 94%;
margin: 0 auto 10px auto;
text-align: center;
}
/* -------- contents -------- */
#subsidy {
color: #333;
}
#subsidy p {
line-height: 1.67;
font-weight: 350;
color: #333;
word-wrap: break-word;
}
#subsidy p.note {
font-size: 13px;
}
#subsidy h3 {
color: #58BEB8 !important;
border: 1px solid #58BEB8;
border-width: 2px 0;
background: #EBF7F6 !important;
font-size: 20px;
padding: 2%;
margin: 2% 0;
box-sizing: border-box;
}
#subsidy h4 {
color: #2a2a2a !important;
border: 0 solid #58BEB8;
border-left-width: 6px;
background: #fff;
font-size: 18px;
text-align: left;
padding: 0 2%;
margin: 4% 2% 2% 2%;
box-sizing: border-box;
}
#subsidy h5 {
font-size: 16px;
padding: 0 0 5px 14px;
}
#subsidy .caution_box {
background: #fff1f1;
padding: 10px;
border-radius: 15px;
width: 96%;
margin: 0 auto 40px auto;
}
#subsidy .caution_box p.ttl {
font-weight: bold;
text-align: center;
color: #ff0000;
padding-bottom: 0;
}
#subsidy .caution_box p {
line-height: 1.67;
font-weight: 350;
color: #333;
word-wrap: break-word;
}
#subsidy p.bld.top {
font-weight: 600;
text-align: center;
font-size: 20px;
}
#subsidy section.select {
margin: 1rem 0;
}
#subsidy .select_list {
color: #fff;
border-radius: 5px;
}
#subsidy .select_list a {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
width: 350px;
box-sizing: border-box;
height: 100px;
padding: 10px 25px;
color: #fff;
transition: 0.3s ease-in-out;
font-weight: 600;
filter: drop-shadow(0px 2px 4px #ccc);
border-radius: 70px;
text-align: center;
}
#subsidy .select_list a:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
text-decoration: none !important;
}
#subsidy .select_list a:hover a {
text-decoration: none;
}
#subsidy .select_list a:after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg) translateY(-48%);
position: absolute;
top: 48%;
right: 20px;
border-radius: 1px;
transition: 0.3s ease-in-out;
}
#subsidy .select_list a.first {
background: #3faafa;
margin-right: 30px;
}
#subsidy .select_list a.second {
background: #77cc00;
}
#subsidy .select_list a.last {
background: #fc9534;
}
#subsidy .link-button a {
background: #eee;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
max-width: 270px;
padding: 10px 25px;
color: #313131;
transition: 0.3s ease-in-out;
font-weight: 500;
transform: skew(-10deg, 0deg);
}
#subsidy .link-button a span {
transform: skewX(10deg);
}
#subsidy .link-button a:before {
content: '';
position: absolute;
top: calc(50% - 2px);
right: -1em;
transform: translateY(calc(-50% - 2px)) rotate(30deg);
width: 12px;
height: 2px;
background-color: #6bb6ff;
transition: 0.3s;
}
#subsidy .link-button a:after {
content: '';
position: absolute;
top: 50%;
right: -1em;
transform: translateY(-50%);
width: 40px;
height: 2px;
background-color: #58BEB8;
transition: 0.3s;
}
#subsidy .link-button a:hover:before,
#subsidy .link-button a:hover:after {
right: -1.2em;
}
#subsidy .link-button a:hover {
background: #EBF7F6;
color: #58BEB8;
text-decoration: none;
}
@media screen and (max-width: 769px) {
.detailWrap {
padding: 0 4%;
}
#subsidy section.select .select_wrap {
display: block;
}
#subsidy .select_list a.first {
margin-right: auto;
margin-bottom: 15px;
}
#subsidy .select_list a {
display: block;
height: auto;
}
#subsidy p.bld.top {
font-size: 18px;
}
}