Commit 27710949 by Orine Matsui

other.cssのMV周りを統合→会員のみ反映中

parent 79786b2d
...@@ -135,7 +135,6 @@ ...@@ -135,7 +135,6 @@
<?php } ?> <?php } ?>
<?php if($pageid == "other" || $pageid == "faq" || $pageid == "marc" || $pageid == "privacy" || $pageid == "policy" || $pageid == "member" || $pageid == "trademark" || $pageid == "sitemap" || $pageid == "business_partner") { ?> <?php if($pageid == "other" || $pageid == "faq" || $pageid == "marc" || $pageid == "privacy" || $pageid == "policy" || $pageid == "member" || $pageid == "trademark" || $pageid == "sitemap" || $pageid == "business_partner") { ?>
<link rel="stylesheet" href="/common_previous/css/trainer.css">
<link rel="stylesheet" href="/common_previous/css/other.css"> <link rel="stylesheet" href="/common_previous/css/other.css">
<?php } ?> <?php } ?>
......
...@@ -15,6 +15,120 @@ other.css ...@@ -15,6 +15,120 @@ other.css
/* ======================================== /* ========================================
common parts common parts
======================================== */ ======================================== */
@media screen and (min-width: 768px) {
.sp-only {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.pc-only {
display: none !important;
}
}
body {
min-width: 1250px;
}
@media screen and (max-width: 767px) {
body {
min-width: 320px;
}
}
.container {
width: 1200px;
margin: 0 auto;
*zoom: 1;
}
.container:after {
display: block;
content: '';
clear: both;
}
@media screen and (max-width: 767px) {
.container {
width: 100%;
padding: 0 15px;
}
}
.side {
width: 270px;
float: left;
border-bottom: 2px solid #dbdbdb;
}
.side__mainttl {
background: #212121;
font-size: 1.8rem;
line-height: 1.6;
color: #fff;
font-weight: bold;
padding: 19px 10px 15px;
}
.side__subttl {
background: #dbdbdb;
font-size: 1.6rem;
line-height: 1.75;
color: #363636;
padding: 13px 31px 8px;
}
.side__item {
border-left: 2px solid #dbdbdb;
border-right: 2px solid #dbdbdb;
border-top: 1px solid #dbdbdb;
background: #fff;
}
.side__txt {
display: block;
font-size: 1.6rem;
line-height: 1.75;
color: #363636;
padding: 14px 29px 9px;
position: relative;
}
.side__txt::before {
content: '';
width: 8px;
height: 8px;
border-top: 1px solid #881616;
border-right: 1px solid #881616;
position: absolute;
top: 50%;
left: 7px;
-webkit-transform: rotate(45deg) translate(0, -50%);
transform: rotate(45deg) translate(0, -50%);
}
.side__list2 li {
padding-left: 20px;
}
.side__list2 li.active {
background: #dbdbdb;
}
.content {
width: 900px;
float: right;
}
@media screen and (max-width: 767px) {
.content {
width: 100%;
float: none;
}
}
/* /*
.c-breadcrumb { .c-breadcrumb {
background: transparent; background: transparent;
...@@ -107,6 +221,325 @@ other.css ...@@ -107,6 +221,325 @@ other.css
} }
*/ */
.c-btn1 {
width: 188px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.c-btn1 {
width: 175px;
}
}
.c-btn1__txt {
text-align: center;
background: #263f6c;
display: block;
font-size: 1.4rem;
line-height: 1.2;
color: #fff;
font-weight: bold;
padding: 23px 5px;
}
@media screen and (max-width: 767px) {
.c-btn1__txt {
padding: 22px 5px;
}
}
.c-title1 {
font-size: 3.6rem;
line-height: 1;
color: #363636;
font-weight: bold;
border-bottom: 2px solid #dbdbdb;
padding: 0 0 9px;
}
@media screen and (max-width: 767px) {
.c-title1 {
font-size: 2.4rem;
padding: 0 0 6px;
}
}
.c-list1__item {
font-size: 1.6rem;
line-height: 1.5;
color: #363636;
position: relative;
padding-left: 16px;
margin: 0 0 8px;
}
@media screen and (max-width: 767px) {
.c-list1__item {
padding-left: 10px;
margin: 0 0 1px;
}
}
.c-list1__item::before {
content: '';
width: 6px;
height: 6px;
background: #263f6c;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
}
@media screen and (max-width: 767px) {
.c-list1__item::before {
top: 8px;
left: -2px;
}
}
.c-list2 {
counter-reset: item;
}
.c-list2__item {
font-size: 2rem;
line-height: 1.4;
color: #363636;
position: relative;
padding-left: 23px;
text-indent: -23px;
margin: 0 0 12px;
}
@media screen and (max-width: 767px) {
.c-list2__item {
font-size: 1.6rem;
line-height: 1.25;
padding-left: 15px;
text-indent: -18px;
margin: 0 0 14px;
}
}
.c-list2__item::before {
content: counter(item, decimal) '.';
counter-increment: item;
margin: 0 3px 0 0;
}
.c-list2 .c-list1 {
margin: 6px 0 0;
}
@media screen and (max-width: 767px) {
.c-list2 .c-list1 {
margin: 2px 0 0;
}
}
.c-list2 .c-list1__item {
padding-left: 36px;
}
@media screen and (max-width: 767px) {
.c-list2 .c-list1__item {
padding-left: 33px;
}
}
.c-list2 .c-list1__item::before {
top: 9px;
left: -3px;
}
@media screen and (max-width: 767px) {
.c-list2 .c-list1__item::before {
left: 3px;
}
}
.c-list3 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.c-list3__item {
width: 436px;
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
margin: 0 0 28px 28px;
-webkit-box-shadow: 0 2px 12px 0 #eeeeee;
box-shadow: 0 2px 12px 0 #eeeeee;
}
@media screen and (max-width: 767px) {
.c-list3__item {
width: 100%;
border-radius: 5px;
margin: 0 0 28px;
}
}
.c-list3__item:nth-child(2n + 1) {
margin: 0 0 28px;
}
.c-list3__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 17px 12px 19px 4px;
}
@media screen and (max-width: 767px) {
.c-list3__inner {
padding: 13px;
}
}
.c-list3__img {
width: 142px;
margin: 2px 0 0;
}
@media screen and (max-width: 767px) {
.c-list3__img {
width: 45%;
margin: 1px 0 0;
}
}
.c-list3__info {
width: calc(100% - 142px);
}
@media screen and (max-width: 767px) {
.c-list3__info {
width: 51%;
}
}
.c-list3__ttl {
font-size: 2rem;
line-height: 1.24;
color: #363636;
font-weight: bold;
position: relative;
padding-left: 23px;
}
@media screen and (max-width: 767px) {
.c-list3__ttl {
font-size: 1.6rem;
padding-left: 17px;
}
}
.c-list3__ttl::before {
content: '';
width: 8px;
height: 8px;
border-top: 1px solid #881616;
border-right: 1px solid #881616;
position: absolute;
top: 10px;
left: 0;
-webkit-transform: rotate(45deg) translate(0, -50%);
transform: rotate(45deg) translate(0, -50%);
}
@media screen and (max-width: 767px) {
.c-list3__ttl::before {
left: -6px;
}
}
.c-list3__txt {
font-size: 1.6rem;
line-height: 1.5;
color: #363636;
margin: 7px 0 0;
}
@media screen and (max-width: 767px) {
.c-list3__txt {
margin: 10px 0 0;
}
}
.c-list4__item {
margin: 0 0 5px;
}
@media screen and (max-width: 767px) {
.c-list4__item {
margin: 0 0 11px;
}
}
.c-list4__txt {
font-size: 1.6rem;
line-height: 1.5;
color: #363636;
position: relative;
padding-left: 14px;
}
.c-list4__txt::before {
content: '';
width: 7px;
height: 7px;
border-top: 2px solid #2a436f;
border-right: 2px solid #2a436f;
position: absolute;
top: 10px;
left: -6px;
-webkit-transform: rotate(45deg) translate(0, -50%);
transform: rotate(45deg) translate(0, -50%);
}
/* ========================================
c-mainvisual
======================================== */
.p-other-mv {
background: url("/assets/img/other/mv-img.jpg") no-repeat top center;
background-size: cover;
height: 300px;
align-items: center;
margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
.p-other-mv {
background: url("/assets/img/other/mv-img.jpg") no-repeat top left -200px;
margin-bottom: 20px;
height: 142px;
}
}
.c-mainvisual__ttl {
font-size: 3.6rem;
line-height: 1.35;
padding-top: 24px;
}
@media screen and (max-width: 767px) {
.c-mainvisual__ttl {
font-size: 2rem;
padding: 0 20px;
}
}
/* ======================================== /* ========================================
.page-other .page-other
======================================== */ ======================================== */
......
...@@ -3,64 +3,35 @@ ...@@ -3,64 +3,35 @@
<?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/include/header.php'); ?> <?php include($_SERVER['DOCUMENT_ROOT'] . '/assets/include/header.php'); ?>
<div class="page-other p-other"> <div class="page-other p-other">
<section class="c-mainvisual">
<div class="c-breadcrumb pc-only"> <div class="c-breadcrumb pc-only">
<ul class="c-breadcrumb__inner"> <ul class="c-breadcrumb__inner">
<li class="c-breadcrumb__item"> <li class="c-breadcrumb__item">
<a href="/"><span>TOP</span></a> <a href="/"><span>TOP</span></a>
</li> </li>
<li class="c-breadcrumb__item"> <li class="c-breadcrumb__item">
<span>アチーブメントクラブ会員のご案内</span> <span>アチーブメントクラブ会員のご案内</span>
</li> </li>
</ul> </ul>
</div> </div>
<section class="c-mainvisual p-other-mv">
<div class="c-mainvisual__inner">
<div class="p-other-mv"> <h2 class="c-mainvisual__ttl">アチーブメントクラブ会員のご案内</h2>
<h2 class="p-other-mv-ttl">アチーブメントクラブ会員のご案内</h2>
</div> </div>
</section> </section>
<div class="container"> <div class="container">
<aside class="side pc-only"> <aside class="side pc-only">
<div class="side__box"> <div class="side__box">
<p class="side__subttl">アチーブメントクラブ会員のご案内</p> <p class="side__subttl">アチーブメントクラブ会員のご案内</p>
<ul class="side__list"> <ul class="side__list">
<li class="side__item"> <li class="side__item">
<a class="side__txt" href="/marc/">会員サイトMARC(マーク)</a> <a class="side__txt" href="/marc/">会員サイトMARC(マーク)</a>
</li> </li>
<li class="side__item"> <li class="side__item">
<a class="side__txt" href="/business_partner/">月刊ビジネスパートナー</a> <a class="side__txt" href="/business_partner/">月刊ビジネスパートナー</a>
</li> </li>
</ul> </ul>
</div> </div>
</aside> </aside>
<main class="content"> <main class="content">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment