@charset "utf-8";
/* ===================================================================
file name :quality.css
style info :クオリティ コンセプト
=================================================================== */
/* =============================
overwrite
=============================== */
#pageHeader{
background-image: url(../images/quality/bg_pageheader.jpg);
}
#main{
padding-bottom: 150px;
}
/* =================================== */
#main #lead {
text-align: center;
margin-bottom: 100px;
}
#main #lead h3 {
font-size: 29px;
margin-bottom: 1.6em;
}
#main #lead p {
margin-bottom: 90px;
font-size: 17px;
}
@media screen and (max-width: 760px){
#main #lead {
margin-bottom: 100px;
}
#main #lead h3 {
font-size: 42px;
margin-bottom: 1em;
}
#main #lead p {
margin-bottom: 80px;
font-size: 28px;
}
}
/* snav */
#main .snav {
display: block;
padding-bottom: 100px;
}
#main .snav-bottom{
padding: 80px 0 150px;
}
#main .snav ul {
display: flex;
justify-content: space-between;
}
#main .snav ul li {
width: 192px;
transition: all ease 1.2s;
opacity: 0;
}
#main .snav ul li:nth-child(1){transition-delay:0;}
#main .snav ul li:nth-child(2){transition-delay:0.1s;}
#main .snav ul li:nth-child(3){transition-delay:0.2s;}
#main .snav ul li:nth-child(4){transition-delay:0.3s;}
#main .snav ul li:nth-child(5){transition-delay:0.4s;}
.pre-anim-start #main .snav.sc-show ul li{
opacity: 1;
}
#main .snav ul li a {
background: #19232b;
display: block;
padding: 30px 10px 40px;
position: relative;
line-height: 1;
text-align: center;
}
#main .snav ul li:nth-of-type(odd) a{background: #002842;}
#main .snav ul li.current a,
#main .snav ul li a:hover{
background: #FFF;
color: #002842;
}
#main .snav ul li a::before,
#main .snav ul li a::after{
content:'';
width: 12px;
height: 2px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -12px;
background: #FFF;
transform-origin: right bottom;
transform:rotate(40deg);
transition: background ease .5s;
}
#main .snav ul li a:hover:before,
#main .snav ul li a:hover::after,
#main .snav ul li.current a:before,
#main .snav ul li.current a::after{
background: #002842;
}
#main .snav ul li a::before{
transform-origin: left bottom;
transform:rotate(-40deg);
margin-left: 0px;
}
#main .snav ul li a .ttl {
position: absolute;
top: 46px;
left: 50px;
}
#main .snav ul li a .en {
display: block;
margin-bottom: 14px;
height: 19px;
}
#main .snav ul li a .en svg {
height: 100%;
width: auto;
}
#main .snav ul li a .en svg path{
transition: all ease .5s;
}
#main .snav ul li.current a .en svg path,
#main .snav ul li a:hover .en svg path{
fill: #002842;
}
#main .snav ul li a .ja {
display: block;
font-size: 14px;
}
#main .snav ul li a .en::before{
content:'';
position: absolute;
right: 10px;
bottom: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat right top;
background-size: contain;
opacity: 0.1;
transition: background ease .5s;
}
#main .snav ul li:nth-child(2) a .en::before{background-image: url('data:image/svg+xml;charset=UTF-8,');}
#main .snav ul li:nth-child(3) a .en::before{background-image: url('data:image/svg+xml;charset=UTF-8,');}
#main .snav ul li:nth-child(4) a .en::before{background-image: url('data:image/svg+xml;charset=UTF-8,');}
#main .snav ul li:nth-child(5) a .en::before{background-image: url('data:image/svg+xml;charset=UTF-8,');}
#main .snav ul li.current:nth-child(1) a .en::before,
#main .snav ul li:nth-child(1) a:hover .en::before{background-image: url('data:image/svg+xml;charset=UTF-8,');}
#main .snav ul li.current:nth-child(2) a .en::before,
#main .snav ul li:nth-child(2) a:hover .en::before{background-image: url('data:image/svg+xml;charset=UTF-8,');}
#main .snav ul li.current:nth-child(3) a .en::before,
#main .snav ul li:nth-child(3) a:hover .en::before{background-image: url('data:image/svg+xml;charset=UTF-8,');}
#main .snav ul li.current:nth-child(4) a .en::before,
#main .snav ul li:nth-child(4) a:hover .en::before{background-image: url('data:image/svg+xml;charset=UTF-8,');}
#main .snav ul li.current:nth-child(5) a .en::before,
#main .snav ul li:nth-child(5) a:hover .en::before{background-image: url('data:image/svg+xml;charset=UTF-8,');}
@media screen and (max-width: 760px){
#main .snav {
margin: 0 auto;
padding-bottom: 100px;
}
#main .snav ul {
flex-wrap: wrap;
justify-content: center;
}
#main .snav ul li {
width: 31%;
margin: 1%;
}
#main .snav ul li a .ttl {
top: 23px;
left: 25px;
}
#main .snav ul li a .ja {
font-size: 20px;
}
}
#main #mainContents{
background: #001930;
padding-bottom: 50px;
}
@media screen and (max-width: 760px){
#main #mainContents{
padding-bottom: 50px;
}
}
/*
.mainContentsHeader
---------------------------*/
#main .mainContentsHeader {
background: url(../images/quality/bg_maincontents_header.jpg) no-repeat center;
background-size:cover;
position: relative;
z-index: 1;
padding: 60px 0 0;
margin-bottom: 90px;
}
#main .mainContentsHeader .sec-inner-1000{
display: flex;
}
#main .mainContentsHeader .number {
width:50%;
text-align: center;
position: relative;
z-index: 2;
opacity: 0;
transform: translateX(-30px);
transition: all ease .8s;
}
#main .mainContentsHeader .number img {
height: 368px;
width: auto;
opacity: 0.7;
}
.pre-anim-start #main .mainContentsHeader.sc-show .number{
opacity: 1;
transform: translateX(0);
}
#main .mainContentsHeader .ttl-wrap {
width:50%;
}
#main .mainContentsHeader .ttl-wrap h3 {
padding-bottom: 50px;
font-size: 28px;
opacity: 0;
transform: translateX(30px);
transition: all ease .8s;
}
.pre-anim-start #main .mainContentsHeader.sc-show .ttl-wrap h3{
opacity: 1;
transform: translateX(0);
}
#main .mainContentsHeader .ttl-wrap h3 span{
display: block;
}
#main .mainContentsHeader .ttl-wrap h3 .en {
height: 24px;
margin-bottom: 14px;
line-height: 1;
}
#main .mainContentsHeader .ttl-wrap h3 .en img {
height: 100%;
width: auto;
}
#main .mainContentsHeader .ttl-wrap h3 .jp {
font-size: 14px;
}
#main .mainContentsHeader .ttl-wrap p {
padding: 50px 0;
font-size: 16px;
position: relative;
z-index: 1;
opacity: 0;
transition: all ease .8s .1s;
}
.pre-anim-start #main .mainContentsHeader.sc-show .ttl-wrap p{
opacity: 1;
}
#main .mainContentsHeader .ttl-wrap p::before{
content:'';
background: #020202;
position: absolute;
left: 0;
bottom: 0;
width: 100vw;
height: 100%;
opacity: 0.8;
z-index: -1;
margin-left: -50vw;
transform:scaleX(0);
opacity: 0;
transform-origin: left bottom;
transition: all ease 1s .1s;
}
.pre-anim-start #main .mainContentsHeader.sc-show .ttl-wrap p::before{
opacity: 1;
transform:scaleX(1);
opacity: 1;
}
@media screen and (max-width: 1030px){
#main .mainContentsHeader .ttl-wrap p::before{
width: 1030px;
margin-left: -515px;
}
}
@media screen and (max-width: 760px){
#main .mainContentsHeader .sec-inner-1000{
display: block;
}
#main .mainContentsHeader .number {
width:18%;
position: absolute;
left: 20px;
top: 72px;
text-align: right;
}
#main .mainContentsHeader .number img {
height: 188px;
}
#main .mainContentsHeader .ttl-wrap {
width:100%;
}
#main .mainContentsHeader .ttl-wrap h3 {
padding-left: 21%;
padding-bottom: 50px;
font-size: 36px;
}
#main .mainContentsHeader .ttl-wrap h3 .en {
height: 24px;
margin-bottom: 20px;
}
#main .mainContentsHeader .ttl-wrap h3 .jp {
margin-bottom: 0.3em;
font-size: 20px;
}
#main .mainContentsHeader .ttl-wrap p {
padding: 30px 0;
font-size: 24px;
}
#main .mainContentsHeader .ttl-wrap p::before{
width: calc(100% + 60px);
height: 100%;
margin-left: 0;
left: -30px;
}
}
@media screen and (max-width: 740px){
#main .mainContentsHeader .ttl-wrap h3 .ls{
letter-spacing: -0.15em;
}
}
/* tab-panel */
#main #mainContents .tab-panel{
display: none;
pointer-events: none;
opacity: 0;
}
#main #mainContents .tab-panel.show{
display: block;
pointer-events:all;
animation: fade-in 1s .1s normal 1 both;
}
/*
.sec-quality
---------------------------*/
#main .sec-quality{
line-height: 1.8;
padding-bottom: 80px;
}
#main .sec-quality .sec-ttl h4 {
margin-bottom: 1.5em;
display: flex;
justify-content: start;
}
#main .sec-quality .sec-ttl h4 span{
display: block;
}
#main .sec-quality .sec-ttl h4 .en {
height: 15px;
position: relative;
top: -1px;
opacity: 0;
transform:translateX(-30px);
transition: all ease .8s;
}
.pre-anim-start #main .sec-quality .sec-ttl.sc-show h4 .en{
opacity: 1;
transform:translateX(0);
}
#main .sec-quality .sec-ttl h4 .en img {
width: auto;
height: 100%;
}
#main .sec-quality .sec-ttl h4 .jp {
padding: 0 0 13px;
position: relative;
margin-left: 1em;
font-size: 20px;
opacity: 0;
transform:translateX(30px);
transition: all ease .8s;
font-family: YakuHanJP,'Noto Sans JP', sans-serif;
}
.pre-anim-start #main .sec-quality .sec-ttl.sc-show h4 .jp{
opacity: 1;
transform:translateX(0);
}
#main .sec-quality .sec-ttl h4 .jp::after{
content:'';
width: 100vw;
height: 1px;
position: absolute;
right: 0;
bottom: 0;
background: #FFF;
transform:scaleX(0);
transition: all ease .8s;
transform-origin: left top;
}
.pre-anim-start #main .sec-quality .sec-ttl.sc-show h4 .jp::after{
transform:scaleX(1);
}
#main .sec-quality .sec-ttl .catch{
margin-bottom: 2em;
font-size: 28px;
opacity: 0;
transform:translateX(30px);
transition: all ease .8s .2s;
}
.pre-anim-start #main .sec-quality .sec-ttl.sc-show .catch{
opacity: 1;
transform:translateX(0);
}
@media screen and (max-width: 760px){
#main .sec-quality{
line-height: 1.6;
}
#main .sec-quality img{
width: 100%;
}
#main .sec-quality .sec-ttl h4 {
display: block;
}
#main .sec-quality .sec-ttl h4 .en {
height: 20px;
margin-bottom: 10px;
position: static;
line-height: 1;
}
#main .sec-quality .sec-ttl h4 .jp {
margin-left: 0;
font-size: 30px;
}
#main .sec-quality .sec-ttl h4 .jp::after{
width: calc(100% + 30px);
}
#main .sec-quality .sec-ttl .catch{
font-size: 34px;
}
}
#main .sec-quality .ttl{
font-size: 23px;
line-height: 1.5;
margin-bottom: 1.2em;
padding-bottom: 0.5em;
border-bottom: 1px solid #FFF;
font-family: YakuHanJP,'Noto Sans JP', sans-serif;
}
#main .sec-quality .ttl2{
font-size: 22px;
line-height: 1.5;
margin-bottom: 0.8em;
}
@media screen and (max-width: 760px){
#main .sec-quality .ttl{
font-size: 32px;
}
#main .sec-quality .ttl2{
font-size: 28px;
}
}
#main .sec-quality .flex-block{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
}
#main .sec-quality .border-block{
margin-bottom: 50px;
padding: 20px 29px 29px;
border: 1px solid #FFF;
}
#main .sec-quality .col2 > *{
width: 47.8725%;
}
#main .sec-quality .col2 p{
margin-bottom: 1.5em;
}
#main .sec-quality .col2-02 > *{
width: 28.7234%;
}
#main .sec-quality .col2-02 > *:last-child{
width: 67.0212%;
}
#main .sec-quality .col2-03 > *{
width: 31.9148%;
}
#main .sec-quality .col2-03 > *:last-child{
width: 63.8297%;
}
@media screen and (max-width: 760px){
#main .sec-quality .col2 > *{
width: 48%;
}
#main .sec-quality .col2-02 > *,
#main .sec-quality .col2-03 > *{
width: 100%;
}
#main .sec-quality .col2-02 > *:last-child,
#main .sec-quality .col2-03 > *:last-child{
margin-top: 1em;
width: 100%;
}
#main .sec-quality .col2-03 > *:last-child li:nth-child(1){
width: 47.5%;
}
#main .sec-quality .col2-03 > *:last-child li:nth-child(2){
width: 51%;
}
}
#main .sec-quality .attention{
margin-top: 29px;
font-size: 16px;
color: #FFF;
background: #0a4b82;
line-height: 1.4;
padding: 0.6em 1em;
text-align: center;
}
#main .sec-quality .attention strong{
font-weight: bold;
font-size: 20px;
}
#main .sec-quality .attention small{
font-size: 14px;
}
@media screen and (max-width: 760px){
#main .sec-quality .attention{
font-size: 26px;
}
#main .sec-quality .attention strong{
font-weight: bold;
font-size: 32px;
}
#main .sec-quality .attention small{
display: block;
font-size: 20px;
}
}
#main .sec-quality .block-list{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#main .sec-quality .block-list li{
margin-bottom: 50px;
padding: 20px 29px 29px;
width: 480px;
border: 1px solid #FFF;
}
#main .sec-quality .block-list li.wide,
#main .sec-quality .block-list li.wide2,
#main .sec-quality .block-list li.wide3{
width: 100%;
}
#main .sec-quality .block-list li.wide3 .flex-block{
align-items: center;
}
#main .sec-quality .block-list li p{
margin-bottom: 1.5em;
}
#main .sec-quality .block-list li.list-h p{
margin-bottom: 0;
}
#main .sec-quality .block-list li.list-h .flex-block > *{
width: 47.619%;
}
#main .sec-quality .block-list li.wide.list-h .flex-block > *{
width: 48.9361%;
}
#main .sec-quality .block-list li.wide.list-h .flex-block > *:last-child{
width: 45.8333%;
}
#main .sec-quality .block-list li.wide2.list-h .flex-block > *{
width: 60.6382%;
}
#main .sec-quality .block-list li.wide2.list-h .flex-block > *:last-child{
width: 35.1063%;
}
#main .sec-quality .block-list li.wide3.list-h .flex-block > *{
width: 55.3191%;
}
#main .sec-quality .block-list li.wide3.list-h .flex-block > *:last-child{
width: 40.4255%;
}
#main .sec-quality .block-list li .caption{
display: block;
margin-top: 0.5em;
font-size: 14px;
line-height: 1.4;
}
@media screen and (max-width: 760px){
#main .sec-quality .block-list li{
width: 100%;
}
#main .sec-quality .block-list li p{
margin-bottom: 1em;
}
#main .sec-quality .block-list li.list-h p{
margin-bottom: 0;
}
#main .sec-quality .block-list li.wide.list-h .flex-block > *,
#main .sec-quality .block-list li.wide2.list-h .flex-block > *,
#main .sec-quality .block-list li.wide3.list-h .flex-block > *{
width: 100%;
}
#main .sec-quality .block-list li.wide.list-h .flex-block > *:last-child,
#main .sec-quality .block-list li.wide2.list-h .flex-block > *:last-child,
#main .sec-quality .block-list li.wide3.list-h .flex-block > *:last-child{
width: 100%;
margin-top: 1em;
}
#main .sec-quality .block-list li.wide.list-h .flex-block > * img,
#main .sec-quality .block-list li.wide2.list-h .flex-block > * img,
#main .sec-quality .block-list li.wide3.list-h .flex-block > * img{
width: 100%;
}
#main .sec-quality .block-list li .caption{
font-size: 20px;
}
}
#main .sec-quality .block-list2{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#main .sec-quality .block-list2 li{
margin-bottom: 40px;
width: 450px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#main .sec-quality .block-list2 li div{
width: 220px;
}
#main .sec-quality .block-list2 li figure{
width: 200px;
}
#main .sec-quality .block-list2 li h6{
font-size: 19px;
margin-bottom: 0.6em;
line-height: 1.5;
}
@media screen and (max-width: 760px){
#main .sec-quality .block-list2 li{
margin-bottom: 40px !important;
width: 100%;
}
#main .sec-quality .block-list2 li:last-child{margin-bottom: 0 !important;}
#main .sec-quality .block-list2 li div{
width: 49%;
}
#main .sec-quality .block-list2 li figure{
width: 49%;
}
#main .sec-quality .block-list2 li h6{
margin-bottom: 0.3em;
font-size:30px;
}
#main .sec-quality .block-list2 li p{
font-size: 24px;
}
}
/* figcaption */
#main .sec-quality figure{
position: relative;
}
#main .sec-quality figure figcaption{
font-size: 14px;
line-height: 1.3;
color: #595757;
font-family: YakuHanJP,'Noto Sans JP', sans-serif;
}
#main .sec-quality figure .pos-a-r{
position: absolute;
right: 10px;
bottom: 0.5em;
text-align: right;
}
#main .sec-quality figure .pos-a-c,
#main .sec-quality figure span.pos-a-c{
position: absolute;
display: block;
width: 100%;
left: 0;
padding: 0 10px;
bottom: 0.5em;
text-align: center;
}
#main .sec-quality figure .pos-a-l{
position: absolute;
width: 100%;
padding: 0 10px 0.5em;
left: 0;
bottom: 0;
}
#main .sec-quality figure .pos-s-r{
text-align:right;
color: #FFF;
margin-top: 0.5em;
}
#main .sec-quality figure .pos-s-c{
margin-top: 0.5em;
text-align: center;
color: #FFF;
}
@media screen and (max-width: 760px){
#main .sec-quality figure figcaption{
font-size: 18px;
}
#main .sec-quality figure .pos-a-r{
bottom: 0.2em;
}
#main .sec-quality figure .pos-a-c,
#main .sec-quality figure span.pos-a-c{
bottom: 0.2em;
}
#main .sec-quality figure .pos-a-l{
padding: 0 10px 0.2em;
}
}
/*
#main #safeness
---------------------------*/
#main #safeness .sec01 .block02 .pos-a-r{
margin-right:17%;
bottom:2em;
}
#main #safeness .sec01 .block02 li:last-child .pos-a-r{
bottom:1.5em;
}
@media screen and (max-width: 760px){
#main #safeness .sec01 section:nth-child(1){
display: block;
}
#main #safeness .sec01 .block01 .pos-a-c,
#main #safeness .sec01 .block02 .pos-a-r{
margin-top: 0.3em;
display: block;
position: static;
margin-right:0;
text-align: right;
color: #FFF;
}
#main #safeness .sec01 .block02 .pos-a-c{
text-align: right;
position: static;
color: #FFF;
}
}
#main #safeness #lifehag .concept{
padding: 20px 35px;
background: #FFF;
display: flex;
align-items: center;
justify-content: space-between;
}
#main #safeness #lifehag .concept figure{
width:388px;
text-align: center;
}
#main #safeness #lifehag .concept figure:last-child{
width: 430px;
}
#main #safeness #lifehag .concept figure figcaption{
display: block;
text-align: left;
margin-top: 37px;
color: #595757;
line-height: 1.8;
font-size: 16px;
}
#main #safeness #lifehag .detail{
margin-top: 30px;
background: #FFF;
color: #111111;
}
#main #safeness #lifehag .detail h4{
padding: 0.3em 15px;
background: #75a084;
font-size : 22px;
color: #FFF;
line-height: 1.4;
overflow: hidden;
}
#main #safeness #lifehag .detail#hagItems h4{background: #db8349;}
#main #safeness #lifehag .detail#hagQuality h4{background: #a76893;}
#main #safeness #lifehag .detail h4 .jp{
font-size: 14px;
margin-left: 1em;
}
#main #safeness #lifehag .detail h4 .sub{
float: right;
}
#main #safeness #lifehag .detail .catch{
font-size: 22px;
margin-bottom: 1.4em;
}
#main #safeness #lifehag .detail .inner{
padding: 30px;
}
@media screen and (max-width: 760px){
#main #safeness #lifehag .concept{
display: block;
}
#main #safeness #lifehag .concept figure{
width:80%;
margin: 0 auto;
text-align: center;
}
#main #safeness #lifehag .concept figure:last-child{
width: 100%;
}
#main #safeness #lifehag .concept figure:last-child img{
width: 16%;
}
#main #safeness #lifehag .concept figure figcaption{
line-height: 1.6;
font-size: 26px;
}
#main #safeness #lifehag .detail h4{
font-size : 28px;
padding: 0.5em 30px;
}
#main #safeness #lifehag .detail h4 .jp{
font-size: 20px;
}
#main #safeness #lifehag .detail h4 .sub{
margin-top: 0.2em;
display: block;
float: none;
}
#main #safeness #lifehag .detail .catch{
font-size: 32px;
}
}
/* hagCommunity */
#main #safeness #lifehag .detail#hagCommunity ul li h5{
font-size: 18px;
color: #75a084;
border: 1px solid #75a084;
padding: 0.2em 10px;
margin-bottom: 1em;
text-align: center;
}
#main #safeness #lifehag .detail#hagCommunity ul li p{
width: 215px;
font-size: 14px;
}
#main #safeness #lifehag .detail#hagCommunity ul li figure{
width: 190px;
}
#main #safeness #lifehag .detail#hagCommunity ul li figure figcaption{
color: #595757;
}
@media screen and (max-width: 760px){
#main #safeness #lifehag .detail#hagCommunity ul{
display: block;
}
#main #safeness #lifehag .detail#hagCommunity ul li{
width: 100%;
margin-bottom: 1em;
}
#main #safeness #lifehag .detail#hagCommunity ul li:last-child{margin-bottom: 0;}
#main #safeness #lifehag .detail#hagCommunity ul li h5{
font-size: 26px;
}
#main #safeness #lifehag .detail#hagCommunity ul li p{
width: 52%;
font-size: 24px;
}
#main #safeness #lifehag .detail#hagCommunity ul li figure{
width: 46%;
}
}
/* hagItems */
#main #safeness #lifehag .detail#hagItems div.flex-block{
align-items: stretch;
}
#main #safeness #lifehag .detail#hagItems div.flex-block div{
width: 230px;
border: 1px solid #db8349;
padding: 10px;
text-align: center;
display:flex;
align-items:center;
}
#main #safeness #lifehag .detail#hagItems h5{
width:100%;
font-size: 18px;
color: #db8349;
}
#main #safeness #lifehag .detail#hagItems ul{
width: 634px;
}
#main #safeness #lifehag .detail#hagItems ul li{
width: 154px;
margin-bottom: 6px;
}
#main #safeness #lifehag > .caption{
font-size:14px;
margin-top: 1em
}
@media screen and (max-width: 760px){
#main #safeness #lifehag .detail#hagItems div.flex-block div{
width: 100%;
display:block;
margin-bottom: 0.5em;
}
#main #safeness #lifehag .detail#hagItems div.flex-block{
margin: 0 auto;
}
#main #safeness #lifehag .detail#hagItems h5{
font-size: 28px;
}
#main #safeness #lifehag .detail#hagItems ul{
width: 100%;
}
#main #safeness #lifehag .detail#hagItems ul:after{
content:'';
width: 33%;
}
#main #safeness #lifehag .detail#hagItems ul li{
width: 33%;
margin-bottom: 0.5%;
}
#main #safeness #lifehag > .caption{
font-size:20px;
}
#main #safeness #hagQuality .catch + p{
font-size: 24px;
}
}
/* salon */
#main #safeness #salon .flex-block .notes{
width: 640px;
}
#main #safeness #salon .flex-block .notes ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 2em;
}
#main #safeness #salon .flex-block .notes ul li{
width: 310px;
margin-bottom: 25px;
}
#main #safeness #salon .flex-block .notes ul li h6{
position: relative;
margin-bottom: 0.5em;
font-size: 17px;
color: #181878;
background: #ded7c7;
padding: 0.2em 10px 0.2em 36px;
font-family: YakuHanJP,'Noto Sans JP', sans-serif;
}
#main #safeness #salon .flex-block .notes ul li h6 span{
display: block;
background: #181878;
color: #FFF;
position: absolute;
top: 0.5em;
left: 10px;
width: 20px;
text-align: center;
height: 20px;
line-height: 20px;
}
#main #safeness #salon .flex-block .notes ul li p{
font-size: 14px;
}
#main #safeness #salon .flex-block .notes .plus{
color: #ded7c7;
text-align: center;
}
@media screen and (max-width: 760px){
#main #safeness #salon .flex-block .notes{
width: 100%;
}
#main #safeness #salon .flex-block .notes ul li{
width: 100%;
}
#main #safeness #salon .flex-block .notes ul li h6{
font-size: 26px;
padding-left: 54px;
}
#main #safeness #salon .flex-block .notes ul li h6 span{
top: 0.2em;
width: 40px;
height: 40px;
line-height: 40px;
}
#main #safeness #salon .flex-block .notes ul li p{
font-size: 24px;
}
#main #safeness #salon .flex-block .notes .plus{
margin-bottom: 2em;
}
#main #safeness #salon .flex-block .notes + div{
max-width: 400px;
margin: 0 auto;
}
}
#main #safeness #afterservice{
margin-bottom: 0;
}
#main #safeness #afterservice .flex-block {
margin-bottom: 30px;
align-items: center;
}
#main #safeness #afterservice .flex-block div {
width: 530px;
}
#main #safeness #afterservice .flex-block div h6 {
margin-bottom: 0.6em;
font-size: 22px;
color: #a19191;
}
#main #safeness #afterservice .flex-block figure {
width: 380px;
}
#main #safeness #premiumSupport {
padding: 40px;
border:1px solid #8e7c72;
background: #c6b6a9;
box-shadow: inset 0 0 0 4px #FFF;
display: flex;
justify-content: space-between;
}
#main #safeness #premiumSupport > figure {
width: 200px;
}
#main #safeness #premiumSupport .notes {
width: 620px;
}
#main #safeness #premiumSupport .notes h6 {
font-size: 22px;
color: #5f4a00;
text-align: center;
}
#main #safeness #premiumSupport .notes h6 span{
display: block;
}
#main #safeness #premiumSupport .notes h6 .jp {
border-bottom: 1px solid #5f4a00;
padding-bottom: 0.2em;
}
#main #safeness #premiumSupport .notes h6 .jp small {
font-size: 16px;
}
#main #safeness #premiumSupport .notes h6 .en {
padding-top: 0.5em;
font-size: 14px;
}
#main #safeness #premiumSupport .notes p {
margin: 0.5em 0;
line-height: 1.6;
text-align: center;
font-size: 18px;
font-weight: bold;
}
#main #safeness #premiumSupport .notes figure{
margin-right: -16px;
}
@media screen and (max-width: 760px){
#main #safeness #afterservice .flex-block div {
margin-top: 1em;
width: 100%;
}
#main #safeness #afterservice .flex-block div h6 {
font-size: 30px;
}
#main #safeness #afterservice .flex-block figure {
margin-top: 1em;
text-align: center;
width: 100%;
}
#main #safeness #premiumSupport {
padding: 30px;
display: block;
}
#main #safeness #premiumSupport > figure {
width: 200px;
margin: 0 auto 1em;
}
#main #safeness #premiumSupport .notes {
width: 100%;
}
#main #safeness #premiumSupport .notes h6 {
font-size: 30px;
letter-spacing: -0.1em;
}
#main #safeness #premiumSupport .notes h6 .jp small {
font-size: 22px;
letter-spacing: 0em;
}
#main #safeness #premiumSupport .notes h6 .en {
font-size: 20px;
letter-spacing: 0em;
}
#main #safeness #premiumSupport .notes p {
font-size: 28px;
}
#main #safeness #premiumSupport .notes figure{
max-width: 560px;
margin: 0 auto;
}
}
@media screen and (max-width: 760px){
#main #comfort .block01 .pos-a-r{
position: static;
color: #FFF;
text-align: right;
margin-top: 0.5em;
}
}