@media print, screen and (min-width: 768px) {
#mainvisual {
height: calc(40vh - 100px);
min-height: 200px;
background: #b0596d;
position: relative;
overflow: hidden
}
#mainvisual:before {
position: absolute;
display: block;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0%;
background-size: cover;
opacity: 0.75
}
#mainvisual #mainvisual_bg {
position: absolute;
width: 140%;
height: 140%;
top: -20%;
left: -20%;
z-index: 1
}
#mainvisual .inner {
width: 1200px;
margin: 0 auto
}
#mainvisual .inner .textArea {
height: calc(40vh - 100px);
min-height: 200px;
display: flex;
align-self: center;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 10
}
#mainvisual .inner .textArea h1 {
color: #fff;
font-size: 5rem;
line-height: 1.4;
font-weight: 900
}
#mainvisual .inner .textArea h1 span {
display: block;
padding-bottom: 2px;
font-size: 2rem;
color: #fff
}
#mainvisual .inner .textArea p {
font-size: 2rem;
font-weight: 700;
color: #fff;
margin-top: 15px
}
#tabList {
width: 1200px;
margin: 100px auto 0
}
#tabList h2 {
display: block;
font-size: 2rem;
font-weight: 900;
padding-bottom:50px;
text-align:center;
}
#tabList ul {
display: flex;
width: 100%;
align-items: center
}
#tabList ul li {
width: 20%;
text-align: center;
box-sizing: border-box;
border-bottom: 1px solid #a0a1a8;
font-size: 1.35rem;
height: 100px;
padding-bottom: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
position: relative;
-o-transition: all 0.15s ease-in;
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15s ease-in
}
#tabList ul li::before {
content: '\e807';
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
color: #aaa;
font-size: 1.5rem;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
width: 15px;
height: 15px;
-o-transition: all 0.15s ease-in;
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15s ease-in
}
#tabList ul li::after {
content: "";
display: block;
background: #c7365e;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
-o-transition: all 0.15s ease-in;
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15s ease-in
}
#tabList ul li a {
display: flex;
text-align: center;
text-decoration: none;
height: 100px;
width: 100%;
align-items: center;
justify-content: center;
}
#tabList ul li.on {
border-left: 1px solid #a0a1a8;
border-bottom: none;
border-right: 1px solid #a0a1a8;
border-top: 5px solid #c7365e
}
#tabList ul li.on::after {
display: none
}
#tabList ul li:hover::after {
background: #c7365e;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px
}
#main .inner {
width: 1200px;
margin: 20px auto 0
}
#main>section {
display: none
}
#main>section.ac {
display: block
}
#main>section h3 {
margin-top: 60px;
background: #f5f5f5;
position: relative;
padding: 15px 20px 15px 35px;
font-size: 2.5rem
}
#main>section h3:before {
content: "";
width: 20px;
height: 7px;
background: #c7365e;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto
}
#main>section dl {
border-bottom: 1px solid #bbb;
padding: 15px 0 10px 0;
position: relative
}
#main>section dl:before {
content: "";
width: 24px;
height: 2px;
position: absolute;
margin: auto;
top: 43px;
right: 20px;
background: #666;
-webkit-transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main>section dl:after {
content: "";
width: 2px;
height: 24px;
position: absolute;
margin: auto;
top: 32px;
right: 31px;
background: #666;
transform: scale(1);
-webkit-transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main>section dl:hover:before {
width: 38px;
right: 14px;
background: #c7365e
}
#main>section dl:hover:after {
height: 38px;
top: 26px;
background: #c7365e
}
#main>section dl dt:hover {
color: #c7365e
}
#main>section dl dt {
position: relative;
font-size: 2rem;
font-weight: 700;
line-height: 1.4;
padding: 15px 80px 20px 55px;
-webkit-transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
cursor: pointer;
z-index: 10
}
#main>section dl dt::before {
content: "Q";
font-size: 2.4rem;
font-weight: 900;
background: #c7365e;
color: #fff;
height: 40px;
width: 40px;
text-align: center;
line-height: 35px;
display: block;
left: 0;
top: 0.5em;
position: absolute
}
#main>section dl dd {
position: relative;
font-size: 1.6rem;
line-height: 1.8;
padding-left: 50px;
padding-right: 80px;
opacity: 0;
min-height: inherit;
max-height: 0;
overflow: hidden;
-webkit-transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main>section dl dd::before {
content: "A";
font-size: 2.4rem;
font-weight: 900;
border: 3px solid #c7365e;
color: #fff;
height: 40px;
width: 40px;
text-align: center;
line-height: 32px;
display: block;
box-sizing: border-box;
color: #c7365e;
left: 0;
top: 0.2em;
position: absolute
}
#main>section dl dd a {
text-decoration: underline
}
#main>section dl dd a.un:hover {
color: #c7365e;
}
#main>section dl.open:after {
height: 0 !important
}
#main>section dl.open dd {
opacity: 1;
padding-top: 7px;
padding-bottom: 40px
}
#footerContact {
padding-top: 40px;
border-top: 1px solid #ddd
}
#mainvisual .inner {
opacity: 0;
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition-delay: 600ms
}
#mainvisual .inner .trial {
opacity: 0;
top: -55px;
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition-delay: 1000ms
}
#mainvisual .inner .change_plan {
opacity: 0;
bottom: 20px;
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition-delay: 1000ms
}
.load #mainvisual .inner {
opacity: 1
}
.load #mainvisual .inner .trial {
opacity: 1;
top: -65px
}
.load #mainvisual .inner .change_plan {
bottom: 60px;
opacity: 1
}
#main #sec01 .flow>div {
height: 160px;
box-sizing: border-box
}
#main #sec01 .flow .before {
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transform: translateX(50%)
}
#main #sec01 .flow .before::after {
opacity: 0;
transform: translateX(-10px);
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition-delay: 700ms
}
#main #sec01 .flow .after {
opacity: 0;
transform: translateX(-10px);
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition-delay: 700ms
}
#main #sec01 .flow.in>div {
height: 160px;
box-sizing: border-box
}
#main #sec01 .flow.in .before {
transform: translateX(0)
}
#main #sec01 .flow.in .before::after {
transform: translateX(0);
opacity: 1
}
#main #sec01 .flow.in .after {
transform: translateX(0);
opacity: 1
}
#main #sec01 h3 {
opacity: 0;
transform: translateY(15px);
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main #sec01 h3.in {
opacity: 1;
transform: translateY(0)
}
#main #sec01 .caseList .case {
opacity: 0;
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main #sec01 .caseList .case .before {
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transform: translateX(50%);
transition-delay: 700ms
}
#main #sec01 .caseList .case .after {
opacity: 0;
transform: translateX(-30px);
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition-delay: 1100ms
}
#main #sec01 .caseList .case::after {
opacity: 0;
transform: translateX(-30px);
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition-delay: 1300ms
}
#main #sec01 .caseList .case.in {
opacity: 1
}
#main #sec01 .caseList .case.in .before {
transform: translateX(0)
}
#main #sec01 .caseList .case.in .after {
transform: translateX(0);
opacity: 1
}
#main #sec01 .caseList .case.in::after {
transform: translateX(0);
opacity: 1
}
#main .offerArea.am {
opacity: 0;
transform: translateY(15px);
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main .offerArea.am.in {
opacity: 1;
transform: translateY(0)
}
#main #sec03 h2+.readcopy {
opacity: 0;
transform: translateY(15px);
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition-delay: 500ms
}
#main #sec03 .future {
opacity: 0;
transform: translateY(15px);
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition-delay: 800ms
}
#main #sec03 .in h2+.readcopy {
opacity: 1;
transform: translateY(0)
}
#main #sec03 .in .future {
opacity: 1;
transform: translateY(0)
}
#main #sec03 .readcopy {
font-size: 1.8rem;
text-align: center;
margin-top: 15px;
line-height: 1.9
}
#main #sec03 h3.am {
opacity: 0;
transform: translateY(15px);
-webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main #sec03 h3.am+div {
opacity: 0;
transform: translateX(-15px);
-webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition-delay: 400ms
}
#main #sec03 h3.am.in {
opacity: 1;
transform: translateY(0)
}
#main #sec03 h3.am.in+div {
opacity: 1;
transform: translateX(0)
}
#main #sec03 .select.am {
opacity: 0;
transform: translateY(15px);
-webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main #sec03 .select.am.in {
opacity: 1;
transform: translateY(0);
-webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main #sec03 .thought.am {
opacity: 0;
transform: translateX(-15px);
-webkit-transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main #sec03 .thought.am.in {
opacity: 1;
transform: translateX(0)
}
#main #sec04 .wrap {
opacity: 0;
transform: translateY(30px);
-webkit-transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main #sec04.in .wrap {
opacity: 1;
transform: translateY(0)
}
#main #sec05 .readcopy {
opacity: 0;
transform: translateY(15px);
-webkit-transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main #sec05 .inner.in .readcopy {
opacity: 1;
transform: translateY(0)
}
#main #sec06.am {
opacity: 0;
transform: translateY(25px);
-webkit-transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 1200ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main #sec06.am.in {
opacity: 1;
transform: translateY(0)
}
#main .bnrs li a {
display: block;
background: #fff;
box-shadow: 0 0 0 0 transparent;
transform: translate(0, 0);
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main .bnrs li a:hover {
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.5);
transform: translate(-5px, -5px)
}
#main .link a {
display: block;
background: #fff;
box-shadow: 0 0 0 0 transparent;
transform: translate(0, 0);
-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main .link a:hover {
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.5);
transform: translate(-5px, -5px)
}
}
@media screen and (max-width: 767px) {
#siteNav {
display: none
}
#mainvisual {
height: 15vh;
background: #b0596d;
position: relative;
overflow: hidden
}
#mainvisual:before {
position: absolute;
display: block;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0%;
background-size: cover;
opacity: 0.25
}
#mainvisual #mainvisual_bg {
position: absolute;
width: 140%;
height: 140%;
top: -20%;
left: -20%;
z-index: 1
}
#mainvisual .inner {
width: 100%;
margin: 0 auto;
padding: 0 3%;
box-sizing: border-box
}
#mainvisual .inner .textArea {
height: 15vh;
display: flex;
align-self: center;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 10
}
#mainvisual .inner .textArea h1 {
color: #fff;
font-size: 2.8rem;
line-height: 1.4;
font-weight: 900
}
#mainvisual .inner .textArea h1 span {
display: block;
padding-bottom: 2px;
font-size: 1.3rem;
color: #fff
}
#mainvisual .inner .textArea p {
font-size: 1.3rem;
font-weight: 700;
color: #fff;
margin-top: 15px
}
#tabList {
padding: 3%;
margin: 5% auto 0
}
#tabList ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
align-items: center
}
#tabList ul li {
display: flex;
align-items: center;
background: #f0f0f0;
width: 49.5%;
text-align: center;
justify-content: center;
box-sizing: border-box;
font-size: 1.15rem;
margin-top: 1%;
line-height: 1.4;
cursor: pointer;
font-weight: 500;
position: relative;
height: 16vw;
font-weight: 700;
-o-transition: all 0.15s ease-in;
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15s ease-in
}
#tabList ul li::after {
content: "";
display: block;
background: #c7365e;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
-o-transition: all 0.15s ease-in;
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15s ease-in
}
#tabList ul li a {
display: flex;
text-align: center;
text-decoration: none;
height: 16vw;
width: 100%;
align-items: center;
justify-content: center;
}
#tabList ul li.on {
background: #c7365e
}
#tabList ul li.on a {
color: #fff
}
#tabList ul li.on::after {
display: none
}
#main .inner {
padding: 3%
}
#main>section {
display: none
}
#main>section.ac {
display: block
}
#main>section h3 {
margin-top: 5%;
background: #f5f5f5;
position: relative;
padding: 15px 20px 15px 35px;
font-size: 1.8rem
}
#main>section h3:before {
content: "";
width: 20px;
height: 7px;
background: #c7365e;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto
}
#main>section dl {
border-bottom: 1px solid #bbb;
padding: 15px 0 10px 0;
position: relative
}
#main>section dl:before {
content: "";
width: 24px;
height: 2px;
position: absolute;
margin: auto;
top: 43px;
right: 20px;
background: #666;
-webkit-transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main>section dl:after {
content: "";
width: 2px;
height: 24px;
position: absolute;
margin: auto;
top: 32px;
right: 31px;
background: #666;
transform: scale(1);
-webkit-transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main>section dl:hover:before {
width: 38px;
right: 14px;
background: #c7365e
}
#main>section dl:hover:after {
height: 38px;
top: 26px;
background: #c7365e
}
#main>section dl dt:hover {
color: #c7365e
}
#main>section dl dt {
position: relative;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.4;
padding: 15px 80px 20px 55px;
-webkit-transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
cursor: pointer;
z-index: 10
}
#main>section dl dt::before {
content: "Q";
font-size: 2.4rem;
font-weight: 900;
background: #c7365e;
color: #fff;
height: 40px;
width: 40px;
text-align: center;
line-height: 35px;
display: block;
left: 0;
top: 0.5em;
position: absolute
}
#main>section dl dd {
position: relative;
font-size: 1.4rem;
line-height: 1.8;
padding-left: 50px;
padding-right: 80px;
opacity: 0;
min-height: inherit;
max-height: 0;
overflow: hidden;
-webkit-transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1) 0s
}
#main>section dl dd::before {
content: "A";
font-size: 2.4rem;
font-weight: 900;
border: 3px solid #c7365e;
color: #fff;
height: 40px;
width: 40px;
text-align: center;
line-height: 32px;
display: block;
box-sizing: border-box;
color: #c7365e;
left: 0;
top: 0.2em;
position: absolute
}
#main>section dl dd a {
text-decoration: underline
}
#main>section dl.open:after {
height: 0 !important
}
#main>section dl.open dd {
opacity: 1;
padding-top: 7px;
padding-bottom: 40px
}
#footerContact {
padding-top: 40px;
border-top: 1px solid #ddd
}
}