@charset "UTF-8";
/* ---------------------------------------------------------
$ ネット支店で出来る事
----------------------------------------------------------*/
.about {
/* ---------------------------------------------------------
$ メインビジュアルエリア
----------------------------------------------------------*/
/* ---------------------------------------------------------
$ コンテンツ
----------------------------------------------------------*/ }
.about .mv_wrap {
margin: 26px auto 0;
background: #fff; }
@media only screen and (max-width: 767px) {
.about .mv_wrap {
margin: 0 auto; } }
.about .mv_wrap img {
vertical-align: bottom; }
.about .conte_box {
margin: 0 auto;
background: #fff;
position: relative;
padding: 68px 0 0 0; }
@media only screen and (max-width: 767px) {
.about .conte_box {
padding: 10% 0 0 0;
margin: 0 0 10%; } }
.about .conte_box h2 {
position: absolute;
top: 40px;
left: 50%;
margin: 0 0 0 -220px;
width: 440px; }
@media only screen and (max-width: 767px) {
.about .conte_box h2 {
position: inherit;
width: 91%;
left: auto;
top: auto;
margin: 0 auto; } }
.about .conte_box .full_width {
padding: 60px 0; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width {
padding: 0; } }
.about .conte_box .full_width:nth-child(odd) {
background: #fff8f2; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width:nth-child(odd) {
background: none; } }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner {
margin: 0;
width: 100%; } }
.about .conte_box .full_width .section_inner .one_box {
float: left;
text-align: center;
width: 47.5%; }
.about .conte_box .full_width .section_inner .one_box:nth-child(even) {
float: right; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box {
width: 91%;
padding: 7.5% 4.5% 9.5%;
float: none; }
.about .conte_box .full_width .section_inner .one_box:nth-child(even) {
background: #fff8f2; } }
.about .conte_box .full_width .section_inner .one_box--absolute {
position: relative;
}
.about .conte_box .full_width .section_inner .one_box--absolute::after {
content: "";
position: absolute;
height: 250px;
width: 100%;
background: url("/assets/img/about/index/img_follow_pc.png")no-repeat;
background-size: 100%;
background-position: center;
top: 34%;
right: 0;
z-index: 1;
display: block;
}
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box--absolute::after {
height: 55%;
width: 91%;
background: url("/assets/img/about/index/img_follow_sp.png")no-repeat;
background-size: contain;
background-position: center;
top: 37%;
right: 50%;
transform: translateX(50%);
}
}
.about .conte_box .full_width .section_inner .one_box .icon {
width: 78px;
margin: 0 auto 10px; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .icon {
width: 18%;
margin: 0 auto 2%; } }
.about .conte_box .full_width .section_inner .one_box .title {
font-size: 1.875rem;
font-weight: bold;
line-height: 1.333;
margin: 0 0 1em 0;
letter-spacing: -2px; }
@media only screen and (max-width: 1024px) {
.about .conte_box .full_width .section_inner .one_box .title {
font-size: 1.375rem; } }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .title {
font-size: 1.07rem; } }
.about .conte_box .full_width .section_inner .one_box .title .marker_line {
font-weight: bold;
display: inline;
color: #ea5504; }
.about .conte_box .full_width .section_inner .one_box .txt {
text-align: left;
margin-bottom: 30px;
letter-spacing: -1px; }
.about .conte_box .full_width .section_inner .one_box .txt .attention {
font-size: 0.94rem;
margin-bottom: 8%;
padding-left: -1em;
text-indent: 1em; }
@media only screen and (max-width: 1024px) {
.about .conte_box .full_width .section_inner .one_box .txt {
font-size: 0.94rem; }
.about .conte_box .full_width .section_inner .one_box .txt .attention {
font-size: 0.8125rem; } }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .txt {
margin-bottom: 5%;
font-size: 0.8125rem; }
.about .conte_box .full_width .section_inner .one_box .txt .attention {
font-size: 0.75rem; } }
.about .conte_box .full_width .section_inner .one_box .top_btn {
padding: 0;
margin: 30px auto 0;
text-align: center;
position: relative; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .top_btn {
padding: 0;
margin: 5% auto 0; } }
.about .conte_box .full_width .section_inner .one_box .top_btn a {
background: #5ab153;
border-radius: 10px;
-webkit-box-shadow: 0 4px 10px 1px rgba(130, 178, 216, 0.4);
box-shadow: 0 4px 10px 1px rgba(130, 178, 216, 0.4);
color: #fff;
display: block;
font-weight: 500;
height: 100%;
line-height: 1;
overflow: hidden;
text-decoration: none;
padding: 40px 0 40px;
position: relative;
width: 100%;
pointer-events: none; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a {
-webkit-box-shadow: 0 2px 10px 1px rgba(130, 178, 216, 0.4);
box-shadow: 0 2px 10px 1px rgba(130, 178, 216, 0.4); } }
.about .conte_box .full_width .section_inner .one_box .top_btn a:after {
border-radius: 10px;
-webkit-box-shadow: 0 8px #328a2d;
box-shadow: 0 8px #328a2d;
content: "";
display: block;
height: 20px;
width: 100%;
position: absolute;
bottom: 8px; }
.about .conte_box .full_width .section_inner .one_box .top_btn a:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
padding: 40px 0 40px; }
.about .conte_box .full_width .section_inner .one_box .top_btn a:hover:after {
content: none; }
@media only screen and (max-width: 1024px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a {
background: #5ab153;
border-radius: 10px;
-webkit-box-shadow: 0 4px 10px 1px rgba(130, 178, 216, 0.4);
box-shadow: 0 4px 10px 1px rgba(130, 178, 216, 0.4);
color: #fff;
display: block;
font-weight: 500;
height: 100%;
line-height: 1;
overflow: hidden;
text-decoration: none;
padding: 20px 0 25px;
position: relative;
width: 100%; } }
@media only screen and (max-width: 1024px) and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a {
-webkit-box-shadow: 0 2px 10px 1px rgba(130, 178, 216, 0.4);
box-shadow: 0 2px 10px 1px rgba(130, 178, 216, 0.4); } }
@media only screen and (max-width: 1024px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a:after {
border-radius: 10px;
-webkit-box-shadow: 0 8px #328a2d;
box-shadow: 0 8px #328a2d;
content: "";
display: block;
height: 20px;
width: 100%;
position: absolute;
bottom: 8px; }
.about .conte_box .full_width .section_inner .one_box .top_btn a:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
padding: 25px 0 20px; }
.about .conte_box .full_width .section_inner .one_box .top_btn a:hover:after {
content: none; } }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a {
background: #5ab153;
border-radius: 10px;
-webkit-box-shadow: 0 4px 10px 1px rgba(130, 178, 216, 0.4);
box-shadow: 0 4px 10px 1px rgba(130, 178, 216, 0.4);
color: #fff;
display: block;
font-weight: 500;
height: 100%;
line-height: 1;
overflow: hidden;
text-decoration: none;
padding: 20px 0 25px;
position: relative;
width: 100%; } }
@media only screen and (max-width: 767px) and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a {
-webkit-box-shadow: 0 2px 10px 1px rgba(130, 178, 216, 0.4);
box-shadow: 0 2px 10px 1px rgba(130, 178, 216, 0.4); } }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a:after {
border-radius: 10px;
-webkit-box-shadow: 0 8px #328a2d;
box-shadow: 0 8px #328a2d;
content: "";
display: block;
height: 20px;
width: 100%;
position: absolute;
bottom: 8px; }
.about .conte_box .full_width .section_inner .one_box .top_btn a:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
padding: 25px 0 20px; }
.about .conte_box .full_width .section_inner .one_box .top_btn a:hover:after {
content: none; } }
.about .conte_box .full_width .section_inner .one_box .top_btn:after {
content: '';
width: 10px;
height: 10px;
border: 0px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
position: absolute;
bottom: 70px;
right: calc(50% - 5px); }
.about .conte_box .full_width .section_inner .one_box .top_btn a {
font-size: 1.625rem;
font-weight: normal;
max-width: 452px;
margin: 0 auto; }
@media only screen and (max-width: 1024px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a {
font-size: 1.25rem;
letter-spacing: -1px;
width: 100%; } }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a {
font-size: 1.125rem;
letter-spacing: -1px;
max-width: 100%; } }
.about .conte_box .full_width .section_inner .one_box .top_btn a::after {
left: 0; }
.about .conte_box .full_width .section_inner .one_box .top_btn a:hover {
padding: 40px 0; }
@media only screen and (max-width: 1024px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a:hover {
padding: 20px 0 25px; } }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .top_btn a:hover {
padding: 20px 0 25px; } }
.about .conte_box .full_width .section_inner .one_box .top_btn:after {
display: none; }
.about .conte_box .full_width .section_inner .one_box .image {
width: 100%;
margin: 0 auto; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .image {
width: 100%; } }
.about .conte_box .full_width .section_inner .one_box .image > div {
width: 48%;
text-align: left;
margin: 0 auto; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .image > div {
width: 47%; }
.about .conte_box .full_width .section_inner .one_box .image > div.oneimg {
width: 60%; } }
.about .conte_box .full_width .section_inner .one_box .image > div ul {
margin-top: .3rem; }
.about .conte_box .full_width .section_inner .one_box .image > div ul li {
float: left;
position: relative; }
.about .conte_box .full_width .section_inner .one_box .image > div ul li a {
background: #fff;
color: #333;
display: block;
text-decoration: none;
z-index: -2; }
.about .conte_box .full_width .section_inner .one_box .image > div ul li a:before {
content: '';
width: 7px;
height: 7px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
margin: auto;
left: 29px; }
.about .conte_box .full_width .section_inner .one_box .image > div ul li a:after {
content: '';
width: 26px;
height: 26px;
display: block;
background: #ea5504;
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
margin: auto;
left: 22px; }
.about .conte_box .full_width .section_inner .one_box .image > div ul li:first-child {
margin: 0; }
.about .conte_box .full_width .section_inner .one_box .image > div ul li:after {
content: url(/assets/img/common/icon_target01.png);
position: absolute;
right: 4%;
top: 4%; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .image > div ul li {
float: none;
width: 100% !important;
margin: 0 !important;
border-top: 1px solid #ebebeb; }
.about .conte_box .full_width .section_inner .one_box .image > div ul li a {
padding: 1.3rem 2% 1.3rem 12% !important; }
.about .conte_box .full_width .section_inner .one_box .image > div ul li a:after {
width: 1rem;
height: 1rem;
left: 4%; }
.about .conte_box .full_width .section_inner .one_box .image > div ul li a:before {
width: 4px;
height: 4px;
left: calc(4% + 4px); }
.about .conte_box .full_width .section_inner .one_box .image > div ul li:after {
right: .7rem;
top: .3rem; } }
.about .conte_box .full_width .section_inner .one_box .image > div ul li {
float: none;
padding: 0 0 0 16%;
border: none; }
@media only screen and (max-width: 1024px) {
.about .conte_box .full_width .section_inner .one_box .image > div ul li {
width: auto !important;
padding: 0 0 0 18%; } }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .image > div ul li {
width: auto !important;
padding: 0 0 0 1.5em; } }
.about .conte_box .full_width .section_inner .one_box .image > div ul li a {
font-weight: bold;
line-height: 1.3;
letter-spacing: -1px;
background: none; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .image > div ul li a {
padding: 0 !important; } }
@media only screen and (max-width: 1024px) {
.about .conte_box .full_width .section_inner .one_box .image > div ul li a {
font-size: 0.88rem; } }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .image > div ul li a {
font-size: 0.8125rem; } }
.about .conte_box .full_width .section_inner .one_box .image > div ul li a::after {
left: 0; }
.about .conte_box .full_width .section_inner .one_box .image > div ul li a::before {
left: 7px; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .image > div ul li a::before {
left: 3%; } }
.about .conte_box .full_width .section_inner .one_box .image > div ul li::after {
display: none; }
.about .conte_box .full_width .section_inner .one_box .image > div.sslimg {
background-color: #fff;
text-align: center;
padding: 4.5% 0; }
.about .conte_box .full_width .section_inner .one_box .image > div.sslimg img {
width: auto; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .image > div.sslimg img {
width: 80%; } }
.about .conte_box .full_width .section_inner .one_box .image .single {
min-height: 144px;
width: 100%;
text-align: center; }
.about .conte_box .full_width .section_inner .one_box .image .single img {
max-width: 434px; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width .section_inner .one_box .image .single {
width: 80%; } }
.about .conte_box .full_width .section_inner .one_box .image .left {
float: left; }
.about .conte_box .full_width .section_inner .one_box .image .right {
float: right; }
.about .conte_box .full_width img.square {
max-width: 245px; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width img.square {
max-width: 100%; } }
.about .conte_box .full_width:last-child {
padding: 60px 0 80px; }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width:last-child {
padding: 0; } }
@media only screen and (max-width: 767px) {
.about .conte_box .full_width:last-child .section_inner .one_box:nth-child(2) {
padding-bottom: 20%; } }