.modBreadcrumbs {
margin: 0px 0 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: auto;
justify-content: left!important;
}
.modMainSideWrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 120px
}
.modMainArea {
width: calc(100% - 380px)
}
@media screen and (max-width: 834px) {
.modMainArea {
width:100%
}
}
@media screen and (max-width: 834px) {
.modMainArea .modBasicSecTitle {
display:-webkit-box;
display: -ms-flexbox;
display: flex
}
}
.modMainInner {
margin: 40px 0 0;
padding-top: 40px;
border-top: 2px dashed #074663;
}
.modMainInnerList>li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
@media screen and (max-width: 566px) {
.modMainInnerList>li {
-webkit-box-orient:vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
}
.modMainInnerList>li:not(:last-child) {
margin-bottom: 40px
}
.modMainInnerListLink {
text-decoration: none
}
.modMainInnerListLink .dReed {
margin-bottom: 12px;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: rgba(17,17,17,0.7)
}
.modMainInnerListText {
width: calc(100% - 260px);
margin-left: 20px
}
@media screen and (max-width: 767px) {
.modMainInnerListText {
width:calc(100% - 200px)
}
}
@media screen and (max-width: 566px) {
.modMainInnerListText {
width:100%;
margin-left: 0
}
}
.modMainInnerListText .modThemaDetailTime {
margin: 0
}
.modMainInnerListText .modTagList {
margin-bottom: 8px
}
.modMainInnerListTitle {
margin-bottom: 12px;
color: #111111;
font-size: 1.8rem;
font-weight: bold;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
.modMainInnerListImg {
width: 240px
}
@media screen and (max-width: 566px) {
.modMainInnerListImg {
width:100%;
margin-bottom: 12px
}
}
.modMainInnerListImgLink {
position: relative;
display: block;
overflow: hidden;
border-radius: 4px
}
.modMainInnerListImg .dCategory {
position: absolute;
top: 0;
left: 0;
display: inline-block;
padding: 2px 8px;
font-size: 1.4rem;
font-weight: bold;
color: #FFFFFF;
background-color: #074663
}
.modMainInnerTime {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 24px;
opacity: 0.7;
color: #111111;
font-size: 1.8rem;
font-weight: bold
}
.modMainInnerTime:before {
content: "";
display: block;
width: 22px;
height: 22px;
margin-right: 8px;
background-position: center;
background-repeat: no-repeat;
background-size: 19px;
background-image: url(//youjin-g.co.jp/wp-content/themes/garage_main_site/images/iconTimeBlack.svg)
}
@media screen and (max-width: 566px) {
.modMainInnerTime {
margin-bottom:16px;
font-size: 1.4rem
}
.modMainInnerTime:before {
width: 18px;
height: 18px;
margin-right: 4px;
background-size: 15px
}
}
.modMainInnerSec {
margin-bottom: 60px
}
.modMainInnerSecTitleM,h3.wp-block-heading {
margin-bottom: 20px;
color: #0E5572;
font-size: 2.4rem;
font-weight: bold
}
@media screen and (max-width: 566px) {
.modMainInnerSecTitleM,h3.wp-block-heading {
font-size:2rem
}
}
.modMainInnerSecTitleS,h4.wp-block-heading {
margin-bottom: 20px;
color: rgba(17,17,17,0.7);
font-size: 2rem;
font-weight: bold
}
@media screen and (max-width: 566px) {
.modMainInnerSecTitleS,h4.wp-block-heading {
font-size:1.8rem
}
}
.modMainInnerSecImg {
margin-bottom: 60px;
border-radius: 4px;
overflow: hidden
}
.modMainInnerImgSNS {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
@media screen and (max-width: 834px) {
.modMainInnerImgSNS {
-webkit-box-orient:vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
@media screen and (max-width: 834px) {
.modMainInnerImg {
margin-bottom:16px
}
}
.modMainInnerSNS {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 24px
}
@media screen and (max-width: 834px) {
.modMainInnerSNS {
margin-bottom:0;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
}
.modMainInnerSNSText {
margin-right: 16px;
color: #074663;
font-size: 1.6rem;
font-weight: bold
}
.modMainInnerSNSList {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.modMainInnerSNSList>li {
width: 40px
}
.modMainInnerSNSList>li:not(:last-child) {
margin-right: 16px
}
.modShareArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 40px 60px;
background-color: #FFFFFF;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.05);
box-shadow: 0 0 5px rgba(0,0,0,0.05)
}
@media screen and (max-width: 834px) {
.modShareArea {
padding:36px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.modShareText {
color: #074663;
font-size: 2.8rem;
font-weight: bold
}
@media screen and (max-width: 834px) {
.modShareText {
margin-bottom:24px
}
}
@media screen and (max-width: 566px) {
.modShareText {
font-size:2.4rem
}
}
.modShareList {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.modShareList>li {
width: 56px
}
.modShareList>li:not(:last-child) {
margin-right: 24px
}
@media screen and (max-width: 566px) {
.modShareList>li {
width:44px
}
}
.modSideArea {
width: 300px;
margin-left: 40px;
padding-left: 40px;
border-left: 2px dashed #074663;
}
@media screen and (max-width: 834px) {
.modSideArea {
margin:80px auto 0;
padding: 0;
border-left: none
}
}
.modSideArea .modMidSecTitle,.modSideArea h2.wp-block-heading {
font-size: 2rem
}
.modSideArea .modMidSec {
width: 300px;
margin-bottom: 80px
}
.modSideAd {
width: 300px;
margin-bottom: 80px
}
.modSideArticleList>li:not(:last-child) {
margin-bottom: 14px
}
.modSideArticleList.mdRanking {
counter-reset: item
}
.modSideArticleList.mdRanking>li {
position: relative
}
.modSideArticleList.mdRanking>li:after,.modSideArticleList.mdRanking>li:before {
position: absolute;
display: block;
width: 28px;
top: 0;
left: 0
}
.modSideArticleList.mdRanking>li:before {
content: "";
height: 28px;
border-radius: 4px 0 0 0;
background-color: #074663;
z-index: 20
}
.modSideArticleList.mdRanking>li:first-child:before {
background-color: #898400
}
.modSideArticleList.mdRanking>li:nth-child(2):before {
background-color: #8C8C8C
}
.modSideArticleList.mdRanking>li:nth-child(3):before {
background-color: #895200
}
.modSideArticleList.mdRanking>li:after {
counter-increment: item;
content: counter(item);
margin: 3px 0;
text-align: center;
font-size: 1.4rem;
font-weight: bold;
color: #FFFFFF;
z-index: 30
}
.modSideArticleLink {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-decoration: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.modSideArticleLinkText {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
color: #111111;
font-size: 1.4rem;
font-weight: bold
}
.modSideArticleLinkText .dCategory {
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 2px 8px;
color: #FFFFFF;
background-color: #074663
}
.modSideArticleLinkTitle {
font-weight: bold
}
.modSideArticleLinkImg {
border-radius: 4px;
overflow: hidden;
margin-right: 12px;
}
.modBasicSec.dBackNavy,.modBasicSec.dBackRed {
margin: -40px -100px;
padding: 40px 100px 80px;
background-repeat: no-repeat
}
@media screen and (max-width: 834px) {
.modBasicSec.dBackNavy,.modBasicSec.dBackRed {
padding:40px 124px 80px;
background-position: center 80px
}
}
@media screen and (max-width: 566px) {
.modBasicSec.dBackNavy,.modBasicSec.dBackRed {
padding:40px 100px 80px
}
}
.modBasicSec.dBackNavy:last-child,.modBasicSec.dBackRed:last-child {
padding: 40px 100px 40px
}
@media screen and (max-width: 834px) {
.modBasicSec.dBackNavy:last-child,.modBasicSec.dBackRed:last-child {
padding:40px 124px 40px
}
}
@media screen and (max-width: 566px) {
.modBasicSec.dBackNavy:last-child,.modBasicSec.dBackRed:last-child {
padding:40px 100px 40px
}
}
.modBasicSec.dBackNavy {
background-image: url(//youjin-g.co.jp/wp-content/themes/garage_main_site/images/BackNavy.png)
}
.modBasicSec.dBackRed {
background-position: right top;
background-image: url(//youjin-g.co.jp/wp-content/themes/garage_main_site/images/BackRed.png)
}
.modBasicSecTitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
margin-bottom: 40px
}
.modBasicSecTitle.lySP {
display: none
}
@media screen and (max-width: 834px) {
.modBasicSecTitle {
display:none
}
.modBasicSecTitle.lySP,.modBasicSecTitle.mdSPDsply {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
.modBasicSecTitle .dNum {
display: inline-block;
width: 116px;
margin-bottom: 24px
}
.modBasicSecTitle .dNweArticles {
display: inline-block;
width: 180px;
margin-bottom: 20px
}
.modBasicSecTitle .dRedBg {
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 0 8px;
color: #FFFFFF;
font-size: 4.4rem;
font-weight: bold;
background-color: #074663;
line-height: 1.46
}
@media screen and (max-width: 767px) {
.modBasicSecTitle .dRedBg {
color: #EEE9E4;
background-color: #074663;
font-size: 2.8rem;
font-weight: bold;
display: inline-block;
padding: 4px 8px;
}
}
.modBasicSecSubTitle {
color: #074663;
font-size: 2.8rem;
font-weight: bold;
margin-bottom: 24px
}
@media screen and (max-width: 834px) {
.modBasicSecSubTitle {
font-size:2.4rem
}
.modBasicSecSubTitle.lySpMb16 {
margin-bottom: 16px
}
}
.modBasicSecText {
width: calc(100% - 580px)
}
@media screen and (max-width: 1023px) {
.modBasicSecText {
width:calc(57% - 40px)
}
}
@media screen and (max-width: 834px) {
.modBasicSecText {
width:100%
}
}
.modBasicSecImage {
width: 500px
}
@media screen and (max-width: 1023px) {
.modBasicSecImage {
width:43%
}
}
@media screen and (max-width: 834px) {
.modBasicSecImage {
max-width:650px;
width: 100%;
margin: 0 auto 40px
}
}
.pageSecFlex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 60px
}
@media screen and (max-width: 834px) {
.pageSecFlex {
-webkit-box-orient:vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
}
.pageSecFlex.mdReverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row
}
@media screen and (max-width: 834px) {
.pageSecFlex.mdReverse {
-webkit-box-orient:vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.pageSecFlex.mdReverse .modBasicSecImage {
margin: 0 auto 40px -16px
}
}
.modMidSecWrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 60px
}
@media screen and (max-width: 834px) {
.modMidSecWrap {
-webkit-box-orient:vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
}
.modMidSecWrap .modMidSec {
width: calc(50% - 40px)
}
@media screen and (max-width: 834px) {
.modMidSecWrap .modMidSec {
width:100%
}
}
.modMidSecWrap .modMidSec.mdDash {
width: 50%;
padding-right: 40px;
border-right: 2px dashed #111111
}
@media screen and (max-width: 834px) {
.modMidSecWrap .modMidSec.mdDash {
width:100%;
margin-bottom: 40px;
padding-right: 0;
padding-bottom: 40px;
border-right: none;
border-bottom: 2px dashed #111111
}
}
.modMidSecTitle,h2.wp-block-heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
margin-bottom: 24px;
padding-bottom: 8px;
color: #074663;
font-size: 2.8rem;
font-weight: bold;
border-bottom: 2px solid #074663
}
@media screen and (max-width: 566px) {
.modMidSecTitle.lySpFont24,h2.lySpFont24.wp-block-heading {
margin-bottom:20px;
font-size: 2.4rem
}
}
@media screen and (max-width: 767px) {
.modMidSecTitle:has(.mdSPOrangeLine),h2.wp-block-heading:has(.mdSPOrangeLine) {
border-bottom:none
}
}
@media screen and (max-width: 767px) {
.modMidSecTitle .mdSPOrangeLine,h2.wp-block-heading .mdSPOrangeLine {
position:relative;
color: #0E5572;
padding-bottom: 0
}
.modMidSecTitle .mdSPOrangeLine:after,h2.wp-block-heading .mdSPOrangeLine:after {
content: "";
display: block;
position: absolute;
bottom: 2px;
width: 100%;
left: 0;
height: 12px;
mix-blend-mode: hard-light;
background-color: rgba(29,141,192,0.6);
z-index: -1
}
}
.modKeySecTitle {
width: 141px;
margin-bottom: 22px
}
.modKeyList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
@media screen and (max-width: 566px) {
.modKeyList.pFontSp14>li {
margin:0 4px 4px 0
}
}
@media screen and (max-width: 566px) {
.modKeyList.pFontSp14 .modKeyLink {
font-size:1.4rem;
padding: 2px 9px 1px
}
}
.modKeyList>li {
margin: 0 8px 12px 0
}
.modKeyLink {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 7px 11px;
color: #1D8DC0;
font-size: 1.6rem;
font-weight: 500;
border: 1px solid #1D8DC0;
text-decoration: none;
border-radius: 999px
}
.modKeyLink:before {
content: "#"
}
.modTagList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.modTagList>li {
margin: 0 4px 4px 0
}
.modTagLink {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1px 7px;
color: rgba(17,17,17,0.7);
font-size: 1.2rem;
font-weight: 500;
border: 1px solid rgba(17,17,17,0.7);
text-decoration: none;
border-radius: 999px
}
.modTagLink:before {
content: "#"
}
.modArticleList>li {
position: relative;
margin-bottom: 20px
}
.modArticleList>li .modTagList {
position: absolute;
bottom: -8px;
right: 0
}
@media screen and (max-width: 767px) {
.modArticleList>li .modTagList {
display:none
}
}
.modArticleList>li .modTagList {
width: calc(100% - 176px)
}
.modArticleListLink {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-decoration: none
}
@media screen and (max-width: 767px) {
.modArticleListLink .modThemaDetailTitle {
margin-top:40px
}
}
.modArticleListLink .modThemaDetailImg {
min-width: 160px;
width: 160px;
margin: 0 16px 0 0
}
@media screen and (max-width: 767px) {
.modArticleListLink .modThemaDetailImg {
overflow:visible;
min-width: 120px;
width: 120px
}
.modArticleListLink .modThemaDetailImg img {
border-radius: 4px
}
.modArticleListLink .modThemaDetailImg .dCategory {
left: 136px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content
}
}
.modAdArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 120px
}
@media screen and (max-width: 834px) {
.modAdArea {
-webkit-box-orient:vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 40px
}
}
.modAdArea.mdGap40 {
gap: 40px
}
.modAdItem {
width: 300px
}
.modAdItem.mdWhtieBack {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 470px;
padding: 60px;
background-color: #FFFFFF;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.05);
box-shadow: 0 0 5px rgba(0,0,0,0.05)
}
@media screen and (max-width: 767px) {
.modAdItem.mdWhtieBack {
padding:0;
background-color: transparent
}
}
@media screen and (max-width: 566px) {
.modAdItem.mdWhtieBack {
width:300px
}
}
.pageHero {
background-size: cover;
background-position: center;
background-image: url(//youjin-g.co.jp/wp-content/themes/garage_main_site/images/heroBack.png)
}
.pageHeroItem {
width: 480px;
margin: 0 auto;
padding: 190px 0 170px
}
@media screen and (max-width: 566px) {
.pageHeroItem {
width:240px;
padding: 77px 0 77px
}
}
.pageRoop {
width: 100%;
padding: 18px 0;
overflow: hidden;
background-color: #0E5572
}
.pageRoopList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: visible;
-webkit-animation: roopanime 35s linear infinite;
animation: roopanime 35s linear infinite
}
.pageRoopList>li {
min-width: 800px;
margin-right: 3px
}
@media screen and (max-width: 566px) {
.pageRoopList>li {
min-width:600px
}
}
@-webkit-keyframes roopanime {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
to {
-webkit-transform: translateX(-1604px);
transform: translateX(-1604px)
}
}
@keyframes roopanime {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
to {
-webkit-transform: translateX(-1604px);
transform: translateX(-1604px)
}
}
.modAboutNavList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 40px
}
@media screen and (max-width: 834px) {
.modAboutNavList {
-ms-flex-wrap:wrap;
flex-wrap: wrap;
gap: 20px
}
}
.modAboutNavList>li {
width: calc((100% - 60px) / 4);
position: relative
}
@media screen and (max-width: 834px) {
.modAboutNavList>li {
width:calc(50% - 10px)
}
}
.modAboutNavListWrap {
max-width: 1052px;
margin: 0 auto;
padding: 60px 16px
}
@media screen and (max-width: 834px) {
.modAboutNavListWrap {
width:100%;
margin: auto;
padding: 40px 16px 10px
}
}
.modAboutNavLink {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 27px 0 20px;
border-radius: 4px;
color: #FFFFFF;
text-decoration: none;
font-size: 2.8rem;
background-color: #074663
}
@media screen and (max-width: 1023px) {
.modAboutNavLink {
font-size:2.2rem
}
}
@media screen and (max-width: 834px) {
.modAboutNavLink {
font-size:2rem
}
}
.modAboutNavLink:after {
content: "";
display: block;
width: 20px;
height: 14px;
margin-top: 8px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url(//youjin-g.co.jp/wp-content/themes/garage_main_site/images/iconArrowDownWhite.svg)
}
.modAboutNavLink .dNum {
width: 84px;
margin-bottom: 10px
}
.modThemaTitle {
color: #074663;
font-size: 2.8rem;
font-weight: bold
}
.modThemaTitleWrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 24px
}
@media screen and (max-width: 767px) {
.modThemaTitleWrap {
margin-bottom:20px
}
}
.modThemaDetailList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.modThemaDetailList>li {
width: calc((100% - 60px) / 4);
margin-bottom: 40px
}
@media screen and (max-width: 834px) {
.modThemaDetailList>li {
width:calc(50% - 4px);
margin-bottom: 40px
}
}
.modThemaDetailList.md2Column>li {
width: calc(50% - 4px)
}
.modThemaDetailLink {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-decoration: none;
margin-bottom: 12px
}
.modThemaDetailTitle {
color: #111111;
font-size: 1.6rem;
font-weight: bold;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3
}
.modThemaDetailTime {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 6px;
opacity: 0.7;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
color: #111111;
font-weight: bold
}
.modThemaDetailTime:before {
content: "";
display: block;
width: 18px;
height: 18px;
margin-right: 4px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url(//youjin-g.co.jp/wp-content/themes/garage_main_site/images/iconTimeBlack.svg)
}
.modThemaDetailImg {
position: relative;
margin-bottom: 12px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
border-radius: 4px;
overflow: hidden
}
.modThemaDetailImg .dCategory {
position: absolute;
top: 0;
left: 0;
display: inline-block;
padding: 2px 8px;
font-size: 1.4rem;
font-weight: bold;
color: #FFFFFF;
background-color: #074663
}
.pageNewArtiicles {
padding: 70px 0 80px;
background-color: rgba(29,141,192,0.1)
}
.pageNewArtiiclesWrap {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px
}
@media screen and (max-width: 834px) {
.pageNewArtiiclesWrap {
max-width:600px
}
}
@media screen and (max-width: 566px) {
.pageNewArtiiclesWrap {
padding:0 16px
}
}
@media screen and (max-width: 566px) {
h2.wp-block-heading {
font-size:2.4rem
}
}
h2.wp-block-heading:not(:first-child) {
margin-top: 60px
}
h3.wp-block-heading:not(:first-child) {
margin-top: 60px
}
h4.wp-block-heading:not(:first-child) {
margin-top: 60px
}
.wp-block-image {
margin-top: 60px;
margin-bottom: 60px
}
.lyMt0 {
margin-top: 0
}
.lyMr0 {
margin-right: 0
}
.lyMb0 {
margin-bottom: 0
}
.lyMl0 {
margin-left: 0
}
.lyMt5 {
margin-top: 5px
}
.lyMr5 {
margin-right: 5px
}
.lyMb5 {
margin-bottom: 5px
}
.lyMl5 {
margin-left: 5px
}
.lyMt8 {
margin-top: 8px
}
.lyMr8 {
margin-right: 8px
}
.lyMb8 {
margin-bottom: 8px
}
.lyMl8 {
margin-left: 8px
}
.lyMt10 {
margin-top: 10px
}
.lyMr10 {
margin-right: 10px
}
.lyMb10 {
margin-bottom: 10px
}
.lyMl10 {
margin-left: 10px
}
.lyMt12 {
margin-top: 12px
}
.lyMr12 {
margin-right: 12px
}
.lyMb12 {
margin-bottom: 12px
}
.lyMl12 {
margin-left: 12px
}
.lyMt16 {
margin-top: 16px
}
.lyMr16 {
margin-right: 16px
}
.lyMb16 {
margin-bottom: 16px
}
.lyMl16 {
margin-left: 16px
}
.lyMt20 {
margin-top: 20px
}
.lyMr20 {
margin-right: 20px
}
.lyMb20 {
margin-bottom: 20px
}
.lyMl20 {
margin-left: 20px
}
.lyMt24 {
margin-top: 24px
}
.lyMr24 {
margin-right: 24px
}
.lyMb24 {
margin-bottom: 24px
}
.lyMl24 {
margin-left: 24px
}
.lyMt30 {
margin-top: 30px
}
.lyMr30 {
margin-right: 30px
}
.lyMb30 {
margin-bottom: 30px
}
.lyMl30 {
margin-left: 30px
}
.lyMt40 {
margin-top: 40px
}
.lyMr40 {
margin-right: 40px
}
.lyMb40 {
margin-bottom: 40px
}
.lyMl40 {
margin-left: 40px
}
.lyMt50 {
margin-top: 50px
}
.lyMr50 {
margin-right: 50px
}
.lyMb50 {
margin-bottom: 50px
}
.lyMl50 {
margin-left: 50px
}
.lyMt60 {
margin-top: 60px
}
.lyMr60 {
margin-right: 60px
}
.lyMb60 {
margin-bottom: 60px
}
.lyMl60 {
margin-left: 60px
}
.lyPt20 {
padding-top: 20px
}
.lyPr20 {
padding-right: 20px
}
.lyPb20 {
padding-bottom: 20px
}
.lyPl20 {
padding-left: 20px
}
.lyPt100 {
padding-top: 100px
}
.lyPr100 {
padding-right: 100px
}
.lyPb100 {
padding-bottom: 100px
}
.lyPl100 {
padding-left: 100px
}
.lyW23px {
width: 23px
}
.lyW45px {
width: 45px
}
.lyW50px {
width: 50px;
}
.lyW60px {
width: 60px
}
.lyW65px {
width: 65px
}
.lyW70px {
width: 70px
}
.lyW80px {
width: 80px
}
.lyW90px {
width: 90px
}
.lyW100px {
width: 100px
}
.lyW130px {
width: 130px
}
.lyW150px {
width: 150px
}
.lyW175px {
width: 175px
}
.lyW200px {
width: 200px
}
.lyW250px {
width: 250px
}
.lyW290px {
width: 290px
}
.lyW300px {
width: 300px
}
.lyW400px {
width: 400px
}
.lyW440px {
width: 440px
}
.lyW470px {
width: 470px
}
.lyW500px {
width: 500px
}
.lyW900px {
width: 900px
}
.lyW100 {
width: 100%
}
.lyW70 {
width: 70%
}
.lyW50 {
width: 50%
}
.lyW48 {
width: 48%
}
.lyW30 {
width: 30%
}
.lyH80px {
height: 80px
}
.lyH150px {
height: 150px
}
.lyH200px {
height: 200px
}
.lyH250px {
height: 250px
}
.lyH300px {
height: 300px
}
.lyH320px {
height: 320px
}
.lyH350px {
height: 350px
}
.lyH400px {
height: 400px
}
@media only screen and (max-width: 1023px) {
.lyTbDpNone {
display:none
}
.lyTbDpIl {
display: inline-block
}
.lyTbMt20 {
margin-top: 20px
}
.lyTbMr20 {
margin-right: 20px
}
.lyTbMb20 {
margin-bottom: 20px
}
.lyTbMl20 {
margin-left: 20px
}
.lyTbMt30 {
margin-top: 30px
}
.lyTbMr30 {
margin-right: 30px
}
.lyTbMb30 {
margin-bottom: 30px
}
.lyTbMl30 {
margin-left: 30px
}
.lyTbW150px {
width: 150px
}
.lyTbW100 {
width: 100%
}
}
@media only screen and (max-width: 767px) {
.lyFlexCrm {
-webkit-box-orient:vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.lySpDpBl {
display: block
}
.lySpDpIl {
display: inline-block
}
.lySpDpNone {
display: none
}
.lySpTextLeft {
text-align: left
}
.lySpMt0 {
margin-top: 0
}
.lySpMr0 {
margin-right: 0
}
.lySpMb0 {
margin-bottom: 0
}
.lySpMl0 {
margin-left: 0
}
.lySpMt5 {
margin-top: 5px
}
.lySpMr5 {
margin-right: 5px
}
.lySpMb5 {
margin-bottom: 5px
}
.lySpMl5 {
margin-left: 5px
}
.lySpMt8 {
margin-top: 8px
}
.lySpMr8 {
margin-right: 8px
}
.lySpMb8 {
margin-bottom: 8px
}
.lySpMl8 {
margin-left: 8px
}
.lySpMt12 {
margin-top: 12px
}
.lySpMr12 {
margin-right: 12px
}
.lySpMb12 {
margin-bottom: 12px
}
.lySpMl12 {
margin-left: 12px
}
.lySpMt15 {
margin-top: 15px
}
.lySpMr15 {
margin-right: 15px
}
.lySpMb15 {
margin-bottom: 15px
}
.lySpMl15 {
margin-left: 15px
}
.lySpMt16 {
margin-top: 16px
}
.lySpMr16 {
margin-right: 16px
}
.lySpMb16 {
margin-bottom: 16px
}
.lySpMl16 {
margin-left: 16px
}
.lySpMt10 {
margin-top: 10px
}
.lySpMr10 {
margin-right: 10px
}
.lySpMb10 {
margin-bottom: 10px
}
.lySpMl10 {
margin-left: 10px
}
.lySpMt20 {
margin-top: 20px
}
.lySpMr20 {
margin-right: 20px
}
.lySpMb20 {
margin-bottom: 20px
}
.lySpMl20 {
margin-left: 20px
}
.lySpMt30 {
margin-top: 30px
}
.lySpMr30 {
margin-right: 30px
}
.lySpMb30 {
margin-bottom: 30px
}
.lySpMl30 {
margin-left: 30px
}
.lySpPt0 {
padding-top: 0
}
.lySpPr0 {
padding-right: 0
}
.lySpPb0 {
padding-bottom: 0
}
.lySpPl0 {
padding-left: 0
}
.lySpW60px {
width: 60px
}
.lySpW80px {
width: 80px
}
.lySpW130px {
width: 130px
}
.lySpW170px {
width: 170px
}
.lySpW250px {
width: 250px
}
.lySpW100 {
width: 100%
}
.lySpH200px {
height: 200px
}
.lySpH300px {
height: 300px
}
}
.pFont10 {
font-size: 1rem
}
.pFont12 {
font-size: 1.2rem
}
.pFont14 {
font-size: 1.4rem
}
.pFont16 {
font-size: 1.6rem
}
.pFont18 {
font-size: 1.8rem
}
.pFont20 {
font-size: 2rem
}
.pFont22 {
font-size: 2.2rem
}
.pFont24 {
font-size: 2.4rem
}
.pFont26 {
font-size: 2.6rem
}
.pFontGray {
color: rgba(17,17,17,0.7)
}
.pFontWhite {
color: #FFFFFF
}
.pFontRed {
color: #970747
}
.pFontNavy {
color: #0E5572
}
.pFontBold {
font-weight: bold
}
.pFontMedium {
font-weight: 500
}
.pFontNormal {
font-weight: normal
}
.gbHeaderSearch {
width: 300px
}
@media screen and (max-width: 1023px) {
.gbHeaderSearch {
width:250px
}
}
@media screen and (max-width: 834px) {
.gbHeaderSearch {
display:none
}
}
.pSearchBox {
width: 100%;
padding: 10px 16px;
border-radius: 4px;
background-color: #EEEEEE
}
.pSearchBox::-webkit-input-placeholder {
color: rgba(17,17,17,0.4)
}
.pSearchBox::-moz-placeholder {
color: rgba(17,17,17,0.4)
}
.pSearchBox:-ms-input-placeholder {
color: rgba(17,17,17,0.4)
}
.pSearchBox::-ms-input-placeholder {
color: rgba(17,17,17,0.4)
}
.pSearchBox::placeholder {
color: rgba(17,17,17,0.4)
}
.pSearchBox::-webkit-search-cancel-button {
-webkit-appearance: none
}
.pSearchBox.mdMenu {
font-size: 1.6rem;
background-color: rgba(238,238,238,0.3)
}
.pSearchBox.mdMenu::-webkit-input-placeholder {
color: rgba(255,255,255,0.5)
}
.pSearchBox.mdMenu::-moz-placeholder {
color: rgba(255,255,255,0.5)
}
.pSearchBox.mdMenu:-ms-input-placeholder {
color: rgba(255,255,255,0.5)
}
.pSearchBox.mdMenu::-ms-input-placeholder {
color: rgba(255,255,255,0.5)
}
.pSearchBox.mdMenu::placeholder {
color: rgba(255,255,255,0.5)
}
.pSearchBoxWrap {
position: relative
}
.pSearchBtn {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
padding: 4px
}  @media screen and (max-width: 1220px) { .modMainArea .modBasicSecTitle {
display:-webkit-box;
display: -ms-flexbox;
display: flex
}
.pageNewArtiiclesWrap {
max-width:600px
}
.modThemaDetailList>li {
width:calc(50% - 4px);
margin-bottom: 40px
}
.modAboutNavLink {
font-size:2rem
}
.modAboutNavListWrap {
width:100%;
margin: auto;
padding: 40px 16px 10px
}
.modAboutNavList>li {
width:calc(50% - 10px)
}
.modAboutNavList {
-ms-flex-wrap:wrap;
flex-wrap: wrap;
gap: 20px
}
.modAdArea {
-webkit-box-orient:vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 40px
}
.modMidSecWrap .modMidSec.mdDash {
width:100%;
margin-bottom: 40px;
padding-right: 0;
padding-bottom: 40px;
border-right: none;
border-bottom: 2px dashed #111111
}
.modMidSecWrap .modMidSec {
width:100%
}
.modMidSecWrap {
-webkit-box-orient:vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.pageSecFlex.mdReverse {
-webkit-box-orient:vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.pageSecFlex.mdReverse .modBasicSecImage {
margin: 0 auto 40px -16px
}
.pageSecFlex {
-webkit-box-orient:vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.modBasicSecImage {
max-width:650px;
width: 100%;
margin: 0 auto 40px
}
.modBasicSecText {
width:100%
}
.modBasicSecSubTitle {
font-size:2.4rem
}
.modBasicSecTitle {
display:none
}
.modBasicSecTitle.lySP,.modBasicSecTitle.mdSPDsply {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.modBasicSec.dBackNavy:last-child,.modBasicSec.dBackRed:last-child {
padding:40px 124px 40px
}
.modBasicSec.dBackNavy,.modBasicSec.dBackRed {
padding:40px 124px 80px;
background-position: center 80px
}
.modShareText {
margin-bottom:24px
}
.modShareArea {
padding:36px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.modMainInnerSNS {
margin-bottom:0;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
.modMainInnerImg {
margin-bottom:16px
}
.modMainInnerImgSNS {
-webkit-box-orient:vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.modMainArea {
width:100%
}
.modMainArea .modBasicSecTitle {
display:-webkit-box;
display: -ms-flexbox;
display: flex
}
.modMainSideWrap {
-webkit-box-orient:vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 0
}
.gbWrap.blogWrap {
max-width:632px;
padding: 0 16px 120px;
margin-top:0;
}
.modMainInnerListImg img{
width: 100%!important;
height: inherit!important;
aspect-ratio: 3 / 2;
object-fit: cover; }
}
.pSkyBluetnL {
color: #FFFFFF;
background-color: #446878;
font-weight: bold;
border-radius: 4px;
padding: 24px;
font-size: 2rem;    display: -webkit-box;
display: -ms-flexbox;
display: flex
;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
width: 100%;
text-decoration: none;
}
.pSkyBluetnL::before {
content: "";
display: block;
width: 26px;
height: 26px;
margin-right: 16px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url(//youjin-g.co.jp/wp-content/themes/garage_main_site/images/circleWhiteRight.svg);
margin-top: 4px;
}
.pSkyBlueLineBtnM {
color: #1D8DC0;
border-radius: 4px;
border: 1px solid #1D8DC0;
}
.pSkyBlueLineBtnM::after {
content: "";
display: block;
width: 20px;
height: 20px;
margin-left: 12px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url(//youjin-g.co.jp/wp-content/themes/garage_main_site/images/circleSkyblueRight.svg);
}
.pSkyBlueSircleArrowBtn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #1D8DC0;
font-size: 1.6rem;
text-decoration: none;
}
.pSkyBlueSircleArrowBtn::after {
content: "";
display: block;
width: 20px;
height: 20px;
margin-left: 12px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url(//youjin-g.co.jp/wp-content/themes/garage_main_site/images/circleSkyblueRight.svg);
}