toilet-campaign.scss
.cdt_wrapper * { font-family: 'Noto Sans JP', sans-serif;}
.cdt_wrapper {
height: 60px;
margin: 50px 0 10px;
@media (max-width: 1024px){
height: 5vw;
margin: 5% 0 1%;
}
@media (max-width: 767px){
height: 12vw;
margin: 5% 0 1%;
min-height: 50px;
}
}
.cdt_wrapper .cdt {
text-align: center;
}
.cdt_wrapper .cdt_txt {
display: inline-block;
font-size: 2.5rem;
margin-bottom: 1%;
}
@media screen and (max-width: 768px) {
.cdt_wrapper .cdt_txt {
font-size: 1.6rem;
}
}
.cdt_wrapper .cdt_date {
display: inline-block;
font-size: 4rem;
font-weight: bold;
color: #ff0201;
}
@media screen and (max-width: 768px) {
.cdt_wrapper .cdt_date {
font-size: 2.5rem;
}
}
.cdt_wrapper .cdt.is-fixed {
position: fixed;
top: 85px;
left: 50%;
transform: translateX(-50%);
width: 100%;
margin: 0;
padding: 1%;
background: #fff;
z-index: 9;
}
.cdt_wrapper .cdt.is-fixed {
@media (max-width: 1024px) {
top: 65px;
}
@media (max-width: 767px) {
top: 50px;
z-index: 11;
}
}
.cta-floating {
display: none !important;
}
$tb: "(max-width: 1024px)";
$sp: "(max-width: 767px)";
$tb-up: "(min-width: 1025px)";
$viewport: 750;
@function pxtovw($num, $width: $viewport) {
@return (1vw * $num / $width * 100);
}
@mixin contContainer {
max-width: 1020px;
width: 100%;
margin: 0 auto;
padding: 0 4rem;
@media #{$tb} {
padding: 0 6%;
}
@media #{$sp} {
padding: 0 pxtovw(40);
}
}
@mixin contHeader {}
@mixin contTxt {
font-size: 2rem;
line-height: 4rem;
color: #111111;
letter-spacing: 0.06em;
font-weight: 500;
//font-feature-settings: "palt";
em,
strong {
color: #db1500;
}
@media #{$tb} {
font-size: 1.8vw;
line-height: 3.3vw;
}
@media #{$sp} {
font-size: pxtovw(28);
line-height: pxtovw(50);
}
}
@mixin contTxtSmall {
font-size: 1.6rem;
line-height: 3.2rem;
letter-spacing: 0.08em;
font-weight: 500;
//font-feature-settings: "palt";
em,
strong {
color: #db1500;
}
@media #{$tb} {
font-size: 1.6vw;
line-height: 3vw;
}
@media #{$sp} {
font-size: pxtovw(20);
line-height: pxtovw(32);
}
}
@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-aiEnd {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
@mixin flex-aiStart {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@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));
}
@mixin txtShadow {
text-shadow: white 2px 0px 2px, white -2px 0px 2px,
white 0px -2px 2px, white -2px 0px 2px,
white 2px 2px 2px, white -2px 2px 2px,
white 2px -2px 2px, white -2px -2px 2px,
white 1px 2px 2px, white -1px 2px 2px,
white 1px -2px 2px, white -1px -2px 2px,
white 2px 1px 2px, white -2px 1px 2px,
white 2px -1px 2px, white -2px -1px 2px,
white 1px 1px 2px, white -1px 1px 2px,
white 1px -1px 2px, white -1px -1px 2px;
}
@mixin txtShadowSmall {
text-shadow: 1px 1px 0 #fff,
-1px 1px 0 #fff,
1px -1px 0 #fff,
-1px -1px 0 #fff;
}
/*
---------------------------------*/
.package {
&-wrap {
max-width: 1920px;
margin: auto;
overflow: hidden;
* {
box-sizing: border-box;
}
.d-block {
display: none;
@media #{$sp} {
display: block;
}
}
.d-md-block {
display: block;
@media #{$sp} {
display: none;
}
}
}
&-fv {
position: relative;
@media #{$sp} {}
&__ttl {
img {
@include fitImg;
height: 800px;
@media (max-width:1200px) {
height: 64.8vw;
}
@media #{$tb} {
height: 48vw;
}
@media #{$sp} {
height: auto;
}
}
}
}
//-fv
&-btn {
margin-top: -3rem;
padding-top: 6rem;
padding-bottom: 12rem;
background: url(../images/package/package-btn_bg_pc.png) top center no-repeat;
position: relative;
z-index: 2;
&.btn02 {
padding-bottom: 17rem;
z-index: 5;
}
&.btn03 {
padding-bottom: 10rem;
z-index: 6;
}
@media #{$tb} {
margin-top: -2.7vw;
padding-top: 5vw;
padding-bottom: 9vw;
&.btn02 {
padding-bottom: 12vw;
}
&.btn03 {
padding-bottom: 8vw;
}
}
@media #{$sp} {
margin-top: -3vw;
padding-top: 8vw;
padding-bottom: 18vw;
background: url(../images/package/package-btn_bg_sp.png) top center no-repeat;
background-size: cover;
z-index: 2;
&.btn02 {
padding-bottom: 23vw;
}
&.btn03 {
padding-bottom: 15vw;
z-index: 6;
}
}
&__container {
@include contContainer();
max-width: 1064px;
padding: 0;
@media #{$tb} {
padding: 0 6%;
padding: 0 2rem;
}
@media #{$sp} {
padding: 0;
}
}
&__ttl {
margin-left: 2rem;
margin-bottom: 1rem;
text-align: center;
@media #{$sp} {
padding-left: pxtovw(40);
margin-bottom: 4vw;
}
}
&__list {
@include flex();
@include flex-jcSB();
@media #{$tb} {
@include flex-aiC();
}
}
&__item {
display: block;
position: relative;
z-index: 3;
&:last-child {
z-index: 2;
}
@media #{$tb} {
width: 53.7%;
&:last-child {
width: 44%;
}
}
@media #{$sp} {
width: 100%;
&:last-child {
width: 100%;
margin-top: 3vw;
}
}
}
&__subttl {
position: absolute;
top: -2.2rem;
right: -2.5rem;
@media #{$tb} {
top: -2.5vw;
right: -3vw;
width: 31vw;
}
@media #{$sp} {}
}
}
&-worry {
padding-bottom: 14.5rem;
padding-top: 5rem;
margin-top: -3rem;
background: url(../images/package/package-worry_bg_pc.png) top center;
position: relative;
z-index: 3;
@media #{$tb} {
padding-bottom: 16vw;
padding-top: 4vw;
margin-top: -4vw;
}
@media #{$sp} {
padding-top: 10vw;
margin-top: -6vw;
padding-bottom: 12vw;
background: url(../images/package/package-worry_bg_sp.png) top center;
background-size: contain;
}
&__header {
@include flex();
@include flex-jcC();
padding: 2.8rem 0 4rem;
position: relative;
@media #{$tb} {
padding: 3vw 0;
}
@media #{$sp} {
padding: 0 0 6vw 0;
img {
width: pxtovw(636);
}
}
}
&__container {
@include contContainer();
@media #{$tb-up} {
padding: 0 2rem;
}
@media #{$sp} {
padding-left: pxtovw(20);
padding-right: 0;
}
}
&__item {
@media #{$tb} {}
@media #{$sp} {}
}
&__pic {
position: relative;
z-index: 1;
@media #{$tb} {
width: 13.7vw;
}
@media #{$sp} {
width: pxtovw(200);
}
}
&__txtarea {
@include flex();
@include flex-diCL();
@include flex-aiC();
@include flex-jcC();
width: 320px;
height: 140px;
//margin-left: -1rem;
margin-top: 4.7rem;
background-color: #fff;
border-radius: 2rem;
@include boxShadow();
position: relative;
z-index: 2;
&:before {
content: "";
position: absolute;
top: 27px;
left: -12px;
margin: auto;
width: 26px;
height: 26px;
transform: rotate(-45deg);
background-color: #fff;
@include boxShadow();
z-index: 1;
}
&:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 2rem;
z-index: 2;
}
@media #{$tb} {
width: 28.8vw;
height: 13.5vw;
margin-left: -0.8vw;
margin-top: 4vw;
&:before {
width: 2vw;
height: 2vw;
left: -1vw;
}
}
@media #{$sp} {
width: pxtovw(468);
height: pxtovw(204);
margin-left: 0;
margin-top: 0;
border-radius: 1rem;
&:before {
content: "";
top: 50%;
left: -1.5vw;
width: pxtovw(40);
height: pxtovw(40);
transform: translateY(-50%) rotate(-45deg);
}
}
}
&__txt {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
color: #434343;
@include contTxt();
font-feature-settings: inherit;
font-weight: bold;
letter-spacing: 0.1em;
position: relative;
z-index: 3;
em,
strong {
color: #db1500;
}
@media #{$tb} {}
@media #{$sp} {}
}
}
&-recomme {
padding-bottom: 15rem;
background: #004fa6;
position: relative;
z-index: 4;
@media #{$tb} {
padding-bottom: 8vw;
}
@media #{$sp} {
padding-bottom: 17vw;
}
&__header {
@include contHeader();
top: -7rem;
margin-bottom: 2.5rem;
position: relative;
z-index: 2;
img {
@include fitImg();
height: 482px;
}
@media #{$tb} {
top: -4vw;
margin-bottom: 0;
img {
height: 45vw;
}
}
@media #{$sp} {
top: -7vw;
img {
height: auto;
}
}
}
&__container {
@include contContainer();
margin-top: -25rem;
position: relative;
z-index: 3;
@media #{$tb} {
margin-top: -18vw;
}
@media #{$sp} {
margin-top: -34vw;
}
}
&__box {
@include flex();
@include flex-jcSB();
gap: 0 3rem;
padding: 4rem 3rem 4rem 6rem;
//border-radius: 2rem;
//background-color: #fff;
position: relative;
&__ttl {
margin-bottom: 2rem;
position: relative;
z-index: 2;
span {
display: block;
margin-top: 0.5rem;
font-size: 3rem;
line-height: 4.3rem;
letter-spacing: -0.03em;
font-weight: bold;
@include txtShadow();
}
}
&__item {
width: 51%;
position: relative;
z-index: 2;
&.item01 {
margin-bottom: 28rem;
width: 100%;
}
&.item02 {
width: 45%;
}
}
&__subttl {}
&__txt {
font-size: 1.8rem;
line-height: 3.6rem;
letter-spacing: 0.08em;
font-weight: 500;
@include txtShadowSmall();
}
&__num {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
&__img {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
margin-top: 1rem;
figure {
position: relative;
}
figcaption {
font-size: 1.2rem;
letter-spacing: 0.08em;
line-height: 1.9rem;
font-weight: 500;
position: absolute;
bottom: 9px;
left: 7px;
@include txtShadowSmall();
}
}
@media #{$tb} {
gap: 0 1vw;
padding: 3vw;
position: relative;
&__ttl {
margin-bottom: 3vw;
span {
margin-top: 1vw;
font-size: 3vw;
line-height: 4vw;
}
img {
width: 20vw;
}
}
&__item {
width: calc(50% - 2vw);
&.item01 {
margin-bottom: 25vw;
}
}
&__subttl {
width: pxtovw(100);
margin-bottom: 1vw;
}
&__txt {
font-size: 1.8vw;
line-height: 2.8vw;
}
&__img {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
margin-top: pxtovw(10);
figcaption {
font-size: 1.2vw;
letter-spacing: 0.08em;
line-height: 1.7vw;
bottom: 1vw;
left: 0.5vw
}
}
}
@media #{$sp} {
@include flex();
gap: 0;
padding: 4vw pxtovw(20);
&__ttl {
margin-bottom: 3vw;
span {
display: block;
margin-top: 0;
font-size: pxtovw(28);
line-height: pxtovw(46);
}
img {
width: pxtovw(217);
}
}
&__item {
width: 100% !important;
position: relative;
z-index: 2;
margin-bottom: 6vw;
&.item01 {
margin-bottom: 42vw;
}
&.item02 {}
&.item03 {}
}
&__subttl {
width: pxtovw(130);
}
&__txt {
font-size: pxtovw(22);
line-height: pxtovw(36);
}
&__img {
gap: 1vw;
margin-top: 2vw;
figure {
position: relative;
}
figcaption {
font-size: pxtovw(20);
line-height: pxtovw(28);
bottom: 2vw;
left: 1vw;
}
}
}
}
}
&-lineup {
padding-bottom: 14rem;
background: url(../images/package/package-lineup_bg_pc.png) top center;
position: relative;
z-index: 5;
@media #{$tb} {
padding-bottom: 8vw;
}
@media #{$sp} {
padding-bottom: 16vw;
background: url(../images/package/package-lineup_bg_sp.png) top center;
background-size: cover;
}
&__header {
@include contHeader();
top: -13rem;
position: relative;
z-index: 2;
img {
@include fitImg();
height: 361px;
}
@media #{$tb} {
top: -8vw;
img {
height: 38vw;
}
}
@media #{$sp} {
top: -14vw;
img {
height: auto;
}
}
}
&__container {
@include contContainer();
margin-top: -5rem;
position: relative;
z-index: 3;
@media #{$tb} {}
@media #{$sp} {}
}
&__note {
text-align: right;
margin-bottom: 1rem;
color: #34373a;
font-size: 1.5rem;
@media #{$tb} {
margin-bottom: 1vw;
font-size: 1.4vw;
}
@media #{$sp} {
margin-bottom: 3vw;
font-size: pxtovw(20);
line-height: pxtovw(30);
color: #34373a;
}
}
&__box {
@include flex();
min-height: 474px;
padding: 3rem 3.5rem;
margin-bottom: 3.8rem;
border-radius: 1rem;
border: 2px solid #004fa5;
background-color: #fff;
position: relative;
overflow: hidden;
&__ttl {
@include flex();
@include flex-aiStart();
min-height: 117px;
position: relative;
z-index: 2;
span {
margin-left: 0.8rem;
font-size: 2.6rem;
line-height: 3.4rem;
letter-spacing: -0.03em;
font-weight: 900;
@include txtShadow();
}
}
&__item {
width: calc(50% - 3rem);
position: relative;
z-index: 2;
&.item01 {
margin-bottom: 2rem;
width: 100%;
}
&.item03 {
position: absolute;
top: 1rem;
right: 2rem;
}
}
&__subttl {}
&__txt {
font-size: 1.8rem;
line-height: 3.6rem;
letter-spacing: 0.08em;
font-weight: 500;
@include txtShadowSmall();
}
&__num {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
&__img {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
margin-top: 1rem;
figure {
position: relative;
}
figcaption {
font-size: 1.2rem;
letter-spacing: 0.08em;
line-height: 1.9rem;
font-weight: 500;
position: absolute;
bottom: 9px;
left: 7px;
}
}
@media #{$tb} {
min-height: 48vw;
padding: 2vw;
margin-bottom: 4vw;
&__ttl {
min-height: 14vw;
span {
margin-left: 1vw;
font-size: 2.6vw;
line-height: 2.8rem;
}
img {
width: 14vw;
}
}
&__item {
width: calc(50% - 3rvw);
&.item01 {
margin-bottom: 0;
}
&.item03 {
top: 1vw;
right: 2vw;
}
}
&__subttl {
width: pxtovw(100);
margin-bottom: .5vw;
}
&__txt {
font-size: 1.5vw;
line-height: 2.5vw;
}
&__num {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
&__img {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
margin-top: 1rem;
figure {
position: relative;
}
figcaption {
font-size: 1.2rem;
letter-spacing: 0.08em;
line-height: 1.9rem;
font-weight: 500;
position: absolute;
bottom: 9px;
left: 7px;
}
}
}
@media #{$sp} {
@include flex();
min-height: inherit;
padding: 4vw pxtovw(20);
margin-bottom: 5vw;
border: 1px solid #004fa5;
&.box01 {
.package-lineup__box__ttl {
min-height: 24vw;
}
}
&.box02 {
.package-lineup__box__ttl {
min-height: 20vw;
}
}
&.box03 {
.package-lineup__box__ttl {
min-height: 29vw;
}
}
&__ttl {
min-height: 24vw;
span {
margin-left: 2vw;
font-size: 4vw;
line-height: pxtovw(36);
}
img {
width: pxtovw(157);
}
}
&__item {
width: 100%;
margin-bottom: 3vw;
&.item01 {
margin-bottom: 23vw;
width: 100%;
}
&.item03 {
position: static;
}
}
&__subttl {
&.top-up {
transform: translateY(-4vw);
}
img {
width: pxtovw(130);
}
}
&__txt {
font-size: pxtovw(22);
line-height: pxtovw(38);
&.top-up {
transform: translateY(-4vw);
}
}
&__num {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
&__img {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
margin-top: 1rem;
figure {
position: relative;
}
figcaption {
font-size: 1.2rem;
letter-spacing: 0.08em;
line-height: 1.9rem;
font-weight: 500;
position: absolute;
bottom: 9px;
left: 7px;
}
}
}
}
&__banner {
margin: auto;
margin-top: 6.5rem;
max-width: 1024px;
text-align: center;
a {
display: block;
}
@media #{$tb} {
margin-top: 3vw;
padding: 0 6%;
}
@media #{$sp} {
margin-top: 9vw;
padding: 0 pxtovw(40);
}
}
}
&-choice {
padding-bottom: 7rem;
background: url(../images/package/package-choice_bg_pc.png) center 55rem no-repeat;
position: relative;
z-index: 6;
@media #{$tb} {
background-position-y: 48vw;
padding-bottom: 5vw;
}
@media #{$sp} {
margin-top: -5vw;
padding-bottom: 1vw;
background: url(../images/package/package-choice_bg_sp.png) center top no-repeat;
background-size: cover;
background-position-y: 32vw;
}
&__header {
@include contHeader();
margin-bottom: 6rem;
img {
@include fitImg();
height: 660px;
}
@media #{$tb} {
margin-bottom: 4vw;
img {
height: 58vw;
}
}
@media #{$sp} {
margin-bottom: 8vw;
img {
height: auto;
}
}
}
&__container {
max-width: 1024px;
margin: auto;
position: relative;
@media #{$tb} {
padding: 0 4%;
}
@media #{$sp} {
padding: 0 pxtovw(40);
}
}
&__list {
@media #{$tb} {}
@media #{$sp} {}
}
&__item {
position: relative;
margin-bottom: 6rem;
.float-space {
display: none;
}
&.item01 {
.package-choice__container {
position: relative;
&:after {
content: '';
position: absolute;
background: url(../images/package/package-choice_img03_pc.png) no-repeat;
background-size: contain;
width: 121px;
height: 244px;
top: 83%;
right: -1%;
z-index: 1;
@media #{$tb} {
width: 13%;
height: 32%;
right: -2%;
}
@media #{$sp} {
background: url(../images/package/package-choice_img03_sp.png) no-repeat;
width: 13%;
height: 12%;
background-size: contain;
top: 133vw;
right: 2%;
}
}
}
}
&.item02 {
margin-bottom: 8rem;
}
&.item03 {
.package-choice__ttl {
margin-left: -25px;
}
.package-choice__container {
//max-width: 1056px;
//left: -9px;
//padding-left: 0;
}
}
@media #{$tb} {
margin-bottom: 2vw;
&.item02 {
margin-bottom: 5vw;
}
&.item03 {
.package-choice__ttl {
margin-left: -2.3vw;
}
.package-choice__container {
//left: 1vw;
//padding-right: 5%;
}
}
}
@media #{$sp} {
margin-bottom: 9vw;
.float-space {
display: block;
float: right;
height: 15vw;
}
&.item02 {
margin-bottom: 11vw;
&::before {
content: "";
background-image: url(../images/package/add01.png);
background-repeat: no-repeat;
background-size: contain;
width: 13.3vw;
height: 24.9vw;
position: absolute;
right: 2vw;
bottom: -8vw;
z-index: 1;
}
}
&.item03 {
.package-choice__ttl {
margin-left: pxtovw(-40);
}
.package-choice__container {
//left: 0;
//padding-right: pxtovw(40);
}
}
}
}
&__ttl {
@media #{$tb} {}
@media #{$sp} {}
}
&__inner {
max-width: 1024px;
width: 100%;
padding: 1.5rem 4rem 1rem 4rem;
margin: -2px auto 0;
background-color: #fff;
border-radius: 0 0 4rem 4rem;
&.inner02 {
//top: 51rem;
}
&.inner03 {
//left: 9px;
//position: relative;
padding: 1.5rem 4rem 2rem 4rem;
}
@media #{$tb} {
padding: 2.5vw 6% 1vw;
margin-top: -1vw;
&.inner02 {}
&.inner03 {
//left: 2.3vw;
padding: 3vw 6% 1vw;
}
}
@media #{$sp} {
padding: 2.5vw 3vw 1vw;
border-radius: 0 0 2rem 2rem;
&.inner02 {}
&.inner03 {
//left: 2.3vw;
padding: 3vw 3vw 1vw;
}
}
}
&__txt {
@include contTxt();
margin-bottom: 4rem;
padding: 0 1rem;
@media #{$tb} {}
@media #{$sp} {
margin-bottom: 7vw;
}
}
&__logo {
float: right;
margin-left: 5rem;
margin-top: 0;
margin-right: 8rem;
@media #{$tb} {
margin-left: 5vw;
margin-top: -2vw;
margin-right: 5vw;
width: 19vw;
}
@media #{$sp} {
width: pxtovw(230);
margin-left: 2vw;
margin-top: 0;
margin-right: 2vw;
clear: both;
}
}
&__img {
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 6;
&.img01 {
top: 8rem;
}
&.img02 {
top: 23rem;
left: 7%;
}
&.img03 {
top: 95rem;
left: 94.5rem;
}
@media #{$tb} {
&.img01 {
top: 3vw;
}
&.img02 {
top: 21vw;
left: 5vw;
}
&.img03 {
top: 80vw;
left: 85vw;
width: 10%;
}
}
@media #{$sp} {
&.img01 {
top: 28vw;
}
&.img02 {
top: 42vw;
left: 7vw;
width: 93vw;
}
&.img03 {
top: 220vw;
left: inherit;
right: 2vw;
width: 15vw;
}
}
}
&__box {
margin-top: 4.5rem;
&__inner {
padding: 3rem 4rem 5rem;
margin-bottom: 4rem;
border: 3px solid #ffd800;
background-color: #fffcec;
border-radius: 1rem;
overflow: hidden;
}
&__ttl {
margin-bottom: 2rem;
text-align: center
}
&__txt {
@include contTxt();
margin-bottom: 1.5rem;
}
&__img {
@include flex();
@include flex-jcC();
margin-bottom: 1.5rem;
}
&__link {
@include flex();
@include flex-jcC();
//margin-top: -3rem;
a {
width: 100%;
max-width: 460px;
display: block;
font-size: 1.8rem;
line-height: 6rem;
letter-spacing: 0.12em;
color: #fff;
background-color: #004fa6;
box-shadow: 0 4px 0 3px #83b0f2;
font-weight: bold;
text-align: center;
border-radius: 3rem;
position: relative;
z-index: 5;
&:after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 2rem;
width: 25px;
height: 22px;
background: url(../images/reason/reason-choice__box_icon_pc.png) center no-repeat;
background-size: contain;
@media #{$sp} {
/* right: 5vw; */
width: 3.6vw;
height: 3.6vw;
background: url(../images/reason/reason-choice__box_icon_sp.png) center no-repeat;
background-size: contain;
}
}
}
}
@media #{$tb} {
margin-bottom: 6vw;
margin-top: 0;
&__inner {
padding: 2vw 3vw 3vw;
}
&__ttl {
width: 70vw;
margin: 0 auto 2vw;
}
&__txt {
margin-bottom: 2vw;
}
&__img {
width: 75vw;
margin: 0 auto 2vw;
}
&__link {
margin-top: 0;
a {
line-height: 5rem;
box-shadow: 0 2px 0 2px #83b0f2;
}
}
}
@media (max-width:1024px) and (min-width:768px) {
&__img {
display: block;
margin-left: auto;
margin-right: auto;
img {
display: block;
margin-left: auto;
margin-right: auto;
}
}
}
@media #{$sp} {
margin-bottom: 0;
margin-top: 13vw;
&__inner {
padding: 4vw pxtovw(20) 5vw;
margin-top: 0;
margin-bottom: 6vw;
border-radius: 1rem;
border-width: 1px;
overflow: hidden;
}
&__ttl {
margin-bottom: 3vw;
}
&__img {
width: 100%;
margin-bottom: 2vw;
}
&__txt {
width: 100%;
margin-bottom: 4vw;
font-size: pxtovw(26);
line-height: pxtovw(50);
font-feature-settings: inherit;
}
&__link {
margin-top: 0;
margin-bottom: 1vw;
a {
margin: auto;
max-width: pxtovw(563);
font-size: pxtovw(26);
line-height: pxtovw(80);
letter-spacing: 0.12em;
border-radius: pxtovw(40);
box-shadow: 0 2px 0 1px #83b0f2;
&:after {
font-size: 4vw;
right: 3vw;
}
}
}
}
}
}
&-works {
padding-top: 1.5rem;
padding-bottom: 6rem;
background: #aecfff;
position: relative;
z-index: 5;
@media #{$tb} {
padding-bottom: 6vw;
}
@media #{$sp} {
padding-top: 3vw;
padding-bottom: 22vw;
}
&__header {
@include contHeader();
margin-bottom: 8rem;
position: relative;
z-index: 2;
img {
@include fitImg();
height: 235px;
}
@media #{$tb} {
margin-bottom: 5vw;
img {
height: 23vw;
}
}
@media #{$sp} {
margin-bottom: 6vw;
img {
height: auto;
}
}
}
&__container {
@include contContainer();
padding: 0 2rem;
position: relative;
z-index: 3;
}
&__item {
margin-bottom: 8.3rem;
padding: 3.5rem 2.5rem 5rem 3rem;
background-color: #fff;
border-radius: 1rem;
border: 2px solid #004fa5;
@media #{$tb} {
margin-bottom: 4vw;
padding: 3vw;
&.item01 {
.package-works__top__ttl {
img {
width: 40vw;
}
}
}
&.item02 {
.package-works__top__ttl {
img {
width: 26.1vw;
}
}
}
}
@media #{$sp} {
margin-bottom: 5vw;
padding: pxtovw(20);
border-width: 1px;
&.item01 {
.package-works__top__ttl {
img {
width: pxtovw(493);
}
}
}
&.item02 {
.package-works__top__ttl {
img {
width: pxtovw(324);
}
}
}
}
}
&__top {
@include flex();
@include flex-jcSB();
margin-bottom: 4.2rem;
&__textarea {
width: 490px;
padding-top: 1rem;
}
&__ttl {
margin-bottom: 3rem;
}
&__item {
margin-bottom: 3.3rem;
&:last-child {
margin-bottom: 0;
}
}
&__subttl {
margin-bottom: .3rem;
}
&__txt {
font-size: 1.8rem;
line-height: 3.6rem;
letter-spacing: 0.08em;
font-weight: 500;
p {
@include flex();
}
}
@media #{$tb} {
margin-bottom: 5vw;
&__img {
width: 48%;
}
&__textarea {
width: 50%;
padding-top: 2vw;
}
&__ttl {
margin-bottom: 3vw;
}
&__item {
margin-bottom: 2vw;
}
&__subttl {
margin-bottom: .5vw;
img {
width: pxtovw(150);
}
}
&__txt {
font-size: 1.7vw;
line-height: 2.9vw;
}
}
@media #{$sp} {
margin-bottom: 4vw;
&__img {
width: 100%;
}
&__textarea {
width: 100%;
padding-top: 3vw;
}
&__ttl {
margin-bottom: 5vw;
}
&__item {
margin-bottom: 4vw;
&:last-child {
margin-bottom: 0;
}
}
&__subttl {
margin-bottom: .3rem;
img {
width: pxtovw(200);
}
}
&__txt {
font-size: pxtovw(22);
line-height: pxtovw(42);
}
}
}
&__center {
min-height: 226px;
padding: 2rem;
margin-bottom: 4rem;
@include flex();
@include flex-aiC();
background-color: #dceaff;
overflow: hidden;
position: relative;
&__ttl {
position: absolute;
left: 1rem;
top: -2rem;
}
&__txt {
width: 585px;
margin-left: 28rem;
@include contTxtSmall();
}
@media #{$tb} {
min-height: 21vw;
padding: 2vw;
margin-bottom: 4vw;
&__ttl {
width: 16vw;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&__txt {
width: calc(100% - 17vw);
margin-left: 17vw;
}
}
@media #{$sp} {
min-height: auto;
padding: 0 pxtovw(20) pxtovw(20);
margin-bottom: 1vw;
background: none;
&__ttl {
left: 0;
top: 0;
width: 100%;
transform: translateY(0);
}
&__txt {
width: 100%;
margin-left: 0;
padding-top: 27.5vw;
position: relative;
z-index: 3;
padding-bottom: 3vw;
}
}
}
&__bottom {
@include flex();
@include flex-jcSB();
&__right {
width: 304px;
padding: 1rem 1.6rem 1.6rem;
background-color: #f3f3f3;
.package-works__bottom__ttl {
margin-bottom: 13px;
margin-top: 3px;
}
position: relative;
&::after {
content: "";
position: absolute;
top: 24rem;
right: -2.5rem;
width: 18px;
height: 31px;
background-size: contain;
background: url(../images/package/package-works_top_arr_pc.png)no-repeat;
}
}
&__left {
width: 585px;
padding: 1rem 1.6rem 1.6rem;
@include flex();
@include flex-jcSB();
align-content: flex-start;
background-color: #fff8cf;
.package-works__bottom__item {
width: 48.5%;
}
}
&__ttl {
width: 100%;
margin-bottom: 1rem;
text-align: center;
}
&__img {
margin-bottom: 1rem;
}
&__txt {
@include contTxtSmall();
}
@media #{$tb} {
&__right {
width: 33%;
padding: 2vw;
.package-works__bottom__ttl {
margin-bottom: 2vw;
margin-top: 0;
img {
height: 2.4vw;
}
}
}
&__left {
width: 63%;
padding: 2vw;
.package-works__bottom__item {
width: 48.5%;
}
.package-works__bottom__ttl {
img {
height: 2.4vw;
}
}
}
&__ttl {
margin-bottom: 2vw;
}
&__img {
margin-bottom: 2vw;
}
&__txt {}
}
@media #{$sp} {
@include flex();
@include flex-jcSB();
&__right {
width: 100%;
padding: pxtovw(20);
position: relative;
margin-bottom: 8vw;
&::after {
content: "";
position: absolute;
top: inherit;
bottom: -6vw;
right: 0;
left: 0;
margin: auto;
width: pxtovw(48);
height: pxtovw(28);
background-size: contain;
background: url(../images/package/package-works_top_arr_sp.png)no-repeat;
background-size: contain;
}
.package-works__bottom__ttl {
margin-bottom: 2vw;
margin-top: 0;
img {
width: pxtovw(105);
height: inherit;
}
&.position {
position: absolute;
left: 0vw;
top: 4vw;
}
}
.package-works__bottom__item.flex {
@include flex();
@include flex-aiC();
@include flex-jcSB();
img {
width: pxtovw(227);
}
.package-works__bottom__txt {
width: calc(100% - 32vw);
}
}
}
&__left {
width: 100%;
padding: pxtovw(20);
.package-works__bottom__item {
width: 48.5%;
}
.package-works__bottom__ttl {
img {
width: pxtovw(131);
height: inherit;
}
}
}
&__ttl {
width: 100%;
margin-bottom: 1rem;
text-align: center;
}
&__img {
margin-bottom: 0;
}
&__txt {
padding-top: 1vw;
}
}
}
&__banner {
margin-top: 11.5rem;
text-align: center;
a {
display: block;
}
@media #{$tb} {
margin-top: 6vw;
padding: 0 6%;
}
@media #{$sp} {
margin-top: 9vw;
padding: 0 pxtovw(40);
}
}
}
&-qa {
padding-bottom: 6.5rem;
background: #edf4ff;
position: relative;
z-index: 6;
@media #{$tb} {
padding-bottom: 7vw;
}
@media #{$sp} {
padding-bottom: 8vw;
}
&__header {
@include contHeader();
margin-bottom: 1.5rem;
img {
@include fitImg();
height: 340px;
}
@media #{$tb} {
margin-bottom: 0;
img {
height: 37vw;
}
}
@media #{$sp} {
top: -13vw;
margin-bottom: -7vw;
position: relative;
img {
height: auto;
}
}
}
&__container {
@include contContainer();
}
&__item {
margin-bottom: 3rem;
@media #{$tb} {}
@media #{$sp} {
margin-bottom: 3vw;
}
}
}
&-bottom {
position: relative;
@media #{$sp} {}
&__ttl {
img {
@include fitImg;
height: 705px;
@media #{$tb} {
height: 50vw;
}
@media #{$sp} {
height: auto;
}
}
}
.package-btn__container {
position: absolute;
bottom: 10rem;
left: 0;
right: 0;
@media #{$tb} {
bottom: 4vw;
}
@media #{$sp} {
bottom: 6vw;
}
}
}
&-contactTtl {
margin: auto;
text-align: center;
img {
display: inline-block;
margin: auto;
text-align: center;
}
// @media #{$tb}{
// width: 96.5%;
// }
@media #{$sp} {
width: 96.5%;
margin: 0 0 0 auto;
}
}
}
//top-cta組み込みにおける調節
.package-wrap .section-buttons__contents {
max-width: 980px;
}
.package-wrap .section-buttons__right {
@media (min-width:1025px) {
width: 434px;
}
}
.package-wrap .section-buttons__left {
z-index: 3;
&::before {
opacity: 1 !important;
content: "";
background-image: url(../images//top/add_hukidashi_pc.png);
background-size: contain;
background-repeat: no-repeat;
width: 320px;
height: 44px;
position: absolute;
top: -25px;
right: -55px;
z-index: 4;
@media (max-width: 1024px) {
width: 29vw;
top: -3.4vw;
right: -6vw;
}
@media (max-width: 767px) {
background-image: url(../images//top/add_hukidashi_sp.png);
width: 50.5vw;
height: 7vw;
top: -3.4vw;
right: -5vw;
}
}
@media (min-width:1025px) {
width: 520px;
margin-right: 0;
}
.section-buttons__left__tel {}
}
.section-buttons {
&__anc {
text-align: center;
margin: auto;
@media (max-width: 1024px) {
width: 94%;
}
@media (max-width: 767px) {
width: 88%;
}
a {
display: inline-block;
margin: auto;
text-align: center;
img {
display: block;
margin: auto;
margin-top: 4.4%;
@media (max-width: 767px) {
margin-top: 7%;
}
}
}
}
}
#contact_ttl{
padding-top: 80px;
margin-top: -80px;
@media (max-width: 1024px) {
padding-top: 60px;
margin-top: -60px;
}
@media (max-width: 768px) {
padding-top: 40px;
margin-top: -40px;
}
}
@media (max-width: 1024px) and (min-width:768px) {
.package-btn{
.section-buttons__left{
}
.section-buttons__right{
width: 44%;
}
.package-wrap .section-buttons__left::before{
}
}
}