{ color:#222; font-size:18px; font-weight:bold; line-height:1; padding:20px 0 20px 27px; display: block; border-bottom:solid 1px #f39800; background:url(../img/mokuji_arrow.svg) no-repeat 0 center; background-size:16px auto; transition:ease .3s; } .content .channel { padding: 0; } .channel h2 { color: #fff; font-size: 30px; font-weight: bold; line-height: 1; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); text-align: center; padding:25px 20px; background:#e60012; position: relative; overflow: hidden; } .channel h2::before { content:""; display: block; width:102px; height:82px; position: absolute; bottom:-8px; left:104px; background:url(../img/channel_illust_woman.png) no-repeat 0 0; background-size:100% auto; } .channel h2::after { content:""; display: block; width:109px; height:79px; position: absolute; bottom:-5px; right:100px; background:url(../img/channel_illust_man.png) no-repeat 0 0; background-size:100% auto; } .channel .channel_list { padding:32px 36px 56px; background:#008953; position: relative; } .channel .channel_list::before { content:""; display: block; width:24px; height:14px; position: absolute; top:-1px; left:50%; transform: translateX(-50%); background:url(../img/channel_ttl_icon.svg) no-repeat 0 0; background-size:100% auto; } .channel .channel_list ul { display: flex; flex-wrap: wrap; } .channel .channel_list ul li { width:calc(25% - 8px); margin:8px 4px 0; background:#fff; border-radius: 10px; } .channel .channel_list ul li h3 { color:#fff; font-size:14px; font-weight:bold; line-height:1.5; text-align: center; padding:10px 0; border-radius:10px 10px 0 0; background:#f45910; } .channel .channel_list ul li h4 { color:#f45910; font-size:16px; font-weight:bold; line-height:1.5; margin:10px 15px 0; } .channel .channel_list ul li h4 .sub { font-size:12px; letter-spacing:-0.05em; } .channel .channel_list ul li p { font-size:12px; font-weight:bold; line-height:1.5; letter-spacing:-0.01em; margin:10px 15px 0; } .channel .channel_list ul li .details { margin:13px 15px 0; padding:15px 0 20px; border-top:solid 1px #ccc; } .channel .channel_list ul li .details p { font-size:10px; margin:0; letter-spacing:0; } .channel .channel_list ul li .details h6 { color:#006cb8; font-size:12px; font-weight:bold; line-height:1.5; margin:15px 0 0; } .channel .channel_list ul li .details h6:first-child { margin:0; } .channel .channel_list p.chushaku { color:#fff; font-size:12px; line-height:1; text-align:right; margin:20px 0 0; } .content .what, .content .model, .content .tuner, .content .contract, .content .family_pack { padding:0 0 80px; background: #fff; } .content .what h2, .content .model h2, .content .tuner h2, .content .contract h2, .content .family_pack h2 { color: #fff; font-size: 30px; font-weight: bold; line-height: 1.5; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); padding:16px 20px 15px 40px; background:#e60012; position: relative; overflow: hidden; } .content .what h2::before, .content .model h2::before, .content .tuner h2::before, .content .contract h2::before, .content .family_pack h2::before { content:""; display:block; width:50px; height:50px; position:absolute; top:50%; left:0; background:rgba(255,255,255,.3); transform: translateY(-50%) translateX(-50%); border-radius:50%; } .content .what .inner, .content .model .inner, .content .tuner .inner, .content .contract .inner, .content .family_pack .inner { padding:36px 40px 0; } .content .what p, .content .model p, .content .tuner p, .content .contract p, .content .family_pack p { font-size:16px; line-height:1.5; } .content .txtlink { margin:30px 0 0; } .content .txtlink p { text-align:right; line-height:1; } .content .txtlink p + p { margin:20px 0 0; } .content .txtlink p a { color:#f45910; font-size:16px; line-height:1; padding:0 0 0 18px; display:inline-block; background:url(../img/txtlink_arrow.svg) no-repeat 0 center; background-size:12px auto; } .content .what h3, .content .model h3, .content .tuner h3, .content .family_pack h3 { color:#f45910; font-size:26px; font-weight:bold; line-height:1.5; padding:0 0 13px; margin:0 0 40px; border-bottom:solid 2px #f45910; } @media only screen and (max-width:1399px) { } @media only screen and (max-width:768px) { .sp { display:block !important; } .pc { display:none !important; } } @media (hover: hover) { .mokuji ul li a:hover { color:#f45910; text-decoration: underline; } .content .txtlink p a:hover { text-decoration: underline; } }