/*-------------- mainvisual ---------------*/
#home .mainvisual {
position: relative;
max-width: 1920px;
min-width: 1280px;
width: 100%;
margin:auto;
background: url(/~annika/images/bg-mainvisual.jpg) no-repeat center;
background-size:auto 100% ;
}
#home .mainvisual .inner{
position: relative;
}
#home .mainvisual .slide{
position: relative;
top: 0;
left: 50%;
transform: translateX(-50%);
max-width: 1600px;
min-width: 1280px;
width: 100%;
background: #fff;
border-radius: 30px;
}
#home .mainvisual .slide::before {
position: absolute;
top: 60px;
left: 0;
content: "";
width:80px;
height:72px;
background: url(/~annika/images/header-parts02.png) no-repeat;
z-index: 1;
}
#home .mainvisual .slide img{
width: 100vw;
max-width: 1600px;
min-width: 1280px;
height: auto;
border-radius: 0 80px 80px 80px;
}
#home .mainvisual .mv_bnr{
display: flex;
justify-content: flex-end;
gap: 10px;
position: absolute;
bottom: -60px;
width: 100%;
max-width: 1600px;
width: 100%;
padding-right: 100px;
}
#home .mainvisual .mv_bnr li{
background: #fff;
border-radius: 50%;
}
#home .mainvisual .mv_bnr li a{
transition: 0.3s;
}
#home .mainvisual .mv_bnr li:first-child a {
    padding-left: 0;
}
#home .mainvisual .mv_bnr li a:hover{
opacity: 0.7;
}
#home .mainvisual .slide .slick-slide div{
line-height: 0;
}
@media only screen and (max-width: 767px) {
#home .mainvisual {
max-width: 100%;
min-width: 100%;
background: url(/~annika/images/bg-mainvisual-sp.jpg) no-repeat center;
background-size:100% auto ;
margin-top: 70px;
}
#home .mainvisual .slide{
max-width: calc(100% - 40px);
min-width: calc(100% - 40px);
}
#home .mainvisual .slide::before {
display: none;
}
#home .mainvisual .slide img{
width: 100%;
max-width: 100%;
min-width: 100%;
border-radius: 30px;
margin: auto;
}
#home .mainvisual .mv_bnr{
justify-content: center;
position: absolute;
bottom: -50px;
z-index: 1;
width: 100%;
max-width: 100%;
min-width: 100%;
padding-right: 0;
}
#home .mainvisual .mv_bnr li a img{
width: 100px;
height: auto;
}
#home .mainvisual .mv_bnr li{
background: #fff;
border-radius: 50%;
}
#home .mainvisual .mv_bnr li a{
transition: 0.3s;
}
#home .mainvisual .mv_bnr li a:hover{
opacity: 0.7;
}
#home .mainvisual .slide .slick-slide div{
line-height: 0;
}
}

/*-------------- pickup_area ---------------*/
.pickup_area{
position: relative;
max-width: 1920px;
min-width: 1280px;
height: 800px;
width: 100%;
margin: auto;
padding-top: 130px;
background: url(/~annika/images/pickup-bg.jpg) no-repeat bottom center;
}
.pickup_area .inner{
width: 1120px;
margin: auto;
padding: 0 20px;
}
.pickup_area .inner h2{
text-align: center;
}
.pickup_area .inner h2 > *{
min-width: 337px;
display: inline-block;
color: #d23f18;
font-weight: 700;
margin-bottom: 60px;
padding: 0 0 40px;
background: url(/~annika/images/h2-parts-r.svg) no-repeat bottom center;
text-decoration: none;
}
.pickup_area .inner h2 > * span:nth-child(1){
position: relative;
font-family: "Quicksand", sans-serif;
font-size: 2rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.pickup_area .inner h2 > * span:nth-child(1)::before{
display:block;
content: "";
width: 16px;
height: 28px;
padding-left: 30px;
margin-top: 10px;
background: url(/~annika/images/h2-line-r.svg) no-repeat left center;
}
.pickup_area .inner h2 > * span:nth-child(1)::after{
transform: scale(-1, 1);
display:block;
content: "";
width: 16px;
height: 28px;
padding-right: 30px;
margin-top: 10px;
background: url(/~annika/images/h2-line-r.svg) no-repeat left center;
}
.pickup_area .inner h2 > * span:nth-child(2){
display: block;
font-size: 4.8rem;
}
.pickup_area .slick-slide{
margin: 0 20px 0 ;
width: 520px;
}
.pickup_area .slick-prev {
left: -80px!important;
}
.pickup_area .slick-next {
right: -80px!important;
}
.pickup_area a[target="_blank"] {
    padding-right: 0;
    background: none;
}
@media only screen and (max-width: 767px) {
.pickup_area{
position: relative;
max-width: 100%;
min-width: 100%;
height: auto;
padding-top: 100px;
background: url(/~annika/images/pickup-bg.jpg) no-repeat bottom center;
}
.pickup_area .inner{
width: 100%;
padding: 0 10px;
}
.pickup_area .inner h2 > *{
min-width: auto;
margin-bottom: 50px;
padding: 0 0 30px;
}
.pickup_area .inner h2 > * span:nth-child(1){
font-size: 1.6rem;
margin-bottom: 10px;
}
.pickup_area .inner h2 > * span:nth-child(1)::before{
padding-left: 30px;
margin-top: 5px;
}
.pickup_area .inner h2 > * span:nth-child(1)::after{
padding-right: 30px;
margin-top: 5px;
}
.pickup_area .inner h2 > * span:nth-child(2){
display: block;
font-size: 2.4rem;
}
.pickup_area .slick-slide{
margin: 0 10px 0 ;
width: auto;
}
.pickup_area .slick-slide img{
width: 100%;
height: auto;
}
.pickup_area .slick-prev {
left: -5px!important;
}
.pickup_area .slick-next {
right: -5px!important;
}
.slick-prev:before, .slick-next:before {
width: 40px!important;
height: 40px!important;
}
.slick-prev:before {
content: '';
background: url(/~annika/images/slide_arrow_prev.svg) no-repeat center;
background-size: 100% auto!important;
}
.slick-next:before {
content: '';
background: url(/~annika/images/slide_arrow_next.svg) no-repeat center;
background-size: 100% auto!important;
}
}

/*-------------- sns_area ---------------*/
.sns_area{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.sns_area h3{
position: absolute;
left: -170px;
bottom: 0;
}
.sns_area::after{
position: absolute;
right: -160px;
bottom: -6px;
content: "";
width: 124px;
height:136px ;
background: url(/~annika/images/sns-img02.png) no-repeat ;
}
.sns_area ul{
display: flex;
justify-content: center;
gap: 15px;
padding: 80px 0 28px;
}
.sns_area ul li{
background: #fff;
border-radius: 50%;
}
.sns_area ul li a{
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
}
.sns_area ul li a:hover{
opacity: 0.7;
}
@media only screen and (max-width: 767px) {
.sns_area{
position: relative;
transform: initial;
left: auto;
}
.sns_area h3{
width: 130px;
position: absolute;
left: 10px;
bottom: 0;
margin-bottom: 0;
}
.sns_area::after{
position: absolute;
right: 10px;
bottom: -2px;
content: "";
width: 119px;
height:94px ;
background: url(/~annika/images/sns-img02_sp.png) no-repeat ;
}
.sns_area ul{
position: relative;
gap: 15px;
padding: 80px 0 10px;
}
.sns_area ul li a{
width: 45px;
height: 45px;
}
.sns_area ul li a img{
width: 22px;
height: 22px;
}
}


/*-------------- information_area ---------------*/
.info_area{
background: #fff;
max-width: 1920px;
margin: auto;
}
.info_area .inner{
width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
gap: 110px;
padding: 80px 0;
}
.info_area .inner h2{
width: 250px;
position: relative;
margin: 0 0 40px;
}
.info_area .inner h2 a{
display: inline-block;
text-decoration: none;
white-space: nowrap;
}
.info_area .inner h2 span:nth-child(1){
display: inline-flex;
align-items: center;
color: #d23f18;
font-size:1.8rem;
font-weight: 700;
height: 40px;
margin: 25px 0 5px;
padding-left: 45px;
background: url(/~annika/images/icon/icon-info.svg) no-repeat left bottom;
}
.info_area .inner h2 span:nth-child(2){
display: block;
font-family: "Quicksand", sans-serif;
font-size: 4rem;
font-weight: 700;
}
.info_cont{
width: 835px;
display: flex;
flex-wrap: wrap;
background: url(/~annika/images/info-dot-line.png) repeat-x bottom left;
}
.info_cont .date:nth-of-type(1),.info_cont .title:nth-of-type(1){
border-top: none;
}
.info_cont .date{
display: block;
color: #9a9a9a;
font-family: "Quicksand", sans-serif;
font-size: 1.6rem;
font-weight: 500;
width: 128px;
background: url(/~annika/images/info-dot-line.png) repeat-x bottom left;
padding: 33px 0 30px;
line-height: 1.4;
}
.info_cont .date br {
    display: none;
}
.info_cont .title{
display: block;
font-size: 1.8rem;
width: calc(100% - 128px);
background: url(/~annika/images/info-dot-line.png) repeat-x bottom left;
padding: 30px 0;
line-height: 1.4;
}
.info_cont .title a{
text-decoration: none;
}
@media only screen and (max-width: 767px) {
.info_area{
max-width: 100%;
}
.info_area .inner{
width: 100%;
display: block;
padding: 50px 15px;
}
.info_area .inner h2{
width: auto;
text-align: center;
margin-bottom: 20px;
}
.info_area .inner h2 a{
display: inline-block;
text-decoration: none;
white-space: nowrap;
}
.info_area .inner h2 span:nth-child(1){
font-size:1.5rem;
height: 30px;
margin: 0 0 5px;
padding-left: 38px;
background: url(/~annika/images/icon/icon-info.svg) no-repeat left bottom;
background-size: auto 30px;
letter-spacing: 0.01em;
}
.info_area .inner h2 span:nth-child(2){
font-size: 3.2rem;
}
.info_cont{
width: 100%;
display: block;
background: url(/~annika/images/info-dot-line.png) repeat-x bottom left;
}
.info_cont .date:nth-of-type(1),.info_cont .title:nth-of-type(1){
border-top: none;
}
.info_cont .date{
font-size: 1.4rem;
width: 100%;
background: none;
padding:20px 0 5px;
line-height: 1.3;
}
.info_cont .title{
font-size: 1.3rem;
width:100%;
background: url(/~annika/images/info-dot-line.png) repeat-x bottom left;
padding: 0 0 20px;
line-height: 1.4;
}
.info_cont .title a{
display: block;
text-decoration: none;
background: url(/~annika/images/icon/icon-arrow02.svg) no-repeat right center;
background-size: 30px;
padding-right: 30px;
font-size: 1.3rem;
}
}

/*-------------- members_area ---------------*/
.members_area{
max-width: 1920px;
margin: auto;
padding: 280px 0 160px ;
background: #f9f8f4;
}
.members_area .inner{
position: relative;
width: 1200px;
margin: auto;
padding: 50px 50px 0;
background: #fff;
border: 6px solid #f38a88;
border-radius: 40px;
}
.members_area .inner h2 > *{
position: absolute;
top: -72px;
left: 50%;
transform: translateX(-50%);
width: 684px;
height: 116px;
color: #fff;
text-align: center;
background: url(/~annika/images/members_h2.png) no-repeat;
text-decoration: none;
}
.members_area .inner h2 > * > span:nth-of-type(1){
color:#3e3a39;
position: absolute;
top: -125px;
left: 50%;
transform: translateX(-50%);
font-family: "Quicksand", sans-serif;
font-size: 2rem;
font-weight: 700;
background: url(/~annika/images/otoku-parts01.png) no-repeat top center;
padding-top: 70px;
}
.members_area .inner h2 > * > span:nth-of-type(1)::before{
content: "(";
padding-right: 20px;
}
.members_area .inner h2 > * > span:nth-of-type(1)::after{
content: ")";
padding-left: 20px;
}
.members_area .inner h2 > * > span:nth-of-type(2){
display: flex;
justify-content: center;
font-size: 4rem;
font-weight: 700;
padding-top: 25px;
}
.members_area .inner .wrap:nth-of-type(1){
display: flex;
align-items: center;
gap: 50px;
padding-left: 30px;
}
.members_area .inner .wrap:nth-of-type(1) p{
font-size: 2rem;
font-weight: 500;
line-height: 1.8;
}
.members_area .inner .wrap:nth-of-type(2){
display: flex;
justify-content: space-between;
}
.members_area .inner .wrap:nth-of-type(2) figure:nth-of-type(2){
position: relative;
}
.members_area .inner .wrap:nth-of-type(2) figure:nth-of-type(2)::before{
position: absolute;
top: -20px;
left: -37px;
content: "";
display: block;
width: 135px;
height: 183px;
background:url(/~annika/images/otoku-parts02.png) no-repeat ;
}
.members_area .inner .wrap:nth-of-type(2) figure:nth-of-type(2)::after{
position: absolute;
bottom: 30px;
right: -15px;
content: "";
display: block;
width: 99px;
height: 135px;
background:url(/~annika/images/otoku-parts03.png) no-repeat ;
}

.members_area .inner .btn a{
display: flex;
align-items: center;
justify-content: center;
width: 314px;
height: 54px;
font-size: 2rem;
font-weight: 700;
color: #fff;
background:#3e3a39 url(/~annika/images/icon/icon-arrow02.svg) no-repeat right 12px center;
background-size: 30px auto;
border-radius: 54px;
border: 3px solid #fff;
text-decoration: none;
filter: drop-shadow(0px 4px 0px #f38a88);
transition: 0.3s;
margin:70px auto -25px;
}
.members_area .inner .btn a:hover{
background:#d23f18 url(/~annika/images/icon/icon-arrow02.svg) no-repeat right 12px center;
background-size: 30px auto;
}
@media only screen and (max-width: 767px) {
.members_area{
max-width: 100%;
margin: auto;
padding: 200px 15px 50px ;
}
.members_area .inner{
position: relative;
width: 100%;
margin: auto;
padding: 50px 20px 0;
border: 4px solid #f38a88;
border-radius: 20px;
}
.members_area .inner h2 > *{
position: absolute;
top: -7vw;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 116px;
background: url(/~annika/images/members_h2.png) no-repeat;
background-size: 100% auto;
}
.members_area .inner h2 > * > span:nth-of-type(1){
color:#3e3a39;
position: absolute;
top: -125px;
left: 50%;
transform: translateX(-50%);
font-size: 1.8rem;
white-space: nowrap;
background: url(/~annika/images/otoku-parts01.png) no-repeat top center;
padding-top: 70px;
}
.members_area .inner h2 > * > span:nth-of-type(1)::before{
content: "(";
padding-right: 10px;
}
.members_area .inner h2 > * > span:nth-of-type(1)::after{
content: ")";
padding-left: 10px;
}
.members_area .inner h2 > * > span:nth-of-type(2){
display: flex;
font-size: 4vw;
padding-top: 2.6vw;
}
.members_area .inner .wrap:nth-of-type(1){
display: block;
padding-left: 0;
margin-bottom: 30px;
}
.members_area .inner .wrap:nth-of-type(1) img{
display: block;
max-width: 200px;
margin:0 auto 15px;
}
.members_area .inner .wrap:nth-of-type(1) p{
font-size: 1.4rem;
line-height: 1.5;
}
.members_area .inner .wrap:nth-of-type(2){
display: block;
text-align: center;
}
.members_area .inner .wrap:nth-of-type(2) figure:nth-of-type(2)::before{
position: absolute;
top: -2vw;
left: -2vw;
content: "";
width: 24vw;
height: 34vw;
background:url(/~annika/images/otoku-parts02.png) no-repeat ;
background-size: 100% auto;
}
.members_area .inner .wrap:nth-of-type(2) figure:nth-of-type(2)::after{
position: absolute;
bottom: 3vw;
right: -2vw;
content: "";
width: 22vw;
height: 32vw;
background:url(/~annika/images/otoku-parts03.png) no-repeat ;
background-size: 100% auto;
}
.members_area .inner .wrap:nth-of-type(2) img{
width: auto;
height: 45vw;
margin-bottom: 20px;
}
.members_area .inner .btn a{
width: 90%;
height: 54px;
font-size: 1.5rem;
background:#3e3a39 url(/~annika/images/icon/icon-arrow02.svg) no-repeat right 12px center;
background-size: 25px auto;
border-radius: 54px;
border: 4px solid #fff;
filter: drop-shadow(0px 4px 0px #d6d5d4);
margin:20px auto -25px;
}
.members_area .inner .btn a:hover{
background:#d23f18 url(/~annika/images/icon/icon-arrow02.svg) no-repeat right 12px center;
background-size: 25px auto;
}
}

/*-------------- guide_area ---------------*/
.guide_area{
max-width: 1920px;
margin: auto;
background: #f9f8f4 url(/~annika/images/guide-bg-top.png) no-repeat top center;
}
.guide_area .inner{
width: 1200px;
margin: auto;
padding: 140px 0 0;
}
.guide_area .inner h2{
text-align: center;
}
.guide_area .inner h2 > *{
min-width: 337px;
display: inline-block;
color: #d23f18;
font-size: 4.8rem;
font-weight: 700;
margin-bottom: 60px;
padding: 0 0 40px;
background: url(/~annika/images/h2-parts-r.svg) no-repeat bottom center;
text-decoration: none;
}
.guide_area .inner h2 > * > span:nth-of-type(1){
position: relative;
font-family: "Quicksand", sans-serif;
font-size: 2rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.guide_area .inner h2 > * > span:nth-of-type(1)::before{
display:block;
content: "";
width: 16px;
height: 28px;
padding-left: 30px;
margin-top: 10px;
background: url(/~annika/images/h2-line-r.svg) no-repeat left center;
}
.guide_area .inner h2 > * > span:nth-of-type(1)::after{
transform: scale(-1, 1);
display:block;
content: "";
width: 16px;
height: 28px;
padding-right: 30px;
margin-top: 10px;
background: url(/~annika/images/h2-line-r.svg) no-repeat left center;
}
.guide_area .inner h2 > * > span:nth-of-type(2) {
width: 200px;
display:block;
color: #fff;
font-size: 1.6rem;
font-weight: 700;
padding: 6px 0;
background: #ea5457;
border-radius: 30px;
margin: 0 auto 20px;
}
.guide_area ul{
display: flex;
gap: 30px;
}
.guide_area ul li{
text-align: center;
width: 590px;
}
.guide_area ul li .lead{
display: inline-flex;
align-items: center;
position: relative;
margin-bottom: 15px;
}
.guide_area ul li .lead p{
color: #231815;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.3;
}
.guide_area ul li:nth-of-type(1) .lead p{
margin-top: -12px;
}
.guide_area ul li .lead span{
color: #d23f18;
}
.guide_area ul li .lead span span{
font-size: 3rem;
}
.guide_area ul li .lead::before{
content: "";
width: 25px;
height:50px ;
background: url(/~annika/images/guide-parys01.png) no-repeat;
padding-left: 50px;
}
.guide_area ul li .lead::after{
transform: scale(-1, 1);
content: "";
width: 25px;
height:50px ;
background: url(/~annika/images/guide-parys01.png) no-repeat;
padding-right: 50px;
}
.guide_area ul li a{
display: flex;
align-items: center;
justify-content: center;
width: 590px;
height: 270px;
text-decoration: none;
transition: 0.3s;
}
.guide_area ul li a:hover{
opacity: 0.7;
}
.guide_area ul li:nth-child(1) a{
background:url(/~annika/images/guide-img01.jpg) no-repeat;
}
.guide_area ul li:nth-child(2) a{
background:url(/~annika/images/guide-img02.jpg) no-repeat;
}
.guide_area ul li a .circle{
color: #d23f18;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 200px;
height: 200px;
background: #fff;
border-radius: 50%;
text-align: center;
}
.guide_area ul li a p span:nth-child(1){
width: 137px;
display: block;
font-size: 3.2rem;
font-weight: 600;
padding: 45px 0 15px;
background: url(/~annika/images/guide-dot-line.png) no-repeat center bottom;
}
.guide_area ul li a p span:nth-child(2){
display: block;
font-family: "Quicksand", sans-serif;
font-size: 1.8rem;
font-weight: 700;
padding-top:15px ;
}
.guide_area ul li:nth-child(1) a p span:nth-child(1){
background: url(/~annika/images/icon/icon-shop.svg) no-repeat top center,url(/~annika/images/guide-dot-line.png) no-repeat center bottom;
}
.guide_area ul li:nth-child(2) a p span:nth-child(1){
background: url(/~annika/images/icon/icon-price.svg) no-repeat top center,url(/~annika/images/guide-dot-line.png) no-repeat center bottom;
}
@media only screen and (max-width: 767px) {
.guide_area{
max-width: 100%;
background: #f9f8f4 url(/~annika/images/guide-bg-top.png) no-repeat top center;
background-size: 200% auto;
}
.guide_area .inner{
width: 100%;
padding: 50px 15px 0;
}
.guide_area .inner h2 > *{
min-width: auto;
font-size: 2.4rem;
margin-bottom: 50px;
padding: 0 0 30px;
}
.guide_area .inner h2 > * > span:nth-of-type(1){
font-size: 1.6rem;
margin-bottom: 10px;
}
.guide_area .inner h2 > * > span:nth-of-type(1)::before{
padding-left: 30px;
margin-top: 5px;
}
.guide_area .inner h2 > * > span:nth-of-type(1)::after{
padding-right: 30px;
margin-top: 5px;
}
.guide_area .inner h2 > * > span:nth-of-type(2) {
width: auto;
font-size: 1.3rem;
padding: 6px 20px;
margin: 0 auto 10px;
}
.guide_area ul{
display: block;
}
.guide_area ul li{
text-align: center;
width: 100%;
margin-bottom: 40px;
}
.guide_area ul li:last-child{
margin-bottom: 0;
}
.guide_area ul li .lead{
margin-bottom: 10px;
}
.guide_area ul li .lead p{
font-size: 1.6rem;
}
.guide_area ul li:nth-of-type(1) .lead p{
margin-top: -12px;
}
.guide_area ul li .lead span span{
font-size: 2.4rem;
}
.guide_area ul li .lead::before{
padding-left: 40px;
}
.guide_area ul li .lead::after{
padding-right: 40px;
}
.guide_area ul li a{
position: relative;
width: 100%;
height: auto;
padding-top: 45.76%;
}
.guide_area ul li:nth-child(1) a{
background:url(/~annika/images/guide-img01.jpg) no-repeat;
background-size: cover;
}
.guide_area ul li:nth-child(2) a{
background:url(/~annika/images/guide-img02.jpg) no-repeat;
background-size: cover;
}
.guide_area ul li a .circle{
position: absolute;

top: 50%;
transform: translateY(-52%);
width: 30vw;
height: 30vw;
}
.guide_area ul li a .circle p{
width: 80%;
}
.guide_area ul li a p span:nth-child(1){
width: auto;
font-size: 5vw;
padding: 10vw 0 3vw;
background: url(/~annika/images/guide-dot-line.png) no-repeat center bottom;
}
.guide_area ul li a p span:nth-child(2){
font-size: 4vw;
padding-top:2vw ;
}
.guide_area ul li:nth-child(1) a p span:nth-child(1){
background: url(/~annika/images/icon/icon-shop.svg) no-repeat top center,url(/~annika/images/guide-dot-line.png) no-repeat center bottom;
background-size: auto 40%,auto 2px;
}
.guide_area ul li:nth-child(2) a p span:nth-child(1){
background: url(/~annika/images/icon/icon-price.svg) no-repeat top center,url(/~annika/images/guide-dot-line.png) no-repeat center bottom;
background-size: auto 40%,auto 2px;
}
}

/*-------------- otoku_area ---------------*/
.otoku_area{
max-width: 1920px;
margin: auto;
background: #fff url(/~annika/images/otoku-bg-top.png) no-repeat top center;
}
.otoku_area .inner{
width: 1200px;
margin: auto;
padding: 120px 0 0;
}
.otoku_area .inner h2{
text-align: center;
}
.otoku_area .inner h2 > *{
min-width: 337px;
display: inline-block;
color: #d23f18;
font-weight: 700;
margin-bottom: 60px;
padding: 0 0 40px;
background: url(/~annika/images/h2-parts-r.svg) no-repeat bottom center;
text-decoration: none;
transition: 0.3s;
}
.otoku_area .inner h2 a:hover{
opacity: 0.7;
}
.otoku_area .inner h2 > * span:nth-child(1){
position: relative;
font-family: "Quicksand", sans-serif;
font-size: 2rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.otoku_area .inner h2 > * span:nth-child(1)::before{
display:block;
content: "";
width: 16px;
height: 28px;
padding-left: 30px;
margin-top: 10px;
background: url(/~annika/images/h2-line-r.svg) no-repeat left center;
}
.otoku_area .inner h2 > * span:nth-child(1)::after{
transform: scale(-1, 1);
display:block;
content: "";
width: 16px;
height: 28px;
padding-right: 30px;
margin-top: 10px;
background: url(/~annika/images/h2-line-r.svg) no-repeat left center;
}
.otoku_area .inner h2 > * span:nth-child(2){
display: block;
font-size: 4.8rem;
}
.otoku_area .inner .bnr{
padding: 0 0 140px;
}
.otoku_area .inner .bnr a{
transition: 0.3s;
}
.otoku_area .inner .bnr a:hover{
opacity: 0.7;
}
.otoku_area .inner .wrap{
position: relative;
width: 1400px;
margin-left:-100px ;
background: #f7f8f8;
padding: 120px 100px 115px;
border-radius: 80px;
text-align: center;
}
.otoku_area .inner .wrap h3{
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 1.6rem;
font-weight: 700;
background: #ea5457;
width:280px;
height: 40px;
border-radius: 20px 20px 0 0;
}
.otoku_area .inner .wrap ul{
width: 1205px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 25px ; 
}
.otoku_area .inner .wrap ul li{
position: relative;
}
.otoku_area .inner .wrap ul.col02 {
width: 795px;
margin: 0 auto;
}
.otoku_area .inner .wrap section:nth-of-type(1) ul li:nth-of-type(1):before{
position: absolute;
top: -45px;
left: -40px;
content: "";
display: block;
width: 136px;
height: 179px;
background:url(/~annika/images/otoku-shirt.png) no-repeat ;
}
.otoku_area .inner .wrap h4{
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.2rem;
font-weight: 700;
margin: 120px 0 50px;
}
.otoku_area .inner .wrap h4::before{
content: "";
width: 190px;
height: 10px;
background: url(/~annika/images/dot_line.png) no-repeat;
margin-right: 40px;
}
.otoku_area .inner .wrap h4::after{
content: "";
width: 190px;
height: 10px;
background: url(/~annika/images/dot_line.png) no-repeat;
margin-left: 40px;
}
.otoku_area .inner .wrap section:nth-of-type(1) h4{
margin: 0 0 50px;
}
.otoku_area .inner .wrap section:nth-of-type(3) h4{
background: url(/~annika/images/otoku-parts01.png) no-repeat top center;
padding-top: 80px;
}
@media only screen and (max-width: 767px) {
.otoku_area{
max-width: 100%;
background: #fff url(/~annika/images/otoku-bg-top.png) no-repeat top center;
background-size: 100% auto;
}
.otoku_area .inner{
width: 100%;
padding:50px 15px 0;
}
.otoku_area .inner h2 > *{
min-width: auto;
margin-bottom: 50px;
padding: 0 0 30px;
}
.otoku_area .inner h2 > * span:nth-child(1){
font-size: 1.6rem;
margin-bottom: 10px;
}
.otoku_area .inner h2 > * span:nth-child(1)::before{
padding-left: 30px;
margin-top: 5px;
}
.otoku_area .inner h2 > * span:nth-child(1)::after{
padding-right: 30px;
margin-top: 5px;
}
.otoku_area .inner h2 > * span:nth-child(2){
	font-size: 2.4rem;
}
.otoku_area .inner .bnr{
padding: 0 0 100px;
}
.otoku_area .inner .bnr a{
transition: 0.3s;
}
.otoku_area .inner .wrap{
width: 100%;
margin-left:0 ;
padding: 15px 8vw;
border-radius: 20px;
}
.otoku_area .inner .wrap h3{
top: -50px;
font-size: 1.4rem;
line-height: 1.2;
width:70%;
height: 50px;
padding: 0 15px;
border-radius: 10px 10px 0 0;
}
.otoku_area .inner .wrap ul,
.otoku_area .inner .wrap ul.col02{
width: 100%;
display: block; 
}
.otoku_area .inner .wrap ul li{
margin:0 auto 20px;
}
.otoku_area .inner .wrap ul li img{
width: 100%;
height: auto;
}
.otoku_area .inner .wrap section:nth-of-type(1) ul li:nth-of-type(1)::before{
position: absolute;
top: -6vw;
left: -9vw;
content: "";
display: block;
width: 24vw;
height: 32vw;
background:url(/~annika/images/otoku-shirt.png) no-repeat ;
background-size: 100% auto;
}
.otoku_area .inner .wrap h4{
display: block;
font-size: 1.8rem;
margin: 50px 0 20px;
}
.otoku_area .inner .wrap h4::after{
display: block;
content: "";
width: 100%;
height: 10px;
background: url(/~annika/images/dot_line.png) no-repeat center;
margin: 20px 0 0;
}
.otoku_area .inner .wrap h4::before{
display: none;
}
.otoku_area .inner .wrap section:nth-of-type(1) h4{
margin: 30px 0 20px;
}
.otoku_area .inner .wrap section:nth-of-type(3) h4{
background: url(/~annika/images/otoku-parts01.png) no-repeat top center;
padding-top: 65px;
}
}

/*-------------- service_area ---------------*/
.service_area{
max-width: 1920px;
margin: auto;
}
.service_area .inner{
width: 1200px;
margin: auto;
padding: 120px 0 190px;
}
.service_area .inner h2{
text-align: center;
}
.service_area .inner h2 > *{
min-width: 337px;
display: inline-block;
color: #d23f18;
font-weight: 700;
margin-bottom: 60px;
padding: 0 0 40px;
background: url(/~annika/images/h2-parts-r.svg) no-repeat bottom center;
text-decoration: none;
transition: 0.3s;
}
.service_area .inner h2 a:hover{
opacity: 0.7;
}
.service_area .inner h2 > * span:nth-child(1){
position: relative;
font-family: "Quicksand", sans-serif;
font-size: 2rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.service_area .inner h2 > * span:nth-child(1)::before{
display:block;
content: "";
width: 16px;
height: 28px;
padding-left: 30px;
margin-top: 10px;
background: url(/~annika/images/h2-line-r.svg) no-repeat left center;
}
.service_area .inner h2 > * span:nth-child(1)::after{
transform: scale(-1, 1);
display:block;
content: "";
width: 16px;
height: 28px;
padding-right: 30px;
margin-top: 10px;
background: url(/~annika/images/h2-line-r.svg) no-repeat left center;
}
.service_area .inner h2 > * span:nth-child(2){
display: block;
font-size: 4.8rem;
}
.service_area ul{
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.service_area ul li{
width: 285px;
height: 187px;
}
.service_area ul li a{
position: relative;
display: block;
width: 285px;
height: 187px;
border-radius: 20px;
transition: 0.3s;
text-decoration: none;
}
.service_area ul li a:hover{
opacity: 0.7;
}
.service_area ul li.srv_repair a{
background: url(/~annika/images/service-img01.jpg) no-repeat;
background-size: 100% auto;
}
.service_area ul li.srv_leather a{
background: url(/~annika/images/service-img07.jpg) no-repeat;
background-size: 100% auto;
}
.service_area ul li.srv_futon a{
background: url(/~annika/images/service-img03.jpg) no-repeat;
background-size: 100% auto;
}
.service_area ul li.srv_carpet a{
background: url(/~annika/images/service-img04.jpg) no-repeat;
background-size: 100% auto;
}
.service_area ul li.srv_baby a{
background: url(/~annika/images/service-img05.jpg) no-repeat;
background-size: 100% auto;
}
.service_area ul li.srv_locker a{
background: url(/~annika/images/service-img06.jpg) no-repeat;
background-size: 100% auto;
}
.service_area ul li.srv_laundry a{
background: url(/~annika/images/service-img02.jpg) no-repeat;
background-size: 100% auto;
}
.service_area ul li.srv_mouton a{
background: url(/~annika/images/service-img09.jpg) no-repeat;
background-size: 100% auto;
}
.service_area ul li a p{
position: absolute;
left: 0;
bottom: 20px;
}
.service_area ul li:nth-child(2) a p,
.service_area ul li:nth-child(7) a p{
position: absolute;
left: 0;
bottom: 30px;
}
.service_area ul li a span{
display: inline-block;
color: #fff;
font-size: 2.6rem;
font-weight: 700;
background: #ea5457;
padding: 8px;
}
@media only screen and (max-width: 767px) {
.service_area{
max-width: 100%;
}
.service_area .inner{
width: 100%;
padding: 50px 15px;
}
.service_area .inner h2 > *{
min-width: auto;
margin-bottom: 50px;
padding: 0 0 30px;
}
.service_area .inner h2 > * span:nth-child(1){
font-size: 1.6rem;
margin-bottom: 10px;
}
.service_area .inner h2 > * span:nth-child(1)::before{
padding-left: 30px;
margin-top: 5px;
}
.service_area .inner h2 > * span:nth-child(1)::after{
padding-right: 30px;
margin-top: 5px;
}
.service_area .inner h2 > * span:nth-child(2) {
	font-size: 2.4rem;
}
.service_area ul{
gap: 10px;
}
.service_area ul li{
width: calc((100% - 10px) / 2);
height: auto;
}
.service_area ul li a{
width: 100%;
height: auto;
border-radius: 20px;
padding-top: 65.78%;
}
.service_area ul li a p{
position: absolute;
left: 0;
bottom: 3vw;
}
.service_area ul li:nth-child(2) a p,
.service_area ul li:nth-child(7) a p{
position: absolute;
left: 0;
bottom: 5vw;
}
.service_area ul li a span{
font-size: 4vw;
padding: 5px;
}
}

/*-------------- policy_area ---------------*/
.policy_area{
position: relative;
max-width: 1920px;
height: 1700px;
margin: auto;
background: url(/~annika/images/policy-bg.jpg) no-repeat top center;
}
.policy_area .inner::before{
position: absolute;
left: -220px;
top: 300px;
content: "";
width:430px ;
height: 430px;
background: url(/~annika/images/policy-pasts01.jpg) no-repeat;
border-radius: 50%;
border: 10px solid #fff;
z-index: 2;
}
.policy_area .inner::after{
position: absolute;
left: -20px;
top: 610px;
content: "";
width:320px ;
height: 320px;
background: url(/~annika/images/policy-pasts02.jpg) no-repeat;
border-radius: 50%;
border: 10px solid #fff;
z-index: 2;
}
.policy_area .inner{
position: relative;
width: 1200px;
margin: auto;
padding: 490px 0 0;
}
.policy_area .inner h2{
position: relative;
text-align: center;
height: 200px;
}
.policy_area .inner h2::after{
position: absolute;
right: -70px;
top: -100px;
content: "";
width:371px ;
height: 513px;
background: url(/~annika/images/policy-pasts03.png) no-repeat;
z-index: 2;
}
.policy_area .inner h2 a{
display: inline-block;
transition: 0.3s;
}
.policy_area .inner h2 a:hover{
opacity: 0.7;
}
.policy_area .inner h2 > * p{
position: relative;
height: 200px;
display: inline-flex;
align-items: center;
color: #d23f18;
font-size: 4.8rem;
font-weight: 700;
text-decoration: none;
z-index: 2;
}
.policy_area .inner h2 > * p span{
position: relative;
font-size: 4.8rem;
}
.policy_area .inner h2 > * p span::before{
content: "";
position: absolute;
top: -15px;
left: 50%;
width: 8px;
height: 8px;
border-radius: 8px;
transform: translateX(-50%);
background: #d23f18;
}
.policy_area .inner h2 > *::after{
display: block;
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
content: "Policy";
color: #fff;
font-family: "Quicksand", sans-serif;
font-size: 22rem;
font-weight: 700;
z-index: 1;
pointer-events: none;
}
.policy_area .inner .catch{
text-align: center;
font-size: 3.2rem;
font-weight: 700;
}
.policy_area .inner .catch span{
display: inline-block;
background:url(/~annika/images/policy-dot-line.png) repeat-x bottom left;
padding-bottom: 10px;
margin-bottom: 20px;
}
.policy_area .inner .btn a{
display: flex;
align-items: center;
justify-content: center;
width: 314px;
height: 64px;
font-size: 2rem;
font-weight: 700;
color: #fff;
background:#3e3a39 url(/~annika/images/icon/icon-arrow02.svg) no-repeat right 12px center;
background-size: 30px auto;
border-radius: 64px;
border: 5px solid #fff;
text-decoration: none;
filter: drop-shadow(0px 5px 0px #d6d5d4);
transition: 0.3s;
margin:60px auto;
}
.policy_area .inner .btn a:hover{
background:#d23f18 url(/~annika/images/icon/icon-arrow02.svg) no-repeat right 12px center;
background-size: 30px auto;
color: #3e3a39;
}
.policy_area .inner .initiative_area a {
position: relative;
width: 1200px;
height: 320px;
margin-top: 130px;
display: flex;
justify-content: space-between;
padding: 90px 180px 0 160px;
background: url(/~annika/images/initiative-bg.jpg) no-repeat;
border-radius: 40px;
border: 8px solid #e1dfd7;
text-decoration: none;
transition: 0.3s;
box-sizing: border-box;
}
.policy_area .inner .initiative_area a:hover{
opacity: 0.7;
}
.policy_area .inner .initiative_area a:before{
position: absolute;
top:-52px ;
left:20px ;
content: "";
width: 231px;
height: 198px;
background: url(/~annika/images/initiative-parts.png) no-repeat;
}
.policy_area .inner .initiative_area h3{
color: #00a291;
}
.policy_area .inner .initiative_area h3 span:nth-of-type(1){
display: inline-block;
font-size: 4rem;
font-weight: 700;
margin-bottom: 3px;
}
.policy_area .inner .initiative_area h3 span:nth-of-type(1) span {
font-size: 4.8rem;
}
.policy_area .inner .initiative_area h3 span:nth-of-type(2){
display: inline-block;
font-family: "Quicksand", sans-serif;
font-size: 2rem;
font-weight: 700;
}
.policy_area .inner .initiative_area p{
font-size: 1.8rem;
font-weight: 500;
line-height: 1.5;
}
@media only screen and (max-width: 767px) {
.policy_area{
max-width: 100%;
height: auto;
background:#f9f8f4 url(/~annika/images/policy-bg-sp.jpg) no-repeat top center;
background-size: 100% auto;
}
.policy_area .inner::before {
position: absolute;
left: -12vw;
top: -12vw;
content: "";
width: 40vw;
height: 40vw;
background: url(/~annika/images/policy-pasts01.jpg) no-repeat;
background-size: 100% auto;
border: 1.5vw solid #fff;
}
.policy_area .inner::after{
position: absolute;
left: 5vw;
top: 20vw;
content: "";
width: 35vw;
height: 35vw;
background: url(/~annika/images/policy-pasts02.jpg) no-repeat;
background-size: 100% auto;
border: 1.5vw solid #fff;
}
.policy_area .inner{
width: 100%;
padding: 60% 15px 100px;
}
.policy_area .inner h2{
position: relative;
text-align: center;
height: 30vw;
}
.policy_area .inner h2::after{
position: absolute;
right: -5vw;
top: -40vw;
content: "";
width: 40vw;
height: 55vw;
background: url(/~annika/images/policy-pasts03.png) no-repeat;
background-size: 100% auto;
}
.policy_area .inner h2 > * p{
height: 30vw;
font-size: 2.4rem;
}
.policy_area .inner h2 > * p span {
	font-size: 2.4rem;
}
.policy_area .inner h2 > * p span::before{
content: "";
position: absolute;
top: -8px;
width: 5px;
height: 5px;
border-radius: 5px;
}
.policy_area .inner h2 > *::after{
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
content: "Policy";
font-size: 30vw;
height: 30vw;
}
.policy_area .inner .catch{
font-size: 1.8rem;
}
.policy_area .inner .catch span{
margin-bottom: 20px;
}
.policy_area .inner .btn a{
width: 90%;
height: 60px;
font-size: 1.5rem;
background:#3e3a39 url(/~annika/images/icon/icon-arrow02.svg) no-repeat right 12px center;
background-size: 25px auto;
border-radius: 60px;
border: 4px solid #fff;
filter: drop-shadow(0px 4px 0px #d6d5d4);
margin:40px auto;
}
.policy_area .inner .btn a:hover{
background:#d23f18 url(/~annika/images/icon/icon-arrow02.svg) no-repeat right 12px center;
background-size: 25px auto;
}
.policy_area .inner .initiative_area a {
position: relative;
width: 100%;
height: auto;
display: block;
justify-content: space-between;
margin-top: 100px;
padding: 70px 20px 25vw;
background: #fff url(/~annika/images/initiative-bg.jpg) no-repeat bottom left -50px;
background-size: 250% auto;
border-radius: 20px;
border: 5px solid #e1dfd7;
}
.policy_area .inner .initiative_area a::before{
position: absolute;
top:-75px ;
left:56% ;
transform: translateX(-50%);
content: "";
width: 170px;
height: 144px;
background: url(/~annika/images/initiative-parts.png) no-repeat;
background-size: 100% auto;
}
.policy_area .inner .initiative_area h3 {
position: relative;
text-align: center;
margin-bottom: 20px;
z-index: 1;
}
.policy_area .inner .initiative_area h3 a{
color: #00a291;
text-decoration: none;
transition: 0.3s;
}
.policy_area .inner .initiative_area h3 span:nth-of-type(1){
font-size: 2.4rem;
margin-bottom: 3px;
}
.policy_area .inner .initiative_area h3 span:nth-of-type(1) span {
font-size: 3rem;
}
.policy_area .inner .initiative_area h3 span:nth-of-type(2){
font-size: 1.6rem;
}
.policy_area .inner .initiative_area p{
font-size: 1.4rem;
line-height: 1.4;
}
.policy_area .inner .initiative_area p br{
display: none;
}
}

/*-------------- cast_area ---------------*/
.cast_area{
max-width: 1920px;
height: 560px;
margin: auto;
background: url(/~annika/images/cast-bg.jpg) no-repeat top center;
}
.cast_area .inner{
position: relative;
width: 1200px;
margin: auto;
padding: 75px 0 0;
}
.cast_area .inner::before{
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
display: inline-block;
content: "";
width: 750px;
height:40px ;
background: url(/~annika/images/cast-bg-top.png) no-repeat top center;
}
.cast_area .inner .catch{
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 400px;
margin: auto;
}
.cast_area .inner .catch p{
position: relative;
height: 134px;
margin: auto;
font-size: 3.2rem;
font-weight: 700;
line-height: 1.4;
padding-top: 10px;
text-align: center;
}
.cast_area .inner .catch::before{
display: inline-block;
content: "";
width: 35px;
height:134px ;
background: url(/~annika/images/h2-cast.png) no-repeat center left;
}
.cast_area .inner .catch::after{
transform: scale(-1, 1);
display: inline-block;
content: "";
width: 35px;
height:134px ;
background: url(/~annika/images/h2-cast.png) no-repeat center left;
}
.cast_area .inner .catch p::before{
position: absolute;
top: -180px;
left: 50%;
transform: translateX(-50%);
display: block;
content: "";
width: 150px;
height:178px ;
background: url(/~annika/images/cast-parts.png) no-repeat top center;
}
.cast_area .inner .catch span{
font-size: 4rem;
}
.cast_area .inner .wrap{
width: 540px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
margin: 115px auto 10px;
}
.cast_area .inner h2 > *{
width: 540px;
display:block;
color: #fff;
font-weight: 700;
text-decoration: none;
line-height: 0;
padding-bottom:34px;
background: url(/~annika/images/icon/icon-arrow01.svg) no-repeat right center;
transition: 0.3s;
}
.cast_area .inner h2 a:hover{
opacity: 0.7;
}
.cast_area .inner h2 > * span:nth-child(1){
position: relative;
font-family: "Quicksand", sans-serif;
font-size: 2rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.cast_area .inner h2 > * span:nth-child(2){
display: block;
line-height: 1;
font-size: 4.8rem;
}
.cast_area .inner > .wrap p{
width: 540px;
color: #fff;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.8;
letter-spacing: 0;
margin: auto;
}
@media only screen and (max-width: 767px) {
.cast_area{
max-width: 100%;
height: auto;
background:#fff;
}
.cast_area .inner{
position: relative;
width: 100%;
padding: 60px 15px 0;
}
.cast_area .inner::before{
display: none;
}
.cast_area .inner .catch{
position: relative;
width: calc(100% - 60px );
}
.cast_area .inner .catch p{
white-space: nowrap;
height:100px ;
font-size: 1.8rem;
margin: auto;
}
.cast_area .inner .catch::before{
display: block;
content: "";
width: 20px;
height: 100px;
background: url(/~annika/images/h2-cast.png) no-repeat center left;
background-size: auto 100px;
flex-shrink: 0;
}
.cast_area .inner .catch::after{
transform: scale(-1, 1);
display: block;
content: "";
width: 20px;
height:100px ;
background: url(/~annika/images/h2-cast.png) no-repeat center left;
background-size:auto 100px ;
flex-shrink: 0;
}
.cast_area .inner .catch p::before{
position: absolute;
top: -110px;
left: 50%;
transform: translateX(-50%);
display: block;
content: "";
width: 100px;
height:118px ;
background: url(/~annika/images/cast-parts.png) no-repeat top center;
background-size: 100% auto;
}
.cast_area .inner .catch span{
font-size: 2.8rem;
}
.cast_area .inner .wrap{
position: relative;
width: calc(100% + 30px);
display: block;
padding: 30px;
margin: 55vw 0 0 -15px;
background:#fff url(/~annika/images/cast-bg02-sp.jpg) no-repeat bottom center;
background-size: cover;
}
.cast_area .inner .wrap::before{
position: absolute;
left: 0;
top: -42vw;
display: block;
content: "";
width: 100%;
height: auto;
padding-top: 45.14%;
background:url(/~annika/images/cast-bg01-sp.jpg) no-repeat bottom center;
background-size:100% auto ;
}
.cast_area .inner h2 > *{
display: block;
width:100%;
font-size: 2.4rem;
padding-bottom: 15px;
background: url(/~annika/images/icon/icon-arrow01.svg) no-repeat right center;
background-size: 30px;
}
.cast_area .inner h2 > * span:nth-child(1){
font-size: 1.6rem;
margin-bottom: 15px;
}
.cast_area .inner h2 > * span:nth-child(2){
font-size: 2.4rem;
}
.cast_area .inner > .wrap p{
width: 100%;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
}
}