gaiheki-campaign.scss
/* cd_header */
#cd_wrap {
width: 100%;
background-color: #fff;
height: 60px;
margin: 3% 0;
&.is-fixed {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%);
width: 100%;
margin: 0;
padding: 1%;
background: #fff;
z-index: 4;
height: auto;
@media screen and(max-width:767px) {
top: 50px;
}
}
}
.cd_txt {
width: 100%;
max-width: 980px;
margin: 0 auto;
font-size: 36px;
clear: both;
display: block;
text-align: center;
position: static;
line-height: normal;
}
.cd_txt #CDT {
font-size: 48px;
color: #c00;
}
#Page,
#LM2 {
max-width: 100%;
}
#RCrumb1 {
max-width: 980px;
margin: 0 auto 5px;
}
.anchor {
padding-top: 72px;
margin-top: -72px;
}
#tc_gaiheki_lp_wrap {
text-align: center;
}
#tc_gaiheki_lp_wrap img {
width: auto !important;
max-width: 100%;
}
#tc_gaiheki_lp_wrap p.tc_txt {
width: 100%;
max-width: 980px;
margin: 0 auto;
padding: 20px;
font-size: 16px;
line-height: 1.6em;
box-sizing: border-box;
text-align: left;
}
#tc_gaiheki_lp_wrap p.tc_txt>img {
margin: 0 0 10px 20px;
float: right;
}
#tc_gaiheki_lp_wrap #bg_gaiheki_lp_h3 {
height: 525px;
background: transparent url("../images/gaiheki-campaign/gaiheki_11_pc.jpg") no-repeat scroll 50% 0px;
text-indent: -9999px;
}
@media screen and (max-width:1024px) {
.lp_top_cd .hd-inr {
height: 60px;
}
.cd_txt {
padding-top: 0;
font-size: 26px;
}
.cd_txt #CDT {
font-size: 35px;
}
.anchor {
padding-top: 60px;
margin-top: -60px;
}
#tc_gaiheki_lp_wrap p.tc_txt {
padding: 2%;
}
#tc_gaiheki_lp_wrap p.tc_txt>img {
max-width: 50%;
margin: 0 0 2% 2%;
}
#tc_gaiheki_lp_wrap #bg_gaiheki_lp_h3 {
height: 0;
padding-top: 49%;
background-size: 180% auto;
}
}
@media screen and (max-width:640px) {
.cd_txt {
font-size: 14px;
}
.cd_txt #CDT {
font-size: 16px;
}
#tc_gaiheki_lp_wrap p.tc_txt {
font-size: 14px;
}
#tc_gaiheki_lp_wrap #bg_gaiheki_lp_h3 {
padding-top: 47%;
background-image: url("../images/gaiheki-campaign/gaiheki_11_sp.jpg");
background-size: 100% auto;
}
}
.page-id-9995 {
.page-ttl.container {
display: none;
}
.header__layout {
@media screen and (max-width:640px) {
background: #fff;
}
}
}
.gaiheki-campaign {
&-plan {
@media screen and (max-width:1024px) {
padding: 0 2%;
}
@media screen and (max-width:767px) {
padding: 4% 4% 0;
}
&__list {
margin-bottom: 80px;
@media screen and (max-width:1024px) {
margin-bottom: 8%;
}
@media screen and (max-width:767px) {
margin-bottom: 10%;
}
&__item {
&:not(:last-of-type) {
margin-bottom: 40px;
@media screen and (max-width:1024px) {
margin-bottom: 4%;
}
@media screen and (max-width:767px) {
margin-bottom: 6%;
}
}
}
}
}
&-list {
@media screen and (max-width:1024px) {
padding: 0 2%;
}
@media screen and (max-width:767px) {
padding: 0 4%;
}
}
&-menu {
@media screen and (max-width:1024px) {
padding: 0 2%;
}
@media screen and (max-width:767px) {
padding: 0 4%;
}
figure {
@media screen and (max-width:767px) {
overflow-x: scroll;
z-index: 1;
position: relative;
margin-bottom: 6%;
}
img {
@media screen and (max-width:767px) {
min-width: 580px;
width: 100%;
margin-bottom: 4%;
}
}
&::-webkit-scrollbar {
width: 10px;
height: 15px;
}
&::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 15px;
}
&::-webkit-scrollbar-thumb {
background-color: #031f4d;
border-radius: 15px;
}
}
}
&-case {
margin-top: 60px;
margin-bottom: 80px;
@media screen and (max-width:1024px) {
margin-top: 6%;
margin-bottom: 8%;
padding: 0 2%;
}
@media screen and (max-width:767px) {
margin-top: 8%;
margin-bottom: 10%;
padding: 0 4%;
}
&__title {
margin-bottom: 20px;
@media screen and (max-width:1024px) {
margin-bottom: 2%;
}
@media screen and (max-width:767px) {
margin-bottom: 4%;
}
}
&__text {
margin-bottom: 40px;
@media screen and (max-width:1024px) {
margin-bottom: 4%;
}
@media screen and (max-width:767px) {
margin-bottom: 6%;
}
}
&__list {
margin-bottom: 40px;
@media screen and (max-width:1024px) {
margin-bottom: 4%;
}
@media screen and (max-width:767px) {
margin-bottom: 6%;
}
&__item {
&:not(:last-of-type) {
margin-bottom: 20px;
@media screen and (max-width:1024px) {
margin-bottom: 2%;
}
@media screen and (max-width:767px) {
margin-bottom: 4%;
}
}
}
}
&__sub-title {
margin-bottom: 20px;
@media screen and (max-width:1024px) {
margin-bottom: 2%;
}
@media screen and (max-width:767px) {
margin-bottom: 4%;
}
}
}
}