maintenance.scss
$tb: "(max-width: 1024px)";
$sp: "(max-width: 767px)";
$viewport: 750;
@function pxtovw($num, $width: $viewport) {
@return (1vw * $num / $width * 100);
}
@mixin contContainer {
width: 100%;
padding: 0 4rem;
margin: 0 auto;
@media #{$tb}{
padding: 0 6%;
}
@media #{$sp}{
padding: 0 pxtovw(40);
}
}
@mixin contHeader {
}
@mixin contTxt {
font-size: 1.8rem;
line-height: 3.4rem;
color: #111111;
letter-spacing: 0.04em;
font-weight: 500;
//font-feature-settings: "palt";
em,strong {
color: #ff1a02;
}
@media #{$tb}{
}
@media #{$sp}{
font-size: pxtovw(28);
line-height: pxtovw(50);
}
}
@mixin contHeadTxt {
font-size: 1.8rem;
line-height: 3.8rem;
color: #111111;
letter-spacing: 0.04em;
font-weight: 500;
//font-feature-settings: "palt";
em,strong {
color: #ff1a02;
}
@media #{$tb}{
}
@media #{$sp}{
font-size: pxtovw(28);
line-height: pxtovw(50);
}
}
@mixin fitImg {
display: block;
margin-left: auto;
margin-right: auto;
-o-object-fit: cover;
object-fit: cover;
@media #{$sp}{
width: 100%;
}
}
@mixin flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@mixin flex-jcC {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@mixin flex-jcSB {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@mixin flex-aiC {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@mixin flex-diCL {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@mixin boxShadow {
-moz-box-shadow: 0 0 10px 1px rgba($color: #535353, $alpha: .2);
-webkit-box-shadow: 0 0 10px 1px rgba($color: #535353, $alpha: .2);
-ms-box-shadow: 0 0 10px 1px rgba($color: #535353, $alpha: .2);
box-shadow: 0 0 10px 1px rgba($color: #535353, $alpha: .2);
}
@mixin filter-boxShadow {
-webkit-filter: drop-shadow(1px 1px 10px rgba($color: #535353, $alpha: .2));
filter: drop-shadow(1px 1px 10px rgba($color: #535353, $alpha: .2));
}
/*
---------------------------------*/
.content {
&-wrap {
max-width: 770px;
margin: auto;
@media #{$sp}{
margin-bottom: -6vw;
}
* {box-sizing: border-box;}
.d-block {
display: none;
@media #{$sp}{
display: block;
}
}
.d-md-block {
display: block;
@media #{$sp}{
display: none;
}
}
}
&-head {
padding-bottom: 3rem;
@media #{$sp}{
padding-bottom: 7vw;
}
&__ttl {
margin-bottom: 4rem;
aspect-ratio: 770/400;
img {
}
@media #{$sp}{
margin-bottom: 3vw;
}
}
&__container {
@include contContainer();
}
&__txt {
@include contHeadTxt();
margin-bottom: 3rem;
strong,em {
color: #db1500;;
}
@media #{$sp}{
margin-bottom: 5vw;
}
}
&__img {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 2rem;
@media #{$sp}{
margin-bottom: 3vw;
gap: .5rem;
}
}
}
&-cont {
padding-bottom: 6rem;
&.cont01 {
padding-bottom: 8rem;
background: url(../images/content-page/content-cont_bg01.jpg)no-repeat center 20rem;
background-size:cover;
position: relative;
z-index: 1;
.content-cont__item__subttl {
background-color: #44acdc;
}
@media #{$sp}{
padding-bottom: 18vw;
background-position-y: 10vw;
.content-cont__item__subttl {
img {
width: 60vw;
margin: auto;
}
}
}
}
&.cont02 {
margin-top: -3rem;
position: relative;
z-index: 3;
.content-cont__item__subttl {
background-color: #d0e7ff;
}
@media #{$sp}{
margin-top: -3vw;
.content-cont__item__subttl {
img {
width: 60vw;
margin: auto;
}
}
}
}
&.cont03 {
padding-top: 6rem;
padding-bottom: 2rem;
background: #edf4ff;
@media #{$sp}{
padding-top: 8vw;
padding-bottom: 5vw;
}
}
&__container {
@include contContainer();
}
&__ttl {
margin-bottom: 2.5rem;
@media #{$sp}{
margin-bottom: 5vw;
}
}
&__txt {
@include contTxt();
margin-bottom: 2rem;
@media #{$sp}{
margin-bottom: 5vw;
}
}
&__img {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
margin-bottom: 3rem;
@media #{$sp}{
margin-bottom: 3vw;
}
}
&__list {
@include flex();
@include flex-jcSB();
margin-top: 4rem;
@media #{$sp}{
margin-top: 5vw;
}
}
&__item {
width: 48%;
max-width: 330px;
margin-bottom: 2.8rem;
border-radius: 2rem;
overflow: hidden;
background-color: #fff;
@include boxShadow();
&__subttl {
padding: 1.6rem 0;
text-align: center;
}
&__txtarea {
padding: 2rem 2.5rem 2.8rem;
@media #{$sp}{
padding: 4vw;
}
}
&__txt {
margin-bottom: 0;
}
&__thum {
}
@media #{$sp}{
width: 100%;
max-width: 100%;
margin-bottom: 5vw;
border-radius: 1rem;
&__subttl {
padding: 4vw 0;
}
&__txt {
}
&__thum {
img {
width: 100%;
max-width: inherit;
}
}
}
}
&__box {
padding: 1.2rem 1.2rem 1.2rem 4rem;
border-radius: 1rem;
overflow: hidden;
.content-cont__txt {
margin: 0;
}
&.box01 {
background-color: #fff;
border: 2px solid #44acdc;
}
&.box02 {
background-color: #d0e7ff;
}
&.box03 {
margin-bottom: 3rem;
padding: 1.9rem 3rem;
border-radius: 1rem;
background-color: #fff;
border: 2px solid #004fa5;
border-radius: 2rem;
}
@media #{$sp}{
padding: 3vw!important;
&.box03 {
margin-bottom: 5vw;
border-radius: 1rem;
}
}
}
&__note {
margin-top: 3rem;
color: #454545;
@media #{$sp}{
}
}
}
&-banner {
padding-top: 6rem;
padding-bottom: 9.5rem;
margin-top: -2rem;
background: url(../images/content-page/content-cont_banner_bg.png)no-repeat top center;
background-size: cover;
position: relative;
z-index: 2;
@media #{$sp}{
padding-top: 9vw;
padding-bottom: 17vw;
margin-top: -3vw;
}
&__container {
@include contContainer();
position: relative;
@media #{$sp}{
}
}
&__ttl {
position: relative;
z-index: 3;
top: -15px;
@media #{$sp}{
top: -2vw;
}
}
&__fukidashi {
position :absolute;
top: 13.4rem;
right: 4rem;
z-index: 5;
@media #{$sp}{
width: 46vw;
top: 18vw;
right: 3vw;
}
@media (max-width:480px) {
top: 20vw;
}
}
&__item {
display: block;
position: relative;
z-index: 4;
&.item-tel {
margin-top: -1.4rem;
margin-bottom: 2.8rem;
}
@media #{$sp}{
&.item-tel {
margin-top: -2vw;
margin-bottom: 2vw;
}
}
}
}
&-foot {
padding-top: 14rem;
padding-bottom: 8rem;
background: url(../images/content-page/content-foot_bg.png)no-repeat top center;
background-size:cover;
@media (max-width:1024px) and (min-width:768px) {
margin-bottom: -5vw;
}
@media #{$sp}{
padding-top: 33vw;
padding-bottom: 16vw;
}
&__container {
@include contContainer();
}
&__box {
border-radius: 2rem;
background-color: rgba($color: #fff, $alpha: .9);
position: relative;
@media #{$sp}{
}
}
&__ttl {
position: relative;
top: -10rem;
left: -1rem;
@media (min-width:1025px) {
margin-left: -6px;
}
@media #{$sp}{
top: -21vw;
left: -3vw;
}
}
&__txt {
@include contTxt();
margin-top: -9.5rem;
padding: 0 3rem 3rem;
@media #{$sp}{
margin-top: -23vw;
padding: 4vw 6vw 6vw;
}
}
}
}