��@charset "UTF-8"; /* --- BASE --- */ .baseHead{ width:100%; margin-bottom:40px; } .KVandMainTtl{ width:526px; height:395px; margin-bottom:8px; text-align:center; background-color:#f7f7f7; border-radius:8px; overflow:hidden; } .KVandMainTtl img{ max-width:100%; /* height:auto; */ max-height:100%; text-align:center; margin:auto; } .DateCate{ display:flex; margin-bottom:16px; } .category{ width:50%; font-size:15px; font-weight:700; /* color:#E08500; */ } .releaseDate{ width:50%; font-size:15px; font-weight:700; color:#999999; text-align:right; } /* --- #� �n04XT --- */ .seriesTitle{ height:35px; margin:40px 0 16px 0; } .seriesNum{ display:inline-block; width:35px; height:35px; border-radius:35px; background-color:#C95102; color:#fff; font-size:13px; font-weight:700; text-align:center; line-height:34px; margin:0 8px 0 0; } .seriesName{ display:inline-block; font-size:13px; font-weight:700; border:1px solid #FDD0B2; border-radius: 18px; padding:0 0.5em; line-height:33px; } .seriesName a{ display:block; color:#666; font-weight:700; } /* --- �v!k --- */ .mokujiBox { background-color:#FFFAF7; width:100%; padding:16px; margin:0 auto 40px; box-sizing:border-box; } .mokujiBox .mokujiTtl{ font-size:15px; padding: 0; font-weight:700; color:#C95102; border-bottom:1px solid #FDD0B2; padding-bottom:1em; } .mokujiBox .Bulletlist{ padding:0; margin:0; list-style-position: inside; } .mokujiBox .Bulletlist li{ font-size:15px; color:#333; line-height:1.4; font-weight:normal; padding:1em 0; border-bottom:1px solid #FDD0B2; } .mokujiBox .Bulletlist a{ color:#333; } /* --- ;u�Ph0�e�z --- */ .photoimg .imgBlock{ margin:0 auto 24px; } .photoimg .imgBlock img{ width:100%; vertical-align:bottom; margin:0 auto; } /* --- 9TM0�QW0 --- */ .SpeechBubble{ width:100%; margin:0; padding:0; } .SpeechBubble .eachLine { display:flex; margin-bottom:24px; } .eachLine .speaker{ width:66px; text-align:center; } .eachLine .speaker img{ width:66px; border-radius:50%; border:2px solid #FA6703; margin-bottom:1px; } .eachLine .speakerName{ font-size:13px; text-align:center; } .eachLine .speech{ width:auto; padding:16px; background-color:#f0f0f0; } .eachLine .chatBalloon{ position: relative; margin-left:8px; } .eachLine .chatBalloon:after { content: ""; display: inline-block; position: absolute; top: 24px; left: -19px; border: 11px solid transparent; border-right: 17px solid #f0f0f0; transform: rotate(0deg); } /* --- �0�0�0 526/104:--- */ .cardEachBox{ display:flex; width:100%; padding:8px; box-sizing: border-box; background-color:#FFFAF7; } .itemPhoto{ width:88px; height:88px; background-color:#fdfdfd; text-align:center; display:flex; align-items: center; } .itemPhoto img{ width:100%; } .itemIntro{ width:438px; box-sizing: border-box; padding-left:8px; } .itemIntro .itemName{ font-size:17px; font-weight:700; color:#C95102; margin-bottom:8px; } .itemIntro .itemCatch{ font-size:15px; font-weight:400; color:#333; margin-bottom:8px; } /* --- \���QW0h0�e�z --- */ .ttlandtx .ttl4df{ margin-bottom:8px; } .ttlandtx .ABMlinkTx{ margin-top:8px; } /* --- FAQ�0O0B0�0�OU --- */ .faqBlock{ width:100%; margin-bottom:80px; border-bottom:1px solid #FA6703; } .faqq{ font-size:17px; font-weight:700; padding:1em 2.5em 1em 2em ; text-indent: -1.5em; background: url(../../_img_bg/icon_expand.svg) 98% center no-repeat; background-size:17px 17px; border-top:1px solid #FA6703; } .faqq.open{ background: url(../../_img_bg/icon_shrink.svg) 98% center no-repeat; background-size:17px 17px; } .faqa{ font-size:17px; font-weight:400; padding:1em 0 1em 2em ; text-indent: -1.5em; background-color:#FFFAF7; display:none; } .faqBlock b{ color:#E67F38; font-weight:700; font-size:18px; } .faqa .ABMlinkTx{ margin-top:8px; margin-left:1.5em; } /* --- �e��n0CSS�0�0�0 --- */ .svgBtnParts{ text-align:center; } .iconTxBtn{ display:inline-block; background-color:#ff6e00; color:#fff; width:305px; height:52px; vertical-align:middle; font-size:17px; text-align:center; white-space:nowrap; overflow:hidden; line-height:52px; border-radius:52px; margin:3px 0; } .iconTxBtn .iconbox{ display:inline-block; font-weight:700; height:50px; padding-left:40px; background-repeat: no-repeat; background-position: left center; background-size:33px auto; } .iconTxBtn .iconbox br{ display:none; } /* --- ̀of}v�0�0�0 --- */ .iconTxBtn2{ display:inline-block; background:linear-gradient(#ffffff, #fafaff); color:#333; width:305px; height:52px; vertical-align:middle; font-size:17px; text-align:center; white-space:nowrap; overflow:hidden; line-height:52px; border-radius:52px; margin:3px 0; border:1px solid #aaa; } .iconTxBtn2 .iconbox{ display:inline-block; height:50px; padding-left:0; } /* --- �0�0�0�0�0�0�0 --- */ .iconTxBtn2 .iconbox{ display:inline-block; height:50px; padding-left:0; } .iconbox.icon01{ background-image: url("/magazine/_icon_button/btn_icon_pit.svg"); background-size:33px auto; padding-left:40px; background-repeat: no-repeat; } .iconbox.icon02{ background-image: url("/magazine/_icon_button/btn_icon_tire.svg"); background-size:33px auto; padding-left:40px; background-repeat: no-repeat; } .iconbox.icon03{ background-image: url("/magazine/_icon_button/btn_icon_syaken.svg"); background-size:40px auto; padding-left:47px; background-repeat: no-repeat; } .iconbox.icon04{ background-image: url("/magazine/_icon_button/btn_icon_mitsumori.svg"); background-size:23px auto; padding-left:32px; background-repeat: no-repeat; } .iconbox.icon05{ background-image: url("/magazine/_icon_button/btn_icon_syaken.svg"); background-size:40px auto; padding-left:47px; background-repeat: no-repeat; } .iconbox.icon06{ background-image: url("/magazine/_icon_button/btn_icon_oil.svg"); background-size:40px auto; padding-left:47px; background-repeat: no-repeat; } .iconbox.icon07{ background-image: url("/magazine/_icon_button/btn_icon_driverecorder.svg"); background-size:30px auto; padding-left:37px; background-repeat: no-repeat; } .iconbox.icon08{ background-image: url("/magazine/_icon_button/btn_icon_wiper.svg"); background-size:35px auto; padding-left:42px; background-repeat: no-repeat; } .iconbox.icon09{ background-image: url("/magazine/_icon_button/btn_icon_battery.svg"); background-size:30px auto; padding-left:37px; background-repeat: no-repeat; } .iconbox.icon10{ background-image: url("/magazine/_icon_button/btn_icon_store.svg"); background-size:35px auto; padding-left:42px; background-repeat: no-repeat; } .iconbox.icon11{ background-image: url("/magazine/_icon_button/btn_icon_ec.svg"); background-size:30px auto; padding-left:37px; background-repeat: no-repeat; } .iconbox.icon12{ background-image: url("/magazine/_icon_button/btn_icon_app-dl.svg"); background-size:25px auto; padding-left:27px; background-repeat: no-repeat; } .iconbox.icon15{ background-image: url("/magazine/_icon_button/btn_free_safety_check.svg"); background-size:40px auto; padding-left:50px; background-repeat: no-repeat; } .iconbox.icon99{ background-image: none; padding-left:0; font-weight:700; } .btnType1 a{ display:inline-block; background-color:#ff6e00; color:#fff; width:305px; height:52px; height:auto; line-height:1.4; font-size:17px; border-radius:52px; text-decoration:none; margin:5px 0 10px; text-align:center; } .btnType1 a:link{color:#fff;text-decoration:none;} .btnType1 a:visited{color:#fff;text-decoration:none;} .btnType1 a:hover{color:#fff;opacity:0.7;text-decoration:none;} .btnType1 a:active{color:#fff;text-decoration:none;} .cssBtnText{ display:inline-block; padding:1em 1.5em; line-height:1.5; font-size:15px; font-weight:700; white-space:nowrap; border-radius:8px; text-decoration:none; min-width:200px; text-align:center; } .bnrImgBtn img{ width:100%; } /* --- yoytube --- */ .YTmovieBlock{ width:100%; min-height:300px; margin-bottom:10px; } .YTmovieBlock iframe{ width:526px; height:296px; margin:0; } /* --- �0�0�0�0�0�0�0�0�0 --- */ .genTable2{ width:auto; min-width:70%; border-top:1px solid #aaa; border-left:1px solid #aaa; font-size:17px; margin:0 auto 16px; } .genTable2 th{ background-color:#efeeed; padding:3px 5px; text-align:left; border-bottom:1px solid #aaa; border-right:1px solid #aaa; /* white-space:nowrap; */ width:auto; /* min-width:100px; max-width:250px; */ overflow:hidden; } .genTable2 td{ background-color:#fff; padding:3px 5px; text-align:left; border-bottom:1px solid #aaa; border-right:1px solid #aaa; width:auto; /* min-width:100px; */ } /* --- �0�0�0�0�0�0�0 --- */ .bnrBox{ padding-bottom:24px; } .imgbnr .imageBlock img{ margin-bottom:8px; width:100%; } /* --- �0�0�0�0 --- */ .stfRadius{ border-radius:50%; border:2px solid #FA6703; } .staffPhoto{ width:73px; height:73px; background-color:#FFFAF7; text-align:center; display:flex; align-items: center; } .staffPhoto img{ width:100%; } .RegisteredArticles{ margin-bottom:80px; } /* --- pagination ��N �--- */ .pagination{ text-align:center; margin:80px auto; font-size:15px; font-weight:700; color:#ccc; } .pagination img{ width:34px; vertical-align:middle; opacity:0.5; } /* --- ��#��0�0�0�0�0 --- */ .relatedKwd{ margin-bottom:40px; } .kwdBtns{ display:flex; flex-wrap: wrap; gap: 16px 16px; } .kwdBtns li{ margin:0; padding:0; list-style:none; } .kwdBtns li a{ display:block; font-size:13px; font-weight:700; line-height:2; white-space:nowrap; border:1px solid #FDD0B2; border-radius:2em; padding:0 1em; color:#666; opacity:1; transition: 0.3s ease; } .kwdBtns li a:hover{ text-decoration:none; opacity:0.7; transition: 0.3s ease; } .SNSshareBtn{ background-color:#FFFAF7; text-align:center; padding:24px; } .SNSshareBtn .eachBtns img{ width:44px; height:auto; } .ttl4sns{ font-size:17px; color:#C95102; text-align:center; margin-bottom:24px; } .ttl4sns span { position:relative; font-weight:700; } .ttl4sns span:after { content: ""; position: absolute; top: 12px; left: -1.3em; width: 17px; height: 3px; background-color: #E67F38; } .ttl4sns span::after { transform: rotate(45deg); } .ttl4sns span:before { content: ""; position: absolute; top: 12px; right: -1.2em; width: 17px; height: 3px; background-color: #E67F38; } .ttl4sns span::before { transform: rotate(-45deg); } .eachBtns{ display:flex; justify-content: center; gap: 4px 24px; } .eachBtns img{ width:45px; } /* --- ��#���N --- */ .eachRelatedArticle{ list-style-type:none; margin:0; padding:0; } .eachRelatedArticle .each{ margin-bottom:24px; } .eachRelatedArticle .each a{ display:flex; justify-content: left; color:#333333; } .eachRelatedArticle .each a:hover{ text-decoration:none; } .eachRelatedArticle .each .raKV{ width:232px; height:168px; text-align:center; margin-right:16px; border-radius:8px; background-color:#f7f7f7; overflow:hidden; box-sizing:border-box; } .raKV img{ max-width:100%; max-height:100%; text-align:center; margin:auto; } .eachRelatedArticle .each .raTtl{ width:298px; /* display:flex; flex-direction: column-reverse; */ } .eachRelatedArticle .each .raTtl .ttl{ font-size:19px; margin-bottom:4px; } .eachRelatedArticle .CateDate{ display:flex; justify-content: left; } .eachRelatedArticle .CateDate .ctg{ font-size:15px; font-weight:700; /* color:#E08500; */ width:50%; } .eachRelatedArticle .CateDate .date{ font-size:15px; font-weight:700; color:#999999; text-align:right; width:50%; } /* --- SP ------------------------------------------------- */ @media screen and (max-width:768px){ .abmagMain.forSP{ padding:10vw 6.4vw 20vw; } /* --- BASE --- */ .baseHead{ margin-bottom:10vw; } .KVandMainTtl{ width:auto; height:auto; margin-bottom:2vw; } .DateCate{ margin-bottom:10vw; } .category{ font-size:4vw; } .releaseDate{ font-size:4vw; } /* --- #� �n04XT --- */ .seriesTitle{ height:35px; margin:40px 0 16px 0; } .seriesNum{ display:inline-block; width:9.33vw; height:9.33vw; border-radius:9.33vw; font-size:3.47vw; line-height:9vw; margin:0 2.13vw 0 0; } .seriesName{ display:inline-block; font-size:3.47vw; border-radius: 5vw; padding:0 0.5em; line-height:9vw; } /* --- �v!k --- */ .mokujiBox { padding:4.26vw; margin:0 auto 10vw; } .mokujiBox .mokujiTtl{ font-size:4vw; padding-bottom:1em; } .mokujiBox .Bulletlist{ } .mokujiBox .Bulletlist li{ font-size:4vw; } /* --- ;u�Ph0�e�z --- */ .photoimg .imgBlock{ margin:0 auto 6.4vw; } .photoimg .imgBlock img{ } /* --- 9TM0�QW0 --- */ .SpeechBubble{ } .SpeechBubble .eachLine { display:flex; margin-bottom:6.4vw; } .eachLine .speaker{ width:17.6vw; } .eachLine .speaker img{ width:17.6vw; } .eachLine .speakerName{ font-size:3.5vw; } .eachLine .speech{ padding:4.2vw; } .eachLine .chatBalloon{ margin-left:2.2vw; } .eachLine .chatBalloon:after { top: 6.4vw; left: -5vw; border: 3vw solid transparent; border-right: 4.4vw solid #f0f0f0; } /* --- �0�0�0 526/104:--- */ .cardEachBox{ padding:2.1vw; } .itemPhoto{ width:23.5vw; height:23.5vw; } .itemPhoto img{ } .itemIntro{ width:59vw; padding-left:2.1vw; } .itemIntro .itemName{ font-size:4vw; font-weight:700; margin-bottom:2.1vw; } .itemIntro .itemCatch{ font-size:4vw; font-weight:400; margin-bottom:2.1vw; } .itemIntro .ABMlinkTx a:link{ font-size:3.5vw; } /* --- \���QW0h0�e�z --- */ .ttlandtx .ttl4df{ margin-bottom:2.1vw; } .ttlandtx .ABMlinkTx{ margin-top2.1vw; } /* --- FAQ�0O0B0�0�OU --- */ .faqBlock{ margin-bottom:10vw; } .faqq{ font-size:4.5vw; background-size:6vw 6vw; } .faqq.open{ background-size:6vw 6vw; } .faqa{ font-size:4.5vw; } .faqBlock b{ font-size:5.3vw; } .faqa .ABMlinkTx a:link{ font-size:4vw; } .faqa .ABMlinkTx{ margin-top:2.1vw; } /* --- �e��n0CSS�0�0�0 --- */ .svgBtnParts{ text-align:center; } .iconTxBtn{ width:80vw; height:14vw; font-size:4.5vw; line-height:14vw; border-radius:14vw; margin:0; } .iconTxBtn .iconbox{ height:13.8vw; padding-left:10vw; background-size:8.8vw auto; } .iconTxBtn .iconbox br{ display:none; } /* --- ̀of}v�0�0�0 --- */ .iconTxBtn2{ width:80vw; height:14vw; font-size:4.5vw; line-height:14vw; border-radius:14vw; margin:0; } .iconTxBtn2 .iconbox{ display:inline-block; height:14vw; padding-left:0; } /* --- �0�0�0�0�0�0�0 --- */ .iconTxBtn2 .iconbox{ display:inline-block; height:14vw; padding-left:0; } .iconbox.icon01{ background-size:8.8vw auto; padding-left:10vw; } .iconbox.icon02{ background-size:8.8vw auto; padding-left:10vw; } .iconbox.icon03{ background-size:10vw auto; padding-left:12.5vw; } .iconbox.icon04{ background-size:6.1vw auto; padding-left:8.5vw; } .iconbox.icon05{ background-size:10vw auto; padding-left:12.5vw; } .iconbox.icon06{ background-size:10vw auto; padding-left:12.5vw; } .iconbox.icon07{ background-size:8vw auto; padding-left:9.8vw; } .iconbox.icon08{ background-size:9.3vw auto; padding-left:11.1vw; } .iconbox.icon09{ background-size:8vw auto; padding-left:9.8vw; } .iconbox.icon10{ background-size:9.3vw auto; padding-left:42px; } .iconbox.icon11{ background-size:8vw auto; padding-left:9.8vw; } .iconbox.icon12{ background-size:6.6vw auto; padding-left:7.5vw; } .iconbox.icon15{ background-size:10vw auto; padding-left:13.3vw; } .btnType1 a{ width:80vw; height:14vw; font-size:4.5vw; line-height:1.2; border-radius:14vw; margin:0; } .cssBtnText{ padding:1em 1.5em; line-height:1.2; font-size:4vw; border-radius:14vw; min-width:70vw; } .bnrImgBtn img{ width:100%; } /* --- yoytube --- */ .YTmovieBlock{ width:100%; min-height:50vw; margin-bottom:10px; } .YTmovieBlock iframe{ width:87vw; height:49vw; margin:0; } /* --- �0�0�0�0�0�0�0�0�0 --- */ .genTable2{ width:auto; min-width:80vw; font-size:4.5vw; margin:0 auto 1em; } .genTable2 th{ padding:3px 5px; text-align:left; /* white-space:nowrap; */ width:auto; /* min-width:100px; max-width:250px; */ overflow:hidden; } .genTable2 td{ padding:3px 5px; width:auto; /* min-width:100px; */ } /* --- �0�0�0�0�0�0�0 --- */ .bnrBox{ padding-bottom:6.4vw; } .imgbnr .imageBlock img{ margin-bottom:2vw; } /* --- �0�0�0�0 --- */ .stfRadius{ border-radius:50%; } .staffPhoto{ width:19.5vw; height:19.5vw; background-color:#FFFAF7; text-align:center; display:flex; align-items: center; } .staffPhoto img{ width:100%; } .RegisteredArticles{ margin-bottom:21vw; } /* --- pagination ��N �--- */ .pagination{ text-align:center; margin:21vw auto; font-size:4vw; } .pagination img{ width:9vw; vertical-align:middle; opacity:0.5; } /* --- ��#��0�0�0�0�0 --- */ .relatedKwd{ margin-bottom:10vw; } .kwdBtns{ display:flex; flex-wrap: wrap; gap: 4vw 4vw; } .kwdBtns li{ margin:0; padding:0; list-style:none; } .kwdBtns li a{ display:block; font-size:3.5vw; font-weight:700; line-height:2; white-space:nowrap; border:1px solid #FDD0B2; border-radius:2em; padding:0 1em; color:#333; opacity:1; transition: 0.3s ease; } .kwdBtns li a:hover{ text-decoration:none; opacity:0.7; transition: 0.3s ease; } /* --- SNS�0�0�0 --- */ .SNSshareBtn{ padding:7vw; } .ttl4sns{ font-size:4.5vw; margin-bottom:6.5vw; } .ttl4sns span { position:relative; font-weight:700; } .ttl4sns span:after { content: ""; position: absolute; top: 2vw; left: -1.3em; width: 4.5vw; height: 3px; background-color: #E67F38; } .ttl4sns span::after { transform: rotate(45deg); } .ttl4sns span:before { content: ""; position: absolute; top: 2vw; right: -1.2em; width: 4.5vw; height: 3px; background-color: #E67F38; } .ttl4sns span::before { transform: rotate(-45deg); } .eachBtns{ display:flex; justify-content: center; gap: 4px 6.4vw; } .eachBtns img{ width:12.8vw; } /* --- ��#���N --- */ .eachRelatedArticle{ } .eachRelatedArticle .each{ margin-bottom:10vw; } .eachRelatedArticle .each a{ display:block; } .eachRelatedArticle .each a:hover{ text-decoration:none; } .eachRelatedArticle .each .raKV{ width:87vw; height:65vw; text-align:center; margin:0 auto; margin-bottom:1.5vw; overflow:hidden; } .raKV img{ max-width:100%; max-height:100%; text-align:center; margin:auto; } .eachRelatedArticle .each .raTtl{ width:100%; display:flex; flex-direction: column-reverse; } .eachRelatedArticle .each .raTtl .ttl{ font-size:4.5vw; font-weight:700; margin-bottom:0; } .eachRelatedArticle .CateDate{ display:flex; justify-content: left; margin-bottom:0.5em;; } .eachRelatedArticle .CateDate .ctg{ font-size:3.5vw; width:50%; } .eachRelatedArticle .CateDate .date{ font-size:3.5vw; width:50%; } }/* SP */