.br {
display:block;
}
#sequence {
background: #fff;
padding:150px 0 0 0;
overflow: hidden;
}
#sequence .inner {
max-width: 1140px;
/* text-align: center; */
display: block;
padding: 0;
margin: auto;
/* font-family: "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro", "Meiryo","メイリオ",sans-serif; */
}
#sequence .image {
margin: 0 auto 0;
display: block;
}
#sequence h4 {
font-family: 'Gilda Display', serif;
font-size: 2.8em;
letter-spacing: 2px;
text-align: center;
line-height: 1.8em;
padding: 20px 0 30px 0;
font-weight: 400;
}
#sequence h5 {
font-family: 'Gilda Display', serif;
font-size: 2.2em;
letter-spacing: 2px;
text-align: center;
line-height: 1.3em;
padding: 20px 0 30px 0;
font-weight: bold;
}
/*--------------*/
/*スタイル（共通）
/*--------------*/
#sequence .style {
margin: -2px 0 0 0;
}
#sequence .style_inner {
padding: 30px 40px 60px;
box-sizing: border-box;
background: #fff;
border-radius: 10px;
border: 2px solid #dcebd6;
}
#sequence .style ul {
margin: 30px 0 0 0;
overflow: hidden;
}
#sequence .style li{
width: 30%;
float: left;
margin: 0 10px 0 0;
padding: 0;
}
#sequence .style li img {
width: 100%;
}
#sequence .style li:last-child {
margin: 0;
}
#sequence .style li span{
font-family: 'Gilda Display', serif;
text-align: center;
font-size: 1.2em;
display: block;
padding: 0 0 10px 0;
letter-spacing: 1px;
}
/*--------------*/
/*見出ã—
/*--------------*/
#sequence .midashi {
font-family: 'Gilda Display', serif;
padding: 50px 0 40px;
/* background: #ffeac3; */
}
#sequence .midashi dl{
width: 35%;
margin: 0 auto 20px;
border-bottom: 1px solid #000;
padding: 0;
text-align: center;
}
#sequence .midashi dt {
font-size: 1.2em;
letter-spacing: 2px;
font-weight: 500;
}
#sequence .midashi dd {
font-size: 2.5em;
letter-spacing: 2px;
}
#sequence .midashi span {
font-size: 1.1em;
letter-spacing: 2px;
display: block;
line-height: 1.8;
text-align: center;
}
#sequence .text {
margin: auto;
display: block;
padding: 20px 0 10px;
}
/*--------------*/
/*メリット
/*--------------*/
#sequence section#merit {
margin: auto;
padding: 30px 40px 30px;
box-sizing: border-box;
border-radius: 3px 3px 0 0;
/* box-shadow: 0 0px 2px #999999;
-moz-box-shadow: 0 0px 2px #999999;
/* -webkit-box-shadow: 0 0px 2px #999999; */
max-width: 1140px;
position: relative;
overflow: hidden;
border-bottom: none;
background: url(../img/feature/sequence/bg02.jpg) repeat;
}
#sequence section#before:before {
content: "";
width: 0;
display: none;
height: 0;
border-style: solid;
border-width:40px 50px 0 50px;
border-color: #fff transparent transparent transparent;
top: -2%;
position: absolute;
z-index: 1000;
left: 0;
right: 0;
margin: auto;
}
#sequence section#merit .left {
/* border: 2px solid #dcebd6; */
/* background: #fff; */
padding: 0;
/* max-width: 1000px; */
margin: auto;
overflow: hidden;
border-left: none;
border-right: none;
border-top: none;
}
#sequence section#merit .left p {
/* background: #000; */
color: #fff;
padding: 10px;
box-sizing: border-box;
font-family: 'Gilda Display', serif;
font-size: 2em;
text-align: center;
}
#sequence section#merit .left ul {
/* width: 113%; */
margin: 30px 0;
}
#sequence section#merit .left li {
line-height: 2;
font-size: 1.1em;
font-family: 'Gilda Display', serif;
width: 22%;
height: 230px;
margin: 0 30px 0 0;
background: #fff;
border-radius: 5px;
display: inline-block;
vertical-align: top;
letter-spacing: 1px;
box-sizing: border-box;
/* font-weight: 500; */
/* font-family: 'Gilda Display', serif; */
/* background: url(../img/feature/sequence/sun.jpg) no-repeat left; */
text-align: center;
padding: 30px 30px 30px;
}
#sequence section#merit .left li:last-child {
margin:0;
}
#sequence section#merit .left li dt {
font-weight: bold;
font-size: 2em;
font-family: 'Gilda Display', serif;
border-bottom: 2px solid #20836f;
display: inline-block;
margin: 0 0 20px 0;
line-height: 1.5em;
color: #20836f;
}
#sequence section#merit .left li dd {
font-size: 0.9em;
line-height: 1.8;
font-family: 'Gilda Display', serif;
font-weight: 500;
}
#sequence section#merit .left span {
/* background: url(../img/feature/sequence/maker.jpg) no-repeat bottom; */
/* padding: 0 0 5px 0; */
/* background-size: 140%; */
}
#sequence .right {
max-width: 700px;
margin: 70px auto 0;
}
#sequence .right ul {
width: auto;
float: none;
margin: 0;
}
#sequence .right li {
font-family: 'Gilda Display', serif;
font-size: 1em;
width: 49%;
text-align: left;
letter-spacing: 1px;
display: inline-block;
vertical-align: middle;
line-height: 2.2;
font-weight: 500;
background: none;
padding: 0;
margin: 0;
}
#sequence .right li img {
margin:auto;
display:block;
}
/*--------------*/
/*ビフォー
/*--------------*/
#sequence section#before {
/* background: #f2f7f0; */
padding: 100px 50px 0;
z-index: 0;
position: relative;
margin: auto;
box-sizing: border-box;
}
/*careful
/*--------------*/
#sequence section#before .careful {
border: 2px solid #e53e3e;
border-radius: 5px;
padding: 20px 30px 20px 25px;
background: #fff;
box-sizing: border-box;
width: 70%;
margin: -40px auto 20px;
}
#sequence section#before .careful span {
color: #e53e3e;
/* font-weight: bold; */
letter-spacing: 1px;
display: inline-block;
vertical-align: top;
line-height: 2;
background: url(../img/feature/sequence/careful.jpg) no-repeat;
font-size: 1.2em;
padding: 0 0 0 50px;
background-size: 35px;
margin: 0 30px 12px 0;
}
#sequence section#before .careful span:last-child {
margin: 0;
}
/*--------------*/
/*アフター
/*--------------*/
#sequence section#after {
max-width: 1140px;
margin: auto;
padding: 80px 0 0;
box-sizing: border-box;
position: relative;
}
#sequence section#after:before {
/* content: ""; */
width: 0;
height: 0;
border-style: solid;
border-width:20px 20px 0 20px;
border-color: #f3efe7 transparent transparent transparent;
top: -2%;
position: absolute;
z-index: 1000;
left: 0;
right: 0;
margin: auto;
}
/*--------------*/
/*ãƒã‚¤ãƒ³ãƒˆ
/*--------------*/
#sequence section#point {
overflow: hidden;
padding: 0;
/* background: url(../img/feature/sequence/bg02.jpg) no-repeat; */
/* background: #f2f7f0; */
}
#sequence section#point .point_midashi {
background: url(../img/feature/sequence/midashi01.jpg) no-repeat;
text-align: center;
padding: 50px 0;
}
#sequence section#point .pointBox {
margin: 50px auto 0;
text-align: center;
padding: 50px 0 0 0;
position: relative;
z-index: 0;
background: #fff;
/* border: 10px solid #eee; */
}
#sequence section#point .pointBox img {
/* padding: 20px; */
margin: auto;
background: #fff;
/* border: 10px solid #eee; */
}
#sequence section#point .pointBox dl#p1 {
position: absolute;
top: 15%;
right: 5%;
/* width: 350px; */
}
#sequence section#point .pointBox dl#p1 dt:before {
content:"";
/* background: #000; */
position: absolute;
left: -80%;
width: 100%;
height: 1px;
top: 0;
bottom: 0;
border: 1px dashed #000;
border-top: none;
border-left: none;
margin: auto;
}
#sequence section#point .pointBox dl#p2 {
position: absolute;
bottom: 20%;
right: 5%;
}
#sequence section#point .pointBox dl#p2 dt:before {
content:"";
position: absolute;
left: -30%;
width: 100%;
height: 1px;
top: 0;
bottom: 0;
border: 1px dashed #000;
border-top: none;
border-left: none;
margin: auto;
}
#sequence section#point .pointBox dl#p3 {
position: absolute;
bottom: 20%;
left: 5%;
}
#sequence section#point .pointBox dl#p3 dt:before {
content:"";
position: absolute;
right: -46%;
width: 100%;
height: 1px;
top: 0;
bottom: 0;
border: 1px dashed #000;
border-top: none;
border-left: none;
border-right: none;
margin: auto;
}
#sequence section#point .pointBox dl {
text-align: center;
border: 1px solid #000;
width: 350px;
border-radius: 5px;
}
#sequence section#point .pointBox dt {
background: #000;
color: #fff;
position: relative;
font-family: 'Lustria', serif;
letter-spacing: 2px;
border-radius: 5px 5px 0 0;
padding: 5px 0;
}
#sequence section#point .pointBox dd {
padding: 15px;
font-weight: bold;
font-size: 1.1em;
text-align: center;
}
/*--------------*/
/*ã•ã‚‰ã«
/*--------------*/
#sequence section#up {padding: 0 0 80px 0;/* background: #146d57; */margin: 80px 0 0 0;}
#sequence section#up span {
font-family: 'Gilda Display', serif;
display: block;
text-align: center;
letter-spacing: 2px;
margin: 0 0 10px 0;
font-size: 1.2em;
color: #222;
}
#sequence section#up .high_midashi {overflow: hidden;background: #f2f7f0;padding: 10px 0 50px 0;}
#sequence section#up .highlight {
/* border: 2px solid #333; */
max-width: 1140px;
margin: -40px auto 0;
box-sizing: border-box;
padding: 2px;
background: #fff;
}
#sequence section#up .highlight_inner {
/* border: 1px dashed #000; */
padding: 50px 0 0;
box-sizing: border-box;
text-align: center;
}
#sequence section#up .highlight_ttl {
font-family: 'Gilda Display', serif;
font-size: 2.5em;
letter-spacing: 1px;
border-bottom: 2px solid #20836f;
display: inline-block;
line-height: 1.2;
margin: 20px 0;
color: #20836f;
}
#sequence section#up .highlight ul {
padding: 20px 0 0 0;
}
#sequence .highlight li {
width: 32%;
display: inline-block;
vertical-align: top;
margin: 0 15px 33px 0;
}
#sequence .highlight li img {
width: 100%;
}
#sequence .highlight li:nth-child(3) {
margin: 0;
}
#sequence .highlight li:nth-child(4) {
width: 50%;
}
#sequence .highlight li:nth-child(5) {
width: 48%;
margin:0;
}
#sequence .recommend {
border: 2px solid #dcebd6;
padding: 0 30px 10px;
box-sizing: border-box;
max-width: 1080px;
margin: 50px auto 0;
border-radius: 5px;
overflow: hidden;
background: #fff;
}
#sequence .recommend ul {
padding: 10px 0 0 0;
}
#sequence .recommend li {
background: url(../img/feature/sequence/check.png) no-repeat;
padding: 3px 0 30px 35px;
margin: 0;
font-size: 1.1em;
display: inline-block;
letter-spacing: 1px;
vertical-align: top;
width: 46%;
background-size: 30px;
}
#btnBox{
padding-top: 30px;
margin: 50px 0 0 0;
text-align: center;
padding: 0 0 50px 0;
border:none;
}
#btnBox>a{
border: 1px solid #ccc;
background: #fff;
text-decoration:none;
display: inline-block;
padding: 15px 0;
width:275px;
font-size:0.9em;
text-align: center;
margin:0 auto 10px;
color: #666;
}
#btnBox>a:hover{
border:1px solid #999;
}
@media screen and (max-width: 1499px){
#sequence .inner {
max-width: 900px;
}
/*--------------*/
/*スタイル（共通）
/*--------------*/
#sequence .style {
margin: -2px 0 0 0;
}
#sequence .style li{
width: 31%;
margin: 0 20px 0 0;
}
#sequence .style li img {
width: 100%;
}
#sequence .style li:last-child {
margin: 0;
}
/*--------------*/
/*見出ã—
/*--------------*/
#sequence .midashi dl{
width: 60%;
}
#sequence .midashi span {
font-size: 1em;
}
/*--------------*/
/*メリット
/*--------------*/
#sequence section#merit {
padding: 20px 20px 20px;
max-width: 100%;
}
#sequence section#merit .left p {padding: 10px 0 0 0;}
#sequence section#merit .left ul {
margin: 20px 0;
}
#sequence section#merit .left li {
margin: 0 20px 0 0;
padding: 20px;
width: 23%;
height: 200px;
}
#sequence section#merit .left li dt {font-size: 1.8em;}
#sequence section#merit .left li dd {font-size: 0.95em;}
#sequence .right {
margin: 20px auto 0;
}
#sequence .right ul {
width: auto;
float: none;
margin: 0;
}
#sequence .right li {
font-size: 1em;
}
/*--------------*/
/*ビフォー
/*--------------*/
#sequence section#before {
padding: 100px 20px 0;
}
/*careful
/*--------------*/
#sequence section#before .careful {
width: 90%;
}
#sequence section#before .careful span {
font-size: 1em;
}
#sequence section#before .careful span:last-child {
margin: 0;
}
/*--------------*/
/*アフター
/*--------------*/
#sequence section#after {
max-width: 100%;
padding: 80px 20px 0;
}
/*--------------*/
/*ãƒã‚¤ãƒ³ãƒˆ
/*--------------*/
#sequence section#point {
overflow: hidden;
padding: 0;
}
#sequence section#point .point_midashi {
background: url(../img/feature/sequence/midashi01.jpg) no-repeat;
text-align: center;
padding: 50px 0;
}
#sequence section#point .pointBox {
margin: 50px auto 0;
text-align: center;
padding: 50px 0 0 0;
position: relative;
z-index: 0;
background: #fff;
}
#sequence section#point .pointBox img {
margin: auto;
background: #fff;
}
#sequence section#point .pointBox dl {
text-align: center;
border: 1px solid #000;
width: 350px;
border-radius: 5px;
}
#sequence section#point .pointBox dt {
background: #000;
color: #fff;
position: relative;
font-family: 'Lustria', serif;
letter-spacing: 2px;
border-radius: 5px 5px 0 0;
padding: 5px 0;
}
#sequence section#point .pointBox dd {
padding: 15px;
font-weight: bold;
font-size: 1.1em;
text-align: center;
}
/*--------------*/
/*ã•ã‚‰ã«
/*--------------*/
#sequence section#up .highlight {
max-width: 100%;
}
#sequence section#up .highlight_inner {padding: 30px 0 0;}
#sequence section#up .highlight ul {padding: 20px;}
#sequence .highlight li {
width: 32%;
margin: 0 15px 20px 0;
}
#sequence .highlight li img {
width: 100%;
}
#sequence .recommend {
padding: 0 20px 10px;
max-width: 70%;
}
#sequence .recommend li {
font-size: 1em;
width: 100%;
}
}
@media screen and (max-width: 1023px){
#sequence {
}
#sequence .inner {
max-width: 1280px;
/* text-align: center; */
display: block;
padding: 0;
margin: auto;
/* font-family: "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro", "Meiryo","メイリオ",sans-serif; */
}
#sequence .image {
width: 200px;
}
#sequence h4 {
font-family: 'Gilda Display', serif;
font-size: 2.8em;
letter-spacing: 2px;
text-align: center;
line-height: 1.8em;
padding: 20px 0 30px 0;
font-weight: 400;
}
#sequence h5 {
font-family: 'Gilda Display', serif;
font-size: 2.2em;
letter-spacing: 2px;
text-align: center;
line-height: 1.3em;
padding: 20px 0 30px 0;
font-weight: bold;
}
/*--------------*/
/*スタイル（共通）
/*--------------*/
#sequence .style {
margin: -2px 0 0 0;
}
#sequence .style_inner {
padding: 30px 15px 60px;
}
#sequence .style ul {}
#sequence .style li{margin: 0 3px 0;width: 32%;}
#sequence .style li img {
width: 100%;
}
#sequence .style li:last-child {
margin: 0;
}
#sequence .style li span{
font-size: 1em;
padding: 0 0 5px 0;
}
/*--------------*/
/*見出ã—
/*--------------*/
#sequence .midashi {
}
#sequence .midashi dl{width: 90%;}
#sequence .midashi dt {font-size: 1em;}
#sequence .midashi dd {
font-size: 2em;
}
#sequence .midashi span {
font-size: 0.9em;
}
#sequence .text {width: 400px;}
/*--------------*/
/*メリット
/*--------------*/
#sequence section#merit {
/* box-shadow: 0 0px 2px #999999;
-moz-box-shadow: 0 0px 2px #999999;
/* -webkit-box-shadow: 0 0px 2px #999999; */
padding: 20px 10px;
}
#sequence section#before:before {
content: "";
width: 0;
display: none;
height: 0;
border-style: solid;
border-width:40px 50px 0 50px;
border-color: #fff transparent transparent transparent;
top: -2%;
position: absolute;
z-index: 1000;
left: 0;
right: 0;
margin: auto;
}
#sequence section#merit .left {
}
#sequence section#merit .left p {
}
#sequence section#merit .left ul {
}
#sequence section#merit .left li {padding: 10px;height: 150px;margin: 0 12px 0 0;}
#sequence section#merit .left li:last-child {
margin:0;
}
#sequence section#merit .left li dl {
}
#sequence section#merit .left li dt {
font-size: 1.3em;
}
#sequence section#merit .left li dd {
font-size: 0.8em;
line-height: 1.5;
letter-spacing: 0;
}
#sequence section#merit .left span {
/* background: url(../img/feature/sequence/maker.jpg) no-repeat bottom; */
/* padding: 0 0 5px 0; */
/* background-size: 140%; */
}
#sequence .right {
max-width: 80%;
}
#sequence .right ul {
width: auto;
float: none;
margin: 0;
}
#sequence .right li {
font-size: 0.9em;
}
#sequence .right li img {
}
/*--------------*/
/*ビフォー
/*--------------*/
#sequence section#before {
}
/*careful
/*--------------*/
#sequence section#before .careful {padding: 10px 30px;}
#sequence section#before .careful span {
font-size: 1em;
margin: 0 0 12px 0;
}
#sequence section#before .careful span:last-child {
margin: 0;
}
/*--------------*/
/*アフター
/*--------------*/
#sequence section#after {
}
#sequence section#after:before {
/* content: ""; */
width: 0;
height: 0;
border-style: solid;
border-width:20px 20px 0 20px;
border-color: #f3efe7 transparent transparent transparent;
top: -2%;
position: absolute;
z-index: 1000;
left: 0;
right: 0;
margin: auto;
}
/*--------------*/
/*ãƒã‚¤ãƒ³ãƒˆ
/*--------------*/
#sequence section#point {
overflow: hidden;
padding: 0;
/* background: url(../img/feature/sequence/bg02.jpg) no-repeat; */
/* background: #f2f7f0; */
}
#sequence section#point .point_midashi {
background: url(../img/feature/sequence/midashi01.jpg) no-repeat;
text-align: center;
padding: 50px 0;
}
#sequence section#point .pointBox {
margin: 50px auto 0;
text-align: center;
padding: 50px 0 0 0;
position: relative;
z-index: 0;
background: #fff;
/* border: 10px solid #eee; */
}
#sequence section#point .pointBox img {
/* padding: 20px; */
margin: auto;
background: #fff;
/* border: 10px solid #eee; */
}
#sequence section#point .pointBox dl#p1 {
position: absolute;
top: 15%;
right: 5%;
/* width: 350px; */
}
#sequence section#point .pointBox dl#p1 dt:before {
content:"";
/* background: #000; */
position: absolute;
left: -80%;
width: 100%;
height: 1px;
top: 0;
bottom: 0;
border: 1px dashed #000;
border-top: none;
border-left: none;
margin: auto;
}
#sequence section#point .pointBox dl#p2 {
position: absolute;
bottom: 20%;
right: 5%;
}
#sequence section#point .pointBox dl#p2 dt:before {
content:"";
position: absolute;
left: -30%;
width: 100%;
height: 1px;
top: 0;
bottom: 0;
border: 1px dashed #000;
border-top: none;
border-left: none;
margin: auto;
}
#sequence section#point .pointBox dl#p3 {
position: absolute;
bottom: 20%;
left: 5%;
}
#sequence section#point .pointBox dl#p3 dt:before {
content:"";
position: absolute;
right: -46%;
width: 100%;
height: 1px;
top: 0;
bottom: 0;
border: 1px dashed #000;
border-top: none;
border-left: none;
border-right: none;
margin: auto;
}
#sequence section#point .pointBox dl {
text-align: center;
border: 1px solid #000;
width: 350px;
border-radius: 5px;
}
#sequence section#point .pointBox dt {
background: #000;
color: #fff;
position: relative;
font-family: 'Lustria', serif;
letter-spacing: 2px;
border-radius: 5px 5px 0 0;
padding: 5px 0;
}
#sequence section#point .pointBox dd {
padding: 15px;
font-weight: bold;
font-size: 1.1em;
text-align: center;
}
/*--------------*/
/*ã•ã‚‰ã«
/*--------------*/
#sequence section#up {padding: 0 0 80px 0;/* background: #146d57; */margin: 80px 0 0 0;}
#sequence section#up span {font-size: 1em;}
#sequence section#up .high_midashi {overflow: hidden;background: #f2f7f0;padding: 10px 0 50px 0;}
#sequence section#up .highlight {
/* border: 2px solid #333; */
max-width: 1280px;
margin: -40px auto 0;
box-sizing: border-box;
padding: 2px;
background: #fff;
}
#sequence section#up .highlight_inner {
}
#sequence section#up .highlight_ttl {
font-size: 1.8em;
}
#sequence section#up .highlight ul {
padding: 20px 0 0 0;
}
#sequence .highlight li {
}
#sequence .highlight li img {
width: 100%;
}
#sequence .highlight li:nth-child(3) {
margin: 0;
}
#sequence .highlight li:nth-child(4) {
width: 48%;
}
#sequence .highlight li:nth-child(5) {
width: 48%;
margin:0;
}
#sequence .recommend {
}
#sequence .recommend ul {
}
#sequence .recommend li {font-size: 0.9em;}
}
@media screen and (max-width: 767px){
.br {
display: none;
}
#sequence {
padding:80px 0 0 0;
}
#sequence .image {
margin: 0 auto 0;
display: block;
width: 180px;
}
/*--------------*/
/*スタイル（共通）
/*--------------*/
#sequence .style {
margin: -2px 0 0 0;
}
#sequence .style_inner {
padding: 20px 10px 20px;
}
#sequence .style ul {
width: 80%;
margin: 30px auto 0;
text-align: center;
}
#sequence .style ul.slick-dots {
position: relative;
left: 0;
bottom: 0;
padding: 10px 0 10px;
}
#sequence .style ul.slick-dots li {width: auto;margin: 5px;display: inline-block;float: none;}
#sequence .style li{
width: 80%;
float: left;
padding: 0;
margin: auto;
display: block;
}
#sequence .style li img {
width: auto;
}
#sequence .style li span{
font-family: 'Gilda Display', serif;
text-align: center;
font-size: 1.2em;
display: block;
padding: 0 0 10px 0;
letter-spacing: 1px;
}
/*--------------*/
/*見出ã—
/*--------------*/
#sequence .midashi {padding: 20px 0;}
#sequence .midashi dl{width: auto;padding: 0 0 10px 0;}
#sequence .midashi dt {
font-size: 0.75em;
letter-spacing: 0;
}
#sequence .midashi dd {
letter-spacing: 1px;
font-size: 1.3em;
}
#sequence .midashi span {
font-size: 0.8em;
width: 80%;
margin: auto;
line-height: 2;
}
#sequence .text {width: auto;}
/*--------------*/
/*メリット
/*--------------*/
#sequence section#merit {
/* box-shadow: 0 0px 2px #999999;
-moz-box-shadow: 0 0px 2px #999999;
/* -webkit-box-shadow: 0 0px 2px #999999; */
}
#sequence section#before:before {
content: "";
width: 0;
display: none;
height: 0;
border-style: solid;
border-width:40px 50px 0 50px;
border-color: #fff transparent transparent transparent;
top: -2%;
position: absolute;
z-index: 1000;
left: 0;
right: 0;
margin: auto;
}
#sequence section#merit .left {
}
#sequence section#merit .left p {
padding: 0;
font-size: 1.2em;
letter-spacing: 1px;
}
#sequence section#merit .left ul {
}
#sequence section#merit .left li {
width: 100%;
height: auto;
margin: 0 0 8px 0;
padding: 5px;
}
#sequence section#merit .left li:last-child {
margin:0;
}
#sequence section#merit .left li dl {
}
#sequence section#merit .left li dt {
float: left;
width: 15%;
border: none;
margin: 15px 0;
}
#sequence section#merit .left li dd {
float: right;
width: 82%;
font-size: 0.85em;
text-align: left;
letter-spacing: 1px;
line-height: 1.6;
padding: 12px 0 0 0;
}
#sequence section#merit .left span {
/* background: url(../img/feature/sequence/maker.jpg) no-repeat bottom; */
/* padding: 0 0 5px 0; */
/* background-size: 140%; */
}
#sequence .right {
margin: 20px auto 0;
max-width: 98%;
}
#sequence .right ul {
width: auto;
float: none;
margin: 0;
}
#sequence .right li {
font-size: 0.85em;
line-height: 2;
}
#sequence .right li img {width: 70%;}
/*--------------*/
/*ビフォー
/*--------------*/
#sequence section#before {max-width: 100%;padding: 50px 10px 10px;}
/*careful
/*--------------*/
#sequence section#before .careful {
width: 100%;
padding: 10px;
margin: 20px auto 0;
}
#sequence section#before .careful span {
font-size: 0.9em;
padding: 0 0 0 50px;
margin: 0;
background-size: 30px;
}
#sequence section#before .careful span:last-child {
margin: 0;
}
/*--------------*/
/*アフター
/*--------------*/
#sequence section#after {padding: 50px 10px 0;}
#sequence section#after:before {
/* content: ""; */
width: 0;
height: 0;
border-style: solid;
border-width:20px 20px 0 20px;
border-color: #f3efe7 transparent transparent transparent;
top: -2%;
position: absolute;
z-index: 1000;
left: 0;
right: 0;
margin: auto;
}
/*--------------*/
/*ãƒã‚¤ãƒ³ãƒˆ
/*--------------*/
#sequence section#point {
overflow: hidden;
padding: 0;
/* background: url(../img/feature/sequence/bg02.jpg) no-repeat; */
/* background: #f2f7f0; */
}
#sequence section#point .point_midashi {
background: url(../img/feature/sequence/midashi01.jpg) no-repeat;
text-align: center;
padding: 50px 0;
}
#sequence section#point .pointBox {
margin: 50px auto 0;
text-align: center;
padding: 50px 0 0 0;
position: relative;
z-index: 0;
background: #fff;
/* border: 10px solid #eee; */
}
#sequence section#point .pointBox img {
/* padding: 20px; */
margin: auto;
background: #fff;
/* border: 10px solid #eee; */
}
#sequence section#point .pointBox dl#p1 {
position: absolute;
top: 15%;
right: 5%;
/* width: 350px; */
}
#sequence section#point .pointBox dl#p1 dt:before {
content:"";
/* background: #000; */
position: absolute;
left: -80%;
width: 100%;
height: 1px;
top: 0;
bottom: 0;
border: 1px dashed #000;
border-top: none;
border-left: none;
margin: auto;
}
#sequence section#point .pointBox dl#p2 {
position: absolute;
bottom: 20%;
right: 5%;
}
#sequence section#point .pointBox dl#p2 dt:before {
content:"";
position: absolute;
left: -30%;
width: 100%;
height: 1px;
top: 0;
bottom: 0;
border: 1px dashed #000;
border-top: none;
border-left: none;
margin: auto;
}
#sequence section#point .pointBox dl#p3 {
position: absolute;
bottom: 20%;
left: 5%;
}
#sequence section#point .pointBox dl#p3 dt:before {
content:"";
position: absolute;
right: -46%;
width: 100%;
height: 1px;
top: 0;
bottom: 0;
border: 1px dashed #000;
border-top: none;
border-left: none;
border-right: none;
margin: auto;
}
#sequence section#point .pointBox dl {
text-align: center;
border: 1px solid #000;
width: 350px;
border-radius: 5px;
}
#sequence section#point .pointBox dt {
background: #000;
color: #fff;
position: relative;
font-family: 'Lustria', serif;
letter-spacing: 2px;
border-radius: 5px 5px 0 0;
padding: 5px 0;
}
#sequence section#point .pointBox dd {
padding: 15px;
font-weight: bold;
font-size: 1.1em;
text-align: center;
}
/*--------------*/
/*ã•ã‚‰ã«
/*--------------*/
#sequence section#up {padding: 0 0 80px 0;/* background: #146d57; */margin: 80px 0 0 0;}
#sequence section#up span {
font-size: 1em;
margin: 10px auto;
width: 80%;
}
#sequence section#up .high_midashi {padding: 0 0 50px 0;}
#sequence section#up .highlight {
/* border: 2px solid #333; */
max-width: 1280px;
margin: -40px auto 0;
box-sizing: border-box;
padding: 2px;
background: #fff;
}
#sequence section#up .highlight_inner {
}
#sequence section#up .highlight_ttl {
font-size: 1.5em;
line-height: 1.6;
padding: 0 0 10px 0;
width: 90%;
margin: auto;
}
#sequence section#up .highlight ul {
padding: 20px 0 0 0;
}
#sequence .highlight li {
width: 80%;
display: block;
margin: 0 auto 30px;
}
#sequence .highlight li img {
width: 100%;
}
#sequence .highlight li:nth-child(3) {
margin: 0 auto 30px;
}
#sequence .highlight li:nth-child(4) {
width: 80%;
}
#sequence .highlight li:nth-child(5) {
width: 80%;
margin: auto;
}
#sequence .recommend {max-width: 90%;}
#sequence .recommend ul {
}
#sequence .recommend li {
width: 100%;
background-size: 15px;
padding: 0 0 15px 25px;
box-sizing: border-box;
}
}