@charset "UTF-8";
 .page_title {
background: url(//www.nitta-dental.com/img/home-visit/page_title.jpg) no-repeat center center;
}
main .bg_icon_orange {
position: relative;
padding: 80px 0 130px;
background: url(//www.nitta-dental.com/img/common/dot_line.svg) repeat-x center bottom;
}
main .bg_icon_orange::before {
position: absolute;
top: 260px;
left: 0;
width: 184px;
height: 302px;
background: url(//www.nitta-dental.com/img/common/bg_icon_orange.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .catch {
margin-bottom: 100px;
}
main .catch h3 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 4.0rem;
font-weight: 700;
}
main .catch h3 span {
display: inline-flex;
border: solid 2px #69ba46;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.1;
color: #69ba46;
padding: .2em .6em;
margin: 0 .6em;
border-radius: 1.5em;
}
main .catch p {
text-align: center;
}
main .about {
margin-bottom: 100px;
}
main .about .box {
display: flex;
align-items: flex-start;
}
main .about .box .box_l {
order: 2;
width: 500px;
margin-left: 20px;
}
main .about .box .box_l h4 {
background: rgb(105,186,70);
background: -moz-linear-gradient(left,  rgba(105,186,70,1) 0%, rgba(105,157,70,1) 100%);
background: -webkit-linear-gradient(left,  rgba(105,186,70,1) 0%,rgba(105,157,70,1) 100%);
background: linear-gradient(to right,  rgba(105,186,70,1) 0%,rgba(105,157,70,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69ba46', endColorstr='#699d46',GradientType=1 );
font-size: 2.0rem;
font-weight: 700;
color: #FFF;
padding: .4em 1em;
border-radius: 1.5em;
margin-bottom: 1.5em;
}
main .about .box .box_l + p {
order: 1;
max-width: 425px;
margin-right: auto;
background: rgb(255,255,255);
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(192,226,177,1) 100%);
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(192,226,177,1) 100%);
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(192,226,177,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c0e2b1',GradientType=1 );
padding: 5px;
border-radius: 10px;
}
main .about .box .box_l + p span {
display: block;
padding: 45px 20px;
border-radius: 10px;
overflow: hidden;
background: rgb(219,238,211);
background: -moz-linear-gradient(-45deg,  rgba(219,238,211,1) 1%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(219,238,211,1) 1%,rgba(255,255,255,1) 100%);
background: linear-gradient(135deg,  rgba(219,238,211,1) 1%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbeed3', endColorstr='#ffffff',GradientType=1 );
}
main .detail {
position: relative;
background: #e8f5e3;
padding-bottom: 150px;
}
main .detail::before {
position: absolute;
top: -50px;
left: 0;
right: 0;
z-index: 1;
margin: 0 auto;
max-width: 550px;
height: 50px;
border-radius: 10px 10px 0 0;
background: #e8f5e3;
content: '';
}
main .detail .box section {
display: flex;
align-items: flex-start;
}
main .detail .box section:not(:last-of-type) {
padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: dashed 1px #595757;
}
main .detail .box section .box_l {
max-width: 510px;
margin-right: 20px;
}
main .detail .box section .box_l h4 {
position: relative;
background: #FFF;
font-size: 3.0rem;
font-weight: 700;
padding: .1em 1.5em;
border-radius: 1.5em;
margin-bottom: 1.2em;
}
main .detail .box section .box_l h4::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: .3em;
width: 1em;
height: 1em;
background: url(//www.nitta-dental.com/img/common/arrow_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .detail .box section .box_l + p {
width: 400px;
margin-left: auto;
background: rgb(255,255,255);
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(192,226,177,1) 100%);
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(192,226,177,1) 100%);
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(192,226,177,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c0e2b1',GradientType=1 );
padding: 5px;
border-radius: 10px;
}
main .detail .box section .box_l + p span {
display: block;
overflow: hidden;
border-radius: 10px;
}
main .flow {
position: relative;
background: #FFF;
padding-bottom: 150px;
counter-reset: number;
}
main .flow::before {
position: absolute;
top: -50px;
left: 0;
right: 0;
z-index: 1;
margin: 0 auto;
max-width: 550px;
height: 50px;
border-radius: 10px 10px 0 0;
background: #FFF;
content: '';
}
main .flow .box section {
position: relative;
background: #fef4e8;
padding: 30px 50px 30px 60px;
border-radius: 10px;
filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.6));
}
main .flow .box section:not(:last-of-type)::after {
position: absolute;
bottom: -40px;
right: 0;
left: 0;
margin: 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 25px 0 25px;
border-color: #fef4e8 transparent transparent transparent;
content: '';
}
main .flow .box section:not(:last-of-type) {
margin-bottom: 70px;
}
main .flow .box section .box_in {
display: flex;
align-items: flex-start;
}
main .flow .box section .box_in .box_l {
width: calc(100% - 325px);
}
main .flow .box section .box_in .box_l h4 {
position: relative;
font-size: 2.5rem;
font-weight: 700;
color: #ee7800;
padding-left: 70px;
margin-bottom: 30px;
}
main .flow .box section .box_in .box_l h4::before {
position: absolute;
top: -.1em;
left: 0;
font-size: 2.8rem;
font-weight: 700;
width: 50px;
height: 50px;
display: flex;
color: #FFF;
justify-content: center;
align-items: center;
background: #ee7800;
color: #FFF;
border-radius: 10px;
counter-increment: number;
content: counter(number)'';
}
main .flow .box section .box_in .box_l h4::after {
position: absolute;
bottom: -10px;
left: 70px;
width: calc(100% - 70px);
height: 1px;
border-bottom: dotted 1px #595757;
content: '';
}
main .flow .box section .box_in .box_l p {
max-width: 520px;
margin-right: 20px;
}
main .flow .box section .box_in .box_l + p {
width: 325px;
border-radius: 10px;
border: solid 5px #ee7800;
}
main .flow .box section .box_in .box_l + p span {
display: block;
overflow: hidden;
border-radius: 10px;
}
main .flow .box section .tel {
padding-top: 20px;
}
main .flow .box section .tel a {
display: flex;
align-items: center;
justify-content: center;
font-size: 4.0rem;
line-height: 1.1;
padding: .5em;
border-radius: 2em;
color: #FFF;
background: rgb(238,120,0);
background: -moz-linear-gradient(left,  rgba(238,120,0,1) 0%, rgba(225,96,0,1) 100%);
background: -webkit-linear-gradient(left,  rgba(238,120,0,1) 0%,rgba(225,96,0,1) 100%);
background: linear-gradient(to right,  rgba(238,120,0,1) 0%,rgba(225,96,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee7800', endColorstr='#e16000',GradientType=1 );
text-decoration: none;
pointer-events: none;
transition: .5s;
}
main .flow .box section .tel a:hover {
background: rgb(225,96,0);
background: -moz-linear-gradient(left,  rgba(225,96,0,1) 0%, rgba(238,120,0,1) 100%);
background: -webkit-linear-gradient(left,  rgba(225,96,0,1) 0%,rgba(238,120,0,1) 100%);
background: linear-gradient(to right,  rgba(225,96,0,1) 0%,rgba(238,120,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e16000', endColorstr='#ee7800',GradientType=1 );
transition: .5s;
}
main .flow .box section .tel a em ,
main .flow .box section .tel a span {
position: relative;
display: block;
font-weight: 700;
}
main .flow .box section .tel a em {
font-size: 2.4rem;
padding-right: 3em;
}
main .flow .box section .tel a em::after {
position: absolute;
top: 0;
right: 1.5em;
width: 1px;
height: 100%;
border-right:  dotted 1px #FFF;
content: '';
}
main .price {
position: relative;
background: #e8f5e3;
padding-bottom: 150px;
}
main .price::before {
position: absolute;
top: -50px;
left: 0;
right: 0;
z-index: 1;
margin: 0 auto;
max-width: 550px;
height: 50px;
border-radius: 10px 10px 0 0;
background: #e8f5e3;
content: '';
}
main .price h4 {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
main .price h4 span {
display: block;
background: rgb(105,186,70);
background: -moz-linear-gradient(left,  rgba(105,186,70,1) 0%, rgba(105,157,70,1) 100%);
background: -webkit-linear-gradient(left,  rgba(105,186,70,1) 0%,rgba(105,157,70,1) 100%);
background: linear-gradient(to right,  rgba(105,186,70,1) 0%,rgba(105,157,70,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69ba46', endColorstr='#699d46',GradientType=1 );
font-size: 2.0rem;
font-weight: 700;
color: #FFF;
padding: .4em 1em;
border-radius: 1.5em;
}
main .price h4 span em {
color: #fff79d;
font-weight: 700;
}
main .price .comment {
margin-bottom: 30px;
}
main .price .box {
display: flex;
}
main .price .box section {
background: #FFF;
width: 32%;
border: solid 1px #69ba46;
border-bottom: solid 8px #69ba46;
padding: 30px;
border-radius: 10px;
}
main .price .box section:not(:last-of-type) {
margin-right: 2%;
}
main .price .box section h5 {
position: relative;
font-size: 2.4rem;
font-weight: 700;
line-height: 1.3;
text-align: center;
color: #69ba46;
margin-bottom: 50px;
}
main .price .box section h5::after {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 13px;
background: url(//www.nitta-dental.com/img/common/arrow_green_triangle_only.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .area {
position: relative;
background: #FFF;
padding-bottom: 150px;
}
main .area::before {
position: absolute;
top: -50px;
left: 0;
right: 0;
z-index: 1;
margin: 0 auto;
max-width: 550px;
height: 50px;
border-radius: 10px 10px 0 0;
background: #FFF;
content: '';
}
main .area h4 {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
main .area h4 span {
display: block;
background:#ee7800;
font-size: 2.0rem;
font-weight: 700;
color: #FFF;
padding: .4em 1em;
border-radius: 1.5em;
}
main .faq {
position: relative;
background: #e9eaea;
padding-bottom: 150px;
}
main .faq::before {
position: absolute;
top: -50px;
left: 0;
right: 0;
z-index: 1;
margin: 0 auto;
max-width: 550px;
height: 50px;
border-radius: 10px 10px 0 0;
background: #e9eaea;
content: '';
}
main .faq .box section {
position: relative;
}
main .faq .box section:not(:last-of-type) {
margin-bottom: 40px;
}
main .faq .box section > input {
display: none;
}
main .faq .box section > label {
position: relative;
z-index: 1;
display: block;
width: 100%;
background: #fde5cc;
border: solid 1px #ee7800;
font-size: 2.2rem;
font-weight: 700;
padding: .3em 3.5em;
color: #ee7800;
border-radius: 1.5em;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
main .faq .box section > label:before {
position: absolute;
top: -.15em;
left: .5em;
font-size: 3.2rem;
font-weight: 700;
content: 'Q.';
}
main .faq .box section > label::after {
position: absolute;
top: .3em;
right: .5em;
font-size: 3.2rem;
width: 1em;
height: 1em;
border-radius: 50%;
background: #ee7800;
content: '';
}
main .faq .box section > label span {
position: relative;
display: block;
width: 100%;
text-align: center;
}
main .faq .box section > label span::before ,
main .faq .box section > label span::after {
position: absolute;
top: .6em;
right: -1.75em;
z-index: 1;
width: .7em;
height: 2px;
font-size: 3.2rem;
background: #FFF;
transition: all 0.3s;
content: "";
}
main .faq .box section > label span::before {
transform: rotate(-90deg);
}
main .faq .box section > input:checked + label span::before {
transform: rotate(45deg)
}
main .faq .box section > input:checked + label span::after {
transform: rotate(135deg)
}
main .faq .box section > .answer {
position: relative;
top: -.6em;
font-size: 3.2rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
height: 0;
overflow: hidden;
background: #FFF;
padding: 0 50px;
border-radius: 0 0 10px 10px;
transition: all 1.5s;
}
main .faq .box section > input:checked + label + .answer {
height: auto;
padding: 60px 50px 40px;
transition: all 1.5s;
}
main .faq .box section > .answer .box_in {
position: relative;
font-size: 1.6rem;
padding-left: 60px;
}
main .faq .box section > .answer .box_in:before {
position: absolute;
top: -.25em;
left: 0;
font-size: 3.2rem;
font-weight: 700;
color: #69ba46;
content: 'A.';
}
main .caution {
padding-top: 100px;
}
main .caution .box01 {
margin-bottom: 150px;
}
main .caution .box01 section:not(:last-of-type) {
margin-bottom: 60px;
padding-bottom: 50px;
border-bottom: dotted 1px #595757;
}
main .caution .box01 section h3 {
position: relative;
text-align: center;
color: #ee7800;
font-size: 3.0rem;
font-weight: 700;
margin-bottom: 60px;
}
main .caution .box01 section h3::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
width: 3.2em;
height: 3.2em;
background: #e9eaea;
border-radius: 50%;
content: '';
}
main .caution .box01 section p {
text-align: center;
}
main .caution .box02 {
position: relative;
border: solid 1px #69ba46;
border-bottom: solid 8px #69ba46;
padding: 40px;
padding-top: 150px;
padding-bottom: 100px;
border-radius: 10px;
}
main .caution .box02 h3 {
position: absolute;
top: -1.8em;
right: 0;
left: 0;
margin: 0 auto;
text-align: center;
}
main .caution .box02 h3 span {
position: relative;
background: #dff1d8;
font-size: 3.4rem;
font-weight: 700;
padding: .6em 1.6em;
border-radius: 1.5em;
color: #69ba46;
border: solid 1px #69ba46;
}
main .caution .box02 h3 span::before {
position: absolute;
bottom: -39px;
right: 0;
left: 0;
margin: 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 25px 0 25px;
border-color: #dff1d8 transparent transparent transparent;
content: '';
}
main .caution .box02 h3 span::after {
position: absolute;
bottom: -41px;
right: 0;
left: 0;
z-index: -1;
margin: 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 41px 26px 0 26px;
border-color: #69ba46 transparent transparent transparent;
content: '';
}
main .caution .box02 .case {
padding-bottom: 40px;
margin-bottom: 50px;
border-bottom: dotted 1px #595757;
}
main .caution .box02 .case .box_in {
display: flex;
padding: 0 50px;
margin-bottom: 80px;
}
main .caution .box02 .case .box_in section {
width: 30%;
}
main .caution .box02 .case .box_in section:not(:last-of-type) {
margin-right: 5%;
}
main .caution .box02 .case .box_in section h4 {
display: flex;
justify-content: center;
font-size: 2.2rem;
margin-bottom: .8em;
color: #69ba46;
}
main .caution .box02 .case .box_in section h4 span {
position: relative;
display: block;
font-weight: 700;
}
main .caution .box02 .case .box_in section h4 span::before {
position: absolute;
top: .2em;
left: -.9em;
width: 1px;
height: 80%;
background: #69ba46;
transform: rotate(-30deg);
content: '';
}
main .caution .box02 .case .box_in section h4 span::after {
position: absolute;
top: .2em;
right: -.9em;
width: 1px;
height: 80%;
background: #69ba46;
transform: rotate(30deg);
content: '';
}
main .caution .box02 .case .box_in section .img {
position: relative;
padding: 0 15%;
margin-bottom: 10px;
}
main .caution .box02 .case .box_in section .img::before {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
width: 234px;
height: 234px;
background: #dff1d8;
border-radius: 50%;
content: '';
}
main .caution .box02 .case ul {
max-width: 720px;
margin: 0 auto;
}
main .caution .box02 .case ul li {
position: relative;
padding-left: 1.2em;
font-size: 1.9rem;
}
mmain .caution .box02 .case ul li:not(:last-of-type) {
margin-bottom: .5em;
}
main .caution .box02 .case ul li::before {
position: absolute;
top: .4em;
left: 0;
width: 1em;
height: 1em;
border-radius: 50%;
background: #69ba46;
content: '';
}
main .caution .box02 .case + section h5 {
position: relative;
text-align: center;
color: #69ba46;
font-size: 3.0rem;
font-weight: 700;
margin-bottom: 60px;
}
main .caution .box02 .case + section h5::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
width: 3.2em;
height: 3.2em;
background: #e9eaea;
border-radius: 50%;
content: '';
}
main .caution .box02 .case + section h5 + p {
max-width: 820px;
margin: 0 auto;
}
main .caution .box02 .case + section h5 + p span {
font-weight: 700;
color: #69ba46;
}
@media screen and (max-width: 1000px) {
main .flow .box section .tel a {
font-size: 3.0rem;
}
main .flow .box section .tel a em {
font-size: 2.0rem;
padding-right: 2em;
}
main .flow .box section .tel a em::after {
right: 1em;
}
main .price .box {
display: flex;
flex-wrap: wrap;
margin-bottom: -20px;
}
main .price .box section {
width: 48%;
margin-bottom: 20px;
}
main .price .box section:not(:last-of-type) {
margin-right: 0;
}
main .price .box section:nth-of-type(1) {
margin-right: 4%;
}
main .caution .box02 .case .box_in {
display: flex;
flex-wrap: wrap;
padding: 0 50px;
margin-bottom: 80px;
}
main .caution .box02 .case .box_in section {
width: 48%;
margin-bottom: 20px;
}
main .caution .box02 .case .box_in section:not(:last-of-type) {
margin-right: 0;
}
main .caution .box02 .case .box_in section:nth-of-type(1) {
margin-right: 4%;
}
}
@media screen and (max-width: 767px) {
main .bg_icon_orange {
position: relative;
padding: 10vw 0 20vw;
background: url(//www.nitta-dental.com/img/common/dot_line.svg) repeat-x center bottom;
}
main .bg_icon_orange::before {
top: calc(33.898vw * 2);
width: calc(23.99vw * 2);
height: calc(39.374vw * 2);
}
main .catch {
margin-bottom: 15vw;
}
main .catch h3 {
font-size: 2.0rem;
margin-bottom: 3vw;
}
main .catch h3 span {
font-size: 1.6rem;
padding: .2em .6em;
}
main .catch p {
text-align: left;
}
main .about {
margin-bottom: 15vw;
}
main .about .box {
display: flex;
flex-direction: column;
}
main .about .box .box_l {
order: 2;
width: 100%;
margin-left: 0;
}
main .about .box .box_l h4 {
font-size: 2.0rem;
padding: .4em 1em;
border-radius: 10px;
margin-bottom: 1.5em;
}
main .about .box .box_l + p {
order: 1;
max-width: 100%;
margin-left: 0;
margin-bottom: 5vw;
}
main .about .box .box_l + p span {
display: block;
border-radius: 10px;
overflow: hidden;
}
main .detail {
padding-bottom: 15vw;
}
main .detail::before {
top: -8vw;
max-width: 90%;
height: 8vw;
}
main .detail .box section {
display: flex;
flex-direction: column;
}
main .detail .box section:not(:last-of-type) {
padding-bottom: 6vw;
margin-bottom: 6vw;
border-bottom: dashed 1px #595757;
}
main .detail .box section .box_l {
order: 2;
max-width: 100%;
margin-right: 0;
}
main .detail .box section .box_l h4 {
font-size: 2.0rem;
font-weight: 700;
padding: .1em 1.5em;
border-radius: 1.5em;
margin-bottom: 1.2em;
}
main .detail .box section .box_l h4::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: .3em;
width: 1em;
height: 1em;
background: url(//www.nitta-dental.com/img/common/arrow_green.svg) no-repeat center center;
background-size: cover;
content: '';
}
main .detail .box section .box_l + p {
width: 100%;
margin-left: 0;
margin-bottom: 5vw;
}
main .detail .box section .box_l + p span {
display: block;
overflow: hidden;
border-radius: 10px;
}
main .flow {
padding-bottom: 15vw;
}
main .flow::before {
top: -8vw;
max-width: 80%;
height: 8vw;
}
main .flow .box section {
padding: 5vw 4vw;
}
main .flow .box section:not(:last-of-type)::after {
position: absolute;
bottom: -6vw;
right: 0;
left: 0;
margin: 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 6vw 5vw 0 5vw;
border-color: #fef4e8 transparent transparent transparent;
content: '';
}
main .flow .box section:not(:last-of-type) {
margin-bottom: 15vw;
}
main .flow .box section .box_in {
display: flex;
flex-direction: column;
}
main .flow .box section .box_in .box_l {
width: 100%;
margin-bottom: 5vw;
}
main .flow .box section .box_in .box_l h4 {
font-size: 2.0rem;
padding-left: 15vw;
margin-bottom: 5vw;
}
main .flow .box section .box_in .box_l h4::before {
position: absolute;
top: -.1em;
left: 0;
font-size: 2.0rem;
width: 10vw;
height: 10vw;
border-radius: 10px;
}
main .flow .box section .box_in .box_l h4::after {
position: absolute;
bottom: -2vw;
left: 15vw;
width: calc(100% - 15vw);
height: 1px;
border-bottom: dotted 1px #595757;
content: '';
}
main .flow .box section .box_in .box_l p {
max-width: 100%;
margin-right: 0;
}
main .flow .box section .box_in .box_l + p {
width: 100%;
border-radius: 10px;
border: solid 5px #ee7800;
}
main .flow .box section .box_in .box_l + p span {
display: block;
overflow: hidden;
border-radius: 10px;
}
main .flow .box section .tel {
padding-top: 10vw;
}
main .flow .box section .tel a {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 2.0rem;
line-height: 1.1;
padding: .5em;
border-radius: 10px;
pointer-events: auto;
transition: .5s;
}
main .flow .box section .tel a em {
font-size: 2.0rem;
padding-right: 0;
padding-bottom: 1em;
}
main .flow .box section .tel a em::after {
position: absolute;
top: inherit;
right: inherit;
bottom: .5em;
left: 0;
width: 100%;
height: 1px;
border-right: none;
border-bottom: dotted 1px #FFF;
content: '';
}
main .price {
padding-bottom: 15vw;
}
main .price::before {
top: -8vw;
max-width: 80%;
height: 8vw;
}
main .price h4 {
display: flex;
justify-content: center;
padding: 0 4%;
margin-bottom: 5vw;
}
main .price h4 span {
font-size: 2.0rem;
padding: .4em 1em;
border-radius: 10px;
}
main .price .comment {
margin-bottom: 10vw;
}
main .price .box {
display: flex;
flex-direction: column;
}
main .price .box section {
width: 100%;
padding: 5vw 4vw;
border-radius: 10px;
}
main .price .box section:not(:last-of-type) {
margin-right: 0 !important;
margin-bottom: 5vw !important;
}
main .price .box section h5 {
font-size: 1.8rem;
margin-bottom: 8vw;
}
main .price .box section h5::after {
bottom: calc(-3.911vw * 1.5);
width: calc(2.608vw * 2);
height: calc(1.695vw * 2);
}
main .area {
padding-bottom: 15vw;
}
main .area::before {
top: -8vw;
max-width: 80%;
height: 8vw;
}
main .area h4 {
display: flex;
justify-content: center;
padding: 0 4%;
margin-bottom: 5vw;
}
main .area h4 span {
font-size: 2.0rem;
padding: .4em 1em;
border-radius: 10px;
}
main .faq {
padding-bottom: 15vw;
}
main .faq::before {
top: -8vw;
max-width: 80%;
height: 8vw;
}
main .faq .box section:not(:last-of-type) {
margin-bottom: 6vw;
}
main .faq .box section > input {
display: none;
}
main .faq .box section > label {
font-size: 2.0rem;
padding: .3em 2em;
border-radius: 10px;
text-align: left;
}
main .faq .box section > label:before {
position: absolute;
top: .15em;
left: .5em;
font-size: 2.2rem;
font-weight: 700;
content: 'Q.';
}
main .faq .box section > label::after {
position: absolute;
top: .3em;
right: .5em;
font-size: 2.4rem;
width: 1em;
height: 1em;
border-radius: 50%;
background: #ee7800;
content: '';
}
main .faq .box section > label span {
position: relative;
display: block;
width: 100%;
text-align: left;
}
main .faq .box section > label span::before ,
main .faq .box section > label span::after {
position: absolute;
top: .5em;
right: -.95em;
z-index: 1;
width: .6em;
height: 2px;
font-size: 2.4rem;
background: #FFF;
transition: all 0.3s;
content: "";
}
main .faq .box section > label span::before {
transform: rotate(-90deg);
}
main .faq .box section > input:checked + label span::before {
transform: rotate(45deg)
}
main .faq .box section > input:checked + label span::after {
transform: rotate(135deg)
}
main .faq .box section > .answer {
position: relative;
top: -.6em;
font-size: 1.6rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
height: 0;
overflow: hidden;
background: #FFF;
padding: 0 4vw;
border-radius: 0 0 10px 10px;
transition: all 1.5s;
}
main .faq .box section > input:checked + label + .answer {
height: auto;
padding: 5vw 4vw;
transition: all 1.5s;
}
main .faq .box section > .answer .box_in {
position: relative;
font-size: 1.6rem;
padding-left: 2em;
}
main .faq .box section > .answer .box_in:before {
position: absolute;
top: -.15em;
left: 0;
font-size: 2.2rem;
content: 'A.';
}
main .caution {
padding-top: 10vw;
}
main .caution .box01 {
margin-bottom: 15vw;
}
main .caution .box01 section:not(:last-of-type) {
margin-bottom: 8vw;
padding-bottom: 8vw;
border-bottom: dotted 1px #595757;
}
main .caution .box01 section h3 {
font-size: 2.0rem;
margin-bottom: 8vw;
}
main .caution .box01 section p {
text-align: left;
}
main .caution .box02 {
position: relative;
border: solid 1px #69ba46;
border-bottom: solid 8px #69ba46;
padding: 5vw 4vw;
padding-top: 10vw;
padding-bottom: 10vw;
border-radius: 10px;
}
main .caution .box02 h3 {
position: absolute;
top: -1.8em;
right: 0;
left: 0;
margin: 0 auto;
text-align: center;
}
main .caution .box02 h3 span {
font-size: 2.0rem;
padding: .6em .5em;
border-radius: 1.5em;
}
main .caution .box02 h3 span::before {
position: absolute;
bottom: -5vw;
right: 0;
left: 0;
margin: 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 5vw 4vw 0 4vw;
border-color: #dff1d8 transparent transparent transparent;
content: '';
}
main .caution .box02 h3 span::after {
position: absolute;
bottom: -5.4vw;
right: 0;
left: 0;
z-index: -1;
margin: 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 5.4vw 4.4vw 0 4.4vw;
border-color: #69ba46 transparent transparent transparent;
content: '';
}
main .caution .box02 .case {
padding-bottom: 5vw;
margin-bottom: 5vw;
border-bottom: dotted 1px #595757;
}
main .caution .box02 .case .box_in {
display: flex;
flex-direction: column;
padding: 0;
margin-bottom: 10vw;
}
main .caution .box02 .case .box_in section {
width: 100%;
}
main .caution .box02 .case .box_in section:not(:last-of-type) {
margin-right: 0 !important;
margin-bottom: 5vw !important;
}
main .caution .box02 .case .box_in section h4 {
font-size: 2.0rem;
}
main .caution .box02 .case .box_in section h4 span::before {
position: absolute;
top: .2em;
left: -.9em;
width: 1px;
height: 80%;
background: #69ba46;
transform: rotate(-30deg);
content: '';
}
main .caution .box02 .case .box_in section h4 span::after {
position: absolute;
top: .2em;
right: -.9em;
width: 1px;
height: 80%;
background: #69ba46;
transform: rotate(30deg);
content: '';
}
main .caution .box02 .case .box_in section .img {
position: relative;
padding: 0 30%;
margin-bottom: 5vw;
}
main .caution .box02 .case .box_in section .img::before {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
width: 50vw;
height: 50vw;
background: #dff1d8;
border-radius: 50%;
content: '';
}
main .caution .box02 .case ul {
max-width: 100%;
}
main .caution .box02 .case ul li {
font-size: 1.6rem;
}
main .caution .box02 .case + section h5 {
font-size: 2.0rem;
margin-bottom: 8vw;
}
main .caution .box02 .case + section h5 + p {
max-width: 100%;
}
}