/* ============================== TOP ============================== */ @charset "utf-8"; /* CSS Document */ #bg1, #bg2 {position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: -10000;} #bg1{background: url(../../img/top/bg_1.png) repeat-y top left/100% auto;} #bg2{background: url(../../img/top/bg_2.png) repeat-y top left/100% auto;} #top #mainvisual{position: relative; overflow: hidden;} #top #mainvisual .slider li img{width: 100%;} #top h2{font-size: 30px; line-height: 1; color: #f05c84; text-align: center; height: 220px; position: relative; font-family: 'Kosugi Maru', sans-serif; padding: 60px 0 0 0; margin: 0 auto 30px; font-weight: bold;} #top h2:before{content: ''; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; background: url("../../img/top/h2_bg.png") no-repeat top center/auto 100%; z-index: 0;} #top h2 span{z-index: 10; position: relative;} #top .box-txt{max-width: 600px; width: 90%; margin: 0 auto 30px; text-align: center; line-height: 1.9; font-size: 18px;} #top .btn-more{margin: 0 auto 10px; width: 142px;} #top #concept{margin: 50px 0 100px; position: relative;} #top #concept .img{position: absolute; top: 0; right: calc(50% - 340px); width: 200px;} /* #top #point{margin: 0 0 100px; background:url("../../img/top/point_bg.png") no-repeat top center; overflow: hidden; position: relative;} #top #point .box{position: relative; max-width: 1143px; margin: 0 auto; z-index: 10;} #top #point .item{position: absolute; display: flex; align-items: center; text-align: center; justify-content: center; background-size: 100%; background-position: 0 0; background-repeat: no-repeat;} #top #point .item p{padding: 55px 0 0 0; color: #1999fb; font-family: 'Kosugi Maru', sans-serif; position: relative;} #top #point .item p:before{position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 32px; height: 45px; content: ''; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;} #top #point #item1{left: 28.61%; top: 4.43%; width: 20.65%; height: 40.4%; background-image: url("../../img/top/point_1.png");} #top #point #item1 p:before{background-image: url("../../img/top/point_num1.png");} #top #point #item2{left: 52.32%; top: 7.22%; width: 21.35%; height: 37.60%; background-image: url("../../img/top/point_2.png");} #top #point #item2 p:before{background-image: url("../../img/top/point_num2.png");} #top #point #item3{left: 13.04%; top: 31.86%; width: 18.99%; height: 35.47%; background-image: url("../../img/top/point_3.png");} #top #point #item3 p:before{background-image: url("../../img/top/point_num3.png");} #top #point #item4{left: 40.77%; top: 61.08%; width: 20.12%; height: 37.77%; background-image: url("../../img/top/point_4.png");} #top #point #item4 p:before{background-image: url("../../img/top/point_num4.png");} #top #point #item5{left: 69.47%; top: 41.38%; width: 20.47%; height: 37.44%; background-image: url("../../img/top/point_5.png");} #top #point #item5 p:before{background-image: url("../../img/top/point_num5.png");} #top #point .btn-more{position: relative; top: 0; left: 0; right: 0; margin: 0 auto;} #top #point .confetti{position: absolute; top: 0; width: 100%; height: 300%; z-index: 0; animation: confettiAni 18s linear infinite; -webkit-animation: confettiAni 18s linear infinite; background: url("../../img/top/point_confetti.png") repeat-y top center;} */ #top #point{margin: 0 0 100px; background:url("../../img/top/point_bg.png") no-repeat top center; overflow: hidden; position: relative;} #top #point .box{position: relative; max-width: 1143px; margin: 0 auto; z-index: 10;} #top #point .item{position: absolute; display: flex; align-items: center; text-align: center; justify-content: center; background-size: 100%; background-position: 0 0; background-repeat: no-repeat;} #top #point .item p{padding: 55px 0 0 0; color: #1999fb; font-family: 'Kosugi Maru', sans-serif; position: relative;} #top #point .item p:before{position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 32px; height: 45px; content: ''; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;} #top #point #item1{left: 28.61%; top: 4.43%; width: 20.65%; height: 40.4%; background-image: url("../../img/top/point_1.png");} #top #point #item1 p:before{background-image: url("../../img/top/point_num1.png");} #top #point #item2{left: 52.32%; top: 7.22%; width: 21.35%; height: 37.60%; background-image: url("../../img/top/point_2.png");} #top #point #item2 p:before{background-image: url("../../img/top/point_num2.png");} #top #point #item3{left: 13.04%; top: 31.86%; width: 18.99%; height: 35.47%; background-image: url("../../img/top/point_3.png");} #top #point #item3 p:before{background-image: url("../../img/top/point_num3.png");} #top #point #item4{left: 40.77%; top: 61.08%; width: 20.12%; height: 37.77%; background-image: url("../../img/top/point_4.png");} #top #point #item4 p:before{background-image: url("../../img/top/point_num4.png");} #top #point #item5{left: 69.47%; top: 41.38%; width: 20.47%; height: 37.44%; background-image: url("../../img/top/point_5.png");} #top #point #item5 p:before{background-image: url("../../img/top/point_num5.png");} #top #point .btn-more{position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;} #top #point .confetti{position: absolute; top: 0; width: 100%; height: 300%; z-index: 0; animation: confettiAni 18s linear infinite; -webkit-animation: confettiAni 18s linear infinite; background: url("../../img/top/point_confetti.png") repeat-y top center;} @keyframes confettiAni { 0%{transform: rotate(0deg) translate3d(0, -50%, 0);} 50%{transform: rotate(5deg) translate3d(0, -25%, 0);} 100%{transform: rotate(0deg) translate3d(0, 0%, 0);} } @-webkit-keyframes confettiAni { 0%{transform: rotate(0deg) translate3d(0, -50%, 0);} 50%{transform: rotate(5deg) translate3d(0, -25%, 0);} 100%{transform: rotate(0deg) translate3d(0, 0%, 0);} } #top #plan2{margin: 0 0 160px;} #top #plan2 .box-txt{margin: 0 auto 30px;} #top #plan2 .box{max-width: 1040px; width: 94%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;} #top #plan2 .box .item{width: 46.15%; position: relative;} #top #plan2 .box .inner{position: absolute; top: 47%; left: 15%; right: 5%;} #top #plan2 .box .tit{font-size: 24px; line-height: 1.5; font-family: 'Kosugi Maru', sans-serif; padding: 0 0 15px; margin: 0 0 15px; font-weight: bold;} #top #plan2 .box .txt{margin: 0 0 20px;} #top #plan2 .box .price{font-size: 24px; line-height: 1.4; font-weight: bold; font-family: 'Kosugi Maru', sans-serif; margin: 0 auto; max-width: 230px; width: 60%; text-align: center;} #top #plan2 .box .item1 .tit{color: #ff659f; background: url("../../img/top/plan_line1.png") no-repeat bottom left;} #top #plan2 .box .item1 .price{color: #ff659f; border-top: 2px solid #ff659f;} #top #plan2 .box .item2 .tit{color: #1259b0; background: url("../../img/top/plan_line2.png") no-repeat bottom left;} #top #plan2 .box .item2 .price{color: #1259b0; border-top: 2px solid #1259b0;} #top #plan2 .btn-more2{text-align: center; margin: 0 0 25px;} #top #plan2 .btn-more2 a{background: url("../../img/top/btn_more2.png") no-repeat bottom center; display: inline-block; font-size: 18px; line-height: 1.3; color: #1d9bfb; font-weight: bold; padding: 0 0 20px;} #top #plan2 .btn-more2 a:hover{color: #f05c84; background: url("../../img/top/btn_more2_over.png") no-repeat bottom center;} #top #clothes2{margin: 0 0 100px; position: relative;} #top #clothes2 .img{position: absolute; top: 0; left: calc(50% - 370px); width: 245px;} #top #clothes2 .tit{text-align: center; background: url("../../img/top/clothes_line.png") no-repeat bottom center; padding: 0 0 10px; font-size: 22px; color: #f05c84; font-weight: bold; margin: 20px 0;} #top #clothes2 .tit:before, #top #clothes2 .tit:after{content: ''; width: 42px; height: 58px; display: inline-block; vertical-align: middle;} #top #clothes2 .tit:before{margin: 0 15px 0 0; background: url("../../img/top/clothes_label1.png") no-repeat top left/100% auto;} #top #clothes2 .tit:after{margin: 0 0 0 15px; background: url("../../img/top/clothes_label2.png") no-repeat top left/100% auto;} #top #clothes2 .btn-more2{text-align: center; margin: 0 0 25px;} #top #clothes2 .btn-more2 a{background: url("../../img/top/btn_more2.png") no-repeat bottom center; display: inline-block; font-size: 18px; line-height: 1.3; color: #1d9bfb; font-weight: bold; padding: 0 0 20px;} #top #clothes2 .btn-more2 a:hover{color: #f05c84; background: url("../../img/top/btn_more2_over.png") no-repeat bottom center;} /* #top #clothes2 .list{max-width: 980px; margin: 0 auto; width: 94%; display: flex; justify-content: space-between; flex-wrap: wrap;} #top #clothes2 .list li{max-width: 274px; text-align: center; width: 32%;} #top #clothes2 .list li figure{position: relative; margin: 0 auto 32px;} #top #clothes2 .list li figcaption{width: 101px; height: 34px; line-height: 34px; position: absolute; bottom: -22px; left: 0; right: 0; margin: 0 auto; font-size: 18px; color: #fff; background: url("../../img/top/clothes_bg.png") no-repeat;} #top #clothes2 .list li .txt{margin: 0 0 10px;} #top #clothes2 .list li .like{font-size: 18px; font-weight: bold; cursor: pointer; color: #f05c84;} #top #clothes2 .list li .like:after{background: url("../../img/common/ic_heart.gif") no-repeat top left/100% auto; content: ''; width: 34px; height: 24px; display: inline-block; margin: 0 0 0 10px;} #top #clothes2 .list li:nth-of-type(4){display: none;} */ #top #studio{position: relative; background: url("../../img/top/studio_bg2.png"); padding: 50px 0 1px; text-align: center; font-size: 18px;} #top #studio:before{content: ''; position: absolute; top: -33px; left: 0; width: 100%; height: 33px; background: url("../../img/top/studio_bg1.png") repeat-x top left;} #top #studio:after{content: ''; position: absolute; bottom: -40px; left: 0; width: 100%; height: 40px; background: url("../../img/top/studio_bg3.png") repeat-x bottom left;} #top #studio .list{margin: 0 auto 50px; width: 94%;} #top #studio .list li{margin: 0 0 30px;} #top #studio .list li:last-of-type{margin: 0;} #top #studio .list .txt{display: inline-block; font-size: 22px; color: #f26555; position: relative; font-weight: bold;} #top #studio .list .txt:after{content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 7px; background: url("../../img/top/studio_line1.png") no-repeat bottom center/100% 100%;} #top #studio .list .txt2{display: inline-block; font-size: 20px; color: #f05c84; position: relative; font-weight: bold;} #top #studio .list .txt2:after{content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 5px; background: url("../../img/top/studio_line2.png") no-repeat bottom center/100% 100%;} #top #studio .list2{display: inline-block; text-align: left; margin: 0 auto 50px; padding: 0 3%;} #top #studio .list2 li{margin: 0 0 30px; padding: 0 0 0 45px; position: relative;} #top #studio .list2 li:last-of-type{margin: 0;} #top #studio .list2 li span{position: absolute; top: 0; left: 0; width: 26px; height: 26px; text-align: center; line-height: 26px; color: #fff; background: #f05d85; border-radius: 100%;} #top #news{padding: 100px 0;} #top #news h3{font-size: 24px; color: #f05c84; font-family: 'Kosugi Maru', sans-serif; text-align: center; margin: 0 0 50px; font-weight: bold;} #top #news h3:before{display: inline-block; vertical-align: middle; content: ''; width: 62px; height: 56px; background: url("../../img/top/news_icon.png") no-repeat top center/100% auto; margin: 0 0.5em 0 0;} /*#top #news h3:after{display: inline-block; vertical-align: middle; content: ''; width: 82px; height: 21px; background: url("../../img/top/news_tit.png") no-repeat top center/100% auto; margin: 0 0 0 0.5em;}*/ #top #news .list{max-width: 640px; width: 94%; margin: 0 auto;} #top #news .list li{background: url("../../img/top/news_line.png") no-repeat bottom center; padding: 20px 0;} #top #news .list a{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;} #top #news .list figure{width: 25.2%;} #top #news .list p{width: 70.5%; line-height: 1.5;} #top #news .list a:hover{text-decoration: underline; opacity: .8;} #top #news .list a.none{text-decoration: none; opacity: 1;} .covid{ max-width: 760px;margin: 0 auto;width: 100%;border: 1px solid #f00;padding: 25px 30px;} .covid .tit{font-size: 20px;text-align: center;letter-spacing: 0.1em;margin: 0 0 10px;font-weight: bold;} .covid ul{font-size: 13px;line-height: 1.8;} .covid .tit_b{font-weight: bold;} .covid .des_s{font-size: 9px;} .mt_15{margin-top: 15px;} /* ========================== 05 - 26 ================================ */ .banner{max-width: 980px;margin: 0 auto;margin-top: 40px;text-align: center;} .banner h3{font-size: 26px;margin-top: 20px;} .banner .tit_3{font-size: 20px;margin-top: 20px;} .banner ul{margin-top: 20px;display: flex;} .banner ul li{width: 50%;} .banner ul li:nth-child(1){padding-right: 20px;} .banner ul li:nth-child(2){padding-left: 20px;} /* ========================== 05 - 26 ================================ */ /* ========================== 06 - 01 ================================ */ #top #clothes2 .list{max-width: 980px;margin: 0 auto;display: flex;margin-top: 40px;} #top #clothes2 .list li{width: 460px;max-width: 460px;} #top #clothes2 .list li:nth-child(1){margin-right: 60px;} /* ========================== 06 - 01 ================================ */ /* ========================== 07 - 15 ================================ */ #youtube_0715{ position: relative; max-width: 960px;margin: 0 auto; min-height: 532px; } #youtube_0715 .bg_youtube{position: absolute;top: 0;left: 0;z-index: 2;pointer-events: none;} #youtube_0715 .content_youtube{position: absolute;top: 10%;left: 50%;transform: translate(-50%,0%);width: 88%;} .youtube_0715{text-align: center;font-size: 26px;margin-bottom: -30px;margin-top: 35px;} #youtube_0715 iframe{width: 100%;height: 430px;} /* ========================== 07 - 15 ================================ */ /*=============================== MEDIA ================================*/ @media only screen and (max-width:1000px){ #top #point{background:url("../../img/top/point_bg.png") no-repeat top center/110% auto;} #top #point .confetti{background: url("../../img/top/point_confetti.png") repeat top center/100% auto;} #top #point .item p{padding: 5vw 0 0 0; font-size: 1.4vw;} #top #point .item p:before{width: 3.2vw; height: 4.5vw;} #top #plan2 .box{max-width: 480px;} #top #plan2 .box .item{width: 100%;} #top #plan2 .box .item:nth-of-type(1){margin: 0 0 50px;} /* ========================== 05 - 26 ================================ */ .banner{padding: 0 10px;} .banner ul{padding: 0 10px;} /* ========================== 06 - 01 ================================ */ #top #clothes2 .list{padding: 0 10px;} /* ========================== 07 - 15 ================================ */ #youtube_0715 .content_youtube{top: 4vw;} #youtube_0715 iframe{height: 47vw;} #youtube_0715{min-height: 50vw;} /* ========================== 07 - 15 ================================ */ } @media only screen and (max-width:767px){ #top h2{height: 38vw; font-size: 6vw; padding: 10vw 0 0 0;} #top .box-txt{text-align: left;} #top .box-txt br{display: none;} #top #concept .img{display: none;} /* #top #point{background: none;} #top #point h2{margin: 0 auto 65px;} #top #point .confetti{display: none;} #top #point .item p{padding: 9vw 0 0 0; font-size: 3vw;} #top #point .item p:before{width: 6vw; height: 8.5vw;} #top #point #item1{left: 7.94%; top: 0; width: 45.18%; height: 47.01vw;} #top #point #item2{left: 48.83%; top: 22.09%; width: 46.88%; height: 43.75vw;} #top #point #item3{left: 7.03%; top: 37.9%; width: 46.09%; height: 47.53vw;} #top #point #item4{left: 48.18%; top: 61.59%; width: 44.01%; height: 44.01vw;} #top #point #item5{left: 7.94%; top: 78.49%; width: 44.92%; height: 43.62vw;} */ #top #point{background: none;} #top #point h2{margin: 0 auto 65px;} #top #point .btn-more{top: -35px;} #top #point .confetti{display: none;} #top #point .item p{padding: 9vw 0 0 0; font-size: 3vw;} #top #point .item p:before{width: 6vw; height: 8.5vw;} #top #point #item1{left: 7.94%; top: 0; width: 45.18%; height: 47.01vw;} #top #point #item2{left: 48.83%; top: 22.09%; width: 46.88%; height: 43.75vw;} #top #point #item3{left: 7.03%; top: 37.9%; width: 46.09%; height: 47.53vw;} #top #point #item4{left: 48.18%; top: 61.59%; width: 44.01%; height: 44.01vw;} #top #point #item5{left: 7.94%; top: 78.49%; width: 44.92%; height: 43.62vw;} #top #plan2{margin: 0 0 100px;} #top #clothes2 .img{display: none;} #top #clothes2 .tit{font-size: 5vw;} #top #clothes2 .tit:before, #top #clothes2 .tit:after{width: 6vw; height: 8.5vw;} #top #clothes2 .list{max-width: 640px;} #top #clothes2 .list li{width: 48%; margin: 0 auto 30px;} #top #clothes2 .list li:nth-of-type(4){display: block;} #top #news h3{font-size: 5vw; margin: 0 0 30px;} #top #news h3:before{display: block; margin: 0 auto;} #top #news h3:after{display: block; margin: 0 auto;} .covid{margin: 0 auto;width: 95%;} /* ========================== 05 - 26 ================================ */ .banner{padding: 0 10px;} .banner ul{padding: 0 10px;} .banner ul li:nth-child(1){padding-right: 10px;} .banner ul li:nth-child(2){padding-left: 10px;} /* ========================== 06 - 01 ================================ */ #top #clothes2 .list{padding: 0 10px;margin-top: 6vw;} #top #clothes2 .list li:nth-child(1){margin-right: 3vw;} /* ========================== 07 - 15 ================================ */ .youtube_0715 {font-size: 4vw;margin-bottom: -3vw;} #youtube_0715 .content_youtube{top: 4vw;} #youtube_0715 iframe{height : 47vw;width: 100%;} #youtube_0715{min-height: 50vw;} /* ========================== 07 - 15 ================================ */ } @media only screen and (max-width:480px){ .covid{margin: 0 auto;width: 95%;} .covid .tit{font-size: 4vw;} .covid ul{font-size: 2.8vw;} .covid .des_s{font-size: 2vw;} #top .box-txt{font-size: 16px;} #top .btn-more{width: 120px;} #top #plan2 .box{font-size: 3vw;} #top #plan2 .box .tit{font-size: 5vw; margin: 0 0 3vw; padding: 0 0 3vw;} #top #plan2 .box .txt{margin: 0 0 4vw;} #top #plan2 .box .price{font-size: 5vw;} #top #plan2 .box .inner{font-size: 4vw;} #top #plan2 .box .inner p:last-child{font-size: 9px;} #top #clothes2 .tit{background-size: 60% auto;} #top #clothes2 .list li{width: 100%;} #top #studio{font-size: 16px;} #top #studio .list .txt{font-size: 20px;} #top #studio .list .txt2{font-size: 18px;} #top #studio .list2 li{padding: 0 0 0 35px;} #top #studio .list2 li span{width: 22px; height: 22px; line-height: 22px; top:4px;} #top #news .list a{align-items: flex-start;} } /* ============================== TOP ============================== */ /* ============================== FEATURE ============================== */ /* CSS Document */ @import url('https://fonts.googleapis.com/css?family=Lato:700&display=swap'); #features #mv h2 span{font-size: 50px; font-family: 'Lato';} #features .text_hidden{opacity: 0;} #features .format_text{width: 80%;} #features .content{position: relative; margin: 0 auto 100px;} #features .item{position: absolute; padding: 60px 0 0 60px; line-height: 1.4;} #features .change_space{padding-top: 45px;} #features .item .tit{padding: 0 0 0 45px; color: #1999fb; font-size: 17px; font-family: 'Kosugi Maru', sans-serif; font-weight: bold; position: relative; margin: 0 0 8px; height: 45px; display: flex; align-items: center; width: 100%;} #features .item .tit:before{position: absolute; top: 0; left: 0; width: 32px; height: 45px; content: ''; background-position: top left; background-repeat: no-repeat; background-size: 100% auto;} #features .mb_18{width: 115%;} #features #item1{left: 1%; top: 5%; width: 49%;} #features #item1 .tit:before{background-image: url("../../img/features/num_1.png");} #features #item2{left: 50%; top: 29.15%; width: 48%;} #features #item2 .tit:before{background-image: url("../../img/features/num_2.png");} #features #item3{left: 20.6%; top: 49.93%; width: 38%;} #features #item3 .tit:before{background-image: url("../../img/features/num_3.png");} #features #item4{left: 1%; top: 80%; width: 30%;} #features #item4 .tit:before{background-image: url("../../img/features/num_4.png");} #features #item5{left: 64.4%; top: 72.66%; width: 36.6%;} #features #item5 .tit:before{background-image: url("../../img/features/num_5.png");} /*=============================== MEDIA ================================*/ @media only screen and (max-width:1000px){ #features .item{padding: 6vw 0 0 6vw; font-size: 1.4vw; height: 23vw;} #features .item .tit{padding: 0 0 0 4vw; font-size: 1.5vw; margin: 0 0 1vw; height: 4.5vw;} #features .item .tit:before{width: 3.2vw; height: 4.5vw;} } @media only screen and (max-width:767px){ #features .format_text{width: 100%;} #features #mv h2 span{font-size: 9vw;line-height: 1.3;} #features .item{padding: 0; font-size: 3.5vw; left: 16% !important; width: 80% !important;} #features .item .tit{padding: 0 0 0 7vw; font-size: 4vw; height: 8.5vw;margin-bottom: 3vw;} #features .item .tit:before{width: 6vw; height: 8.5vw;} #features #item1{top: 2%;} #features #item2{top: 21%;} #features #item3{top: 42%;} #features #item4{top: 64%;} #features #item5{top: 86%;} #features .mbw_5{margin-bottom: 5vw !important;} } /* ============================== FEATURE ============================== */ /* ============================== GALLEY ============================== */ /* CSS Document */ #library #mv{margin: 0 0 55px;} #library .h3_end{margin: 0 0 20px;text-align: center;font-size: 24px;line-height: 50px;font-weight: bold;letter-spacing: 0.1em;font-family: 'Kosugi Maru', sans-serif;color: #c91450; } #library #group{display: flex; flex-wrap: wrap; padding: 0 0 100px;} #library #group .item{width: 31%; margin: 0 3.5% 3.5% 0; background: #fff; border-radius: 12px; padding: 8px 8px 12px; color: #f05c84; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.15);} #library #group .item:nth-of-type(3n){margin: 0 0 3.5%;} #library #group .item figure{margin: 0 0 8px; border-radius: 10px;} #library #group .item img{width: 100%;} #library #group .item .txt{padding: 0 80px 0 0; position: relative; line-height: 1.5;} #library #group .item .like{position: absolute; top: 0; right: 0; font-size: 18px; font-weight: bold; cursor: pointer;} #library #group .item .like:after{background: url("../../img/common/ic_heart.gif") no-repeat top left/100% auto; content: ''; width: 34px; height: 24px; display: inline-block; margin: 0 0 0 5px;} #library #page{text-align: center;} #library #page a{display: inline-block; line-height: 32px; font-size: 18px; font-weight: bold; color: #f05c84; width: 36px; height: 32px;} #library #page a:hover, #library #page a.active{background: url("../../img/clothes/bg_2.png") no-repeat;} /*=============================== MEDIA ================================*/ @media only screen and (max-width:767px){ #library #group .item{width: 48.25%;} #library #group .item:nth-of-type(3n){margin: 0 3.5% 3.5% 0;} #library #group .item:nth-of-type(2n){margin: 0 0 3.5%;} } @media only screen and (max-width:480px){ #library #group .item{width: 100%; margin: 0 0 20px !important;} } /* ============================== GALLEY ============================== */ /* ============================== PLAN ============================== */ #plan .box-txt{padding: 20px 0 130px; text-align: center;} #plan .mt_5{margin-top: 5px;} #plan .time_plan{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;font-size: 14px !important;} #plan .time_plan li:nth-child(2){margin-left: 15px;} #plan .group{margin: 0 0 120px; position: relative; font-size: 18px; line-height: 1.5; background-repeat: no-repeat; background-size: 92.9% 100%;} #plan .group .tit{font-size: 24px; font-weight: bold; letter-spacing: 0.1em; font-family: 'Kosugi Maru', sans-serif; padding: 0 0 10px; margin: 0 0 10px;} #plan .group .tit span{font-size: 36px;} #plan .group .list li{padding: 10px 0 14px; display: flex; justify-content: space-between; align-items: center; } #plan .group .list li:last-of-type{background: none !important; padding: 10px 0 !important;} #plan .group .list figure{width: 40px; text-align: center; margin: 0 25px 0 0;} #plan .group .list p{width: calc(100% - 65px);} #plan .group .time{position: absolute; width: 32%; text-align: center;} #plan .group .time p{font-weight: bold; margin: 0 0 10px;} #plan .group .time span{font-size: 23px;} #plan .group .time .time_y{font-size: 14px;} #plan .group .time ul{font-size: 21px; color: #585858;} #plan .group.odd{background-position: top right; padding: 20px 9% 40px 48%;} #plan .group.odd .img{position: absolute; top: -75px; left: 0; width: 44%;} #plan .group.odd .time{left: 7%; top: 200px;} #plan .group.even{background-position: top left; padding: 30px 51% 30px 6%;} #plan .group.even .img{position: absolute; top: -80px; right: 0; width: 46%;} #plan .group.even .time{right: 7%; top: 210px;} #plan #group1{background-image: url("../../img/plan/bg_1.png");display: none;} #plan #group1 .tit{color: #ff659f; background: url("../../img/plan/line_1.png") no-repeat bottom left;} #plan #group1 .list{color: #7f0a2b;} #plan #group1 .list li{background: url("../../img/plan/line_2.png") no-repeat bottom left;} #plan #group1 .time p{color: #ff659f;} #plan #group1 .label1{position: absolute; top: 174px; left: 39.6%; width: 3.9%;} #plan #group1 .label2{position: absolute; top: -70px; left: 46%; width: 7.9%;} #plan #group1 .label3{position: absolute; top: 0; right: 2.6%; width: 10.3%;} #plan #group1 .label4{position: absolute; bottom: 29px; right: 4.8%; width: 6.1%;} #plan #group2{background-image: url("../../img/plan/bg_2.png");display: none;} #plan #group2 .tit{color: #2d553e; background: url("../../img/plan/line_3.png") no-repeat bottom left;} #plan #group2 .list{color: #000;} #plan #group2 .list li{background: url("../../img/plan/line_4.png") no-repeat bottom left;} #plan #group2 .time p{color: #305740;} #plan #group2 .label1{position: absolute; top: -34px; left: 1.9%; width: 33%;} #plan #group3 .tit{font-size: 33px;color: #000;margin: 30px 0 30px;font-weight: bold;font-family: 'Kosugi Maru', sans-serif;letter-spacing: 0.1em;text-align: center;} #plan #group3 #group{display: flex; flex-wrap: wrap;} #plan #group3 #group .item{width: 31%; margin: 0 3.5% 3.5% 0; border-radius: 12px; padding: 8px 8px 12px; color: #000;text-align: center;} #plan #group3 #group .item:nth-of-type(3n){margin: 0 0 3.5%;} #plan #group3 #group .item figure{margin: 0 0 8px; border-radius: 10px;} #plan #group3 #group .item img{width: 100%;} #plan #group3 #group .item .txt{position: relative; line-height: 1.5;} #plan #group3 #group .item .like{position: absolute; top: 0; right: 0; font-size: 18px; font-weight: bold; cursor: pointer;} #plan #group3 #group .item .like:after{background: url("../../img/common/ic_heart.gif") no-repeat top left/100% auto; content: ''; width: 34px; height: 24px; display: inline-block; margin: 0 0 0 5px;} #plan #group3 .btn_viewmore{text-align: center;cursor: pointer;margin-bottom: 70px;} #plan #group3 .btn_viewmore:hover{opacity: 0.3;} #plan #newborn{background: url("../../img/plan/bg_7.png") no-repeat top left/100% 100%; padding: 0 0 15px; margin: 0 0 110px;} #plan #newborn h3{text-align: center; font-size: 28px; color: #0b6c85; background: url("../../img/plan/bg_tit.png") no-repeat top center/auto 100%; line-height: 50px; font-family: 'Prompt', sans-serif; font-weight: bold; letter-spacing: 0.1em; position: relative; z-index: 2; top: -25px;} #plan #newborn .tit{font-size: 23px; font-weight: bold; margin: 0 0 5px 0.1em;} #plan #newborn .txt{font-size: 17px; line-height: 1.6; color: #373737;} #plan #newborn .cap{font-size: 12px; line-height: 1.5; color: #373737; padding: 10px 0 0 0;} #plan #newborn .price{font-size: 32px; line-height: 1; font-weight: bold; padding: 20px 0 0 0; margin: 20px 0 0 0;} #plan #newborn .box1{position: relative; padding: 0 1.4%; margin: 0 0 5px;} #plan #newborn .box1 .tit{color: #ff659f;} #plan #newborn .box1 .price{color: #ff659f; background: url("../../img/plan/line_5.png") no-repeat top left;} #plan #newborn .box1-left{position: absolute; width: 47.7%; left: 3.8%; top: 50%; transform: translateY(-50%);} #plan #newborn .box1-right{width: 53.1%; margin: 0 0 0 46.9%; background: url("../../img/plan/bg_5.png") no-repeat top left/100% 100%;} #plan #newborn .box1-right .inner{padding: 15% 5% 15% 18%;} #plan #newborn .box2{background: url('../../img/plan/bg_6.png') no-repeat top left/100% 100%; width: 97%; margin: 0 auto; display: flex; flex-wrap: wrap; padding: 5% 6% 3%;} #plan #newborn .box2 .item{width: 50%; } #plan #newborn .box2 .item:nth-of-type(1){padding: 0 4% 0 0; background: url('../../img/plan/border_green_2.jpg') no-repeat top right;} #plan #newborn .box2 .item:nth-of-type(2){padding: 0 0 0 4%;} #plan #newborn .box2 .tit{color: #238942;} #plan #newborn .box2 .price{color: #238942; background: url('../../img/plan/boder_green_1.jpg') no-repeat top left;} #plan #newborn .box2 .cap{width: 100%; padding: 20px 0 0 0;} #plan #newborn .note{text-align: center; background: url("../../img/plan/line_8.png") no-repeat center bottom; padding: 0 0 30px; color:#ed709e; font-size: 20px; font-weight: bold; line-height: 1.3; margin: 0 0 10px;} #plan #newborn .note span{font-size: 24px; text-decoration: underline;} #plan #pricelist{margin: 0 0 110px; position: relative;} #plan #pricelist:before{content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 70px; display: block; background: url("../../img/plan/price_img3.png") no-repeat top left/100% auto;} #plan #pricelist h3{font-size: 33px; color: #ff659f; margin: 0 0 25px; font-weight: bold; font-family: 'Kosugi Maru', sans-serif; letter-spacing: 0.1em; text-align: center;} #plan #pricelist h4{font-size: 28px; font-weight: bold; line-height: 50px; text-align: center; color: #3d6d1c; background: url("../../img/plan/price_img1.png") no-repeat top center; position: absolute; top: 26px; left: 0; width: 100%;} #plan #pricelist .box-container{position: relative; background: url("../../img/plan/price_bg1.png") no-repeat top left/100% 100%; padding: 0 0 30px;} #plan #pricelist .flower{width: 148px; height: 141px; display: flex; align-items: center; justify-content: center; background: url("../../img/plan/price_img2.png") no-repeat top left/100% auto; position: absolute; top: -50px; left: 0; font-size: 20px; font-weight: bold; color: #fff; line-height: 1.3;} #plan #pricelist .flower p{text-align: center;} #plan #pricelist .box{display: flex; padding: 40px 5% 40px 4%; line-height: 1.6;} #plan #pricelist .cap{font-size: 12px; line-height: 1.5; padding: 10px 0 0 0.5em;} #plan #pricelist .item{display: flex; align-items: center;} #plan #pricelist .item1{width: 20%; justify-content: center; font-size: 20px; font-weight: bold;} #plan #pricelist .item2{width: 28%; justify-content: center; font-size: 24px; font-weight: bold; background-repeat: no-repeat, no-repeat; background-position: center left, center right;} #plan #pricelist .item3{width: 52%; font-size: 17px; padding: 0 0 0 3%;} #plan #pricelist .box1{background: url("../../img/plan/price_bg2.png") no-repeat top left/100% 100%; min-height: 351px; margin: 0 0 30px; color: #fff; padding: 80px 5% 40px 4%;} #plan #pricelist .box1 .item2{background-image: url("../../img/plan/price_border1.jpg"), url("../../img/plan/price_border1.jpg");} #plan #pricelist .box2{background: url("../../img/plan/price_bg3.png") no-repeat top left/100% 100%; min-height: 306px; margin: 0 0 5px;} #plan #pricelist .box2 .item1, #plan #pricelist .box2 .item2{color: #ff659f;} #plan #pricelist .box2 .item2{background-image: url("../../img/plan/price_border2.jpg"), url("../../img/plan/price_border2.jpg");} #plan #pricelist .box3{background: url("../../img/plan/price_bg4.png") no-repeat top left/100% 100%; min-height: 328px; margin: 0 0 15px;} #plan #pricelist .box3 .item1, #plan #pricelist .box3 .item2{color: #37b6ff;} #plan #pricelist .box3 .item2{background-image: url("../../img/plan/price_border3.jpg"), url("../../img/plan/price_border3.jpg");} #plan #pricelist .box4{background: url("../../img/plan/price_bg5.png") no-repeat top left/100% 100%; min-height: 320px;} #plan #pricelist .box4 .item1, #plan #pricelist .box4 .item2{color: #ff723a;} #plan #pricelist .box4 .item2{background-image: url("../../img/plan/price_border4.jpg"), url("../../img/plan/price_border4.jpg");} #plan #pricelist .note{text-align: center; padding: 25px 0 30px; color:#4f98d5; font-size: 20px; font-weight: bold; line-height: 1.3; margin: 0 0 30px; background-repeat: no-repeat, no-repeat; background-position: top center, bottom center; background-image: url("../../img/plan/line_9.png"), url("../../img/plan/line_10.png");} #plan #pricelist .note span{font-size: 24px; text-decoration: underline;} /*=============================== MEDIA ================================*/ @media only screen and (max-width:1000px){ #plan .group.odd .img{top: -7.5vw;} #plan .group.odd .time{top: 19vw;} #plan .group.even .img{top: -8vw;} #plan .group.even .time{top: 20vw;} #plan #newborn .box1-right .inner{padding: 10% 5% 10% 15%;} #plan #pricelist .item1{font-size: 18px;} #plan #pricelist .item2{font-size: 20px;} } @media only screen and (max-width:767px){ #plan .box-txt{padding: 20px 0 80px;} #plan .group{background-size: 100% 100%; margin: 0 0 18vw;} #plan .group .time{position: static; width: 100%;} #plan .group .list{margin: 0 0 5vw;} #plan .group.odd{padding: 27vw 7vw 10vw;} #plan .group.odd .img{width: 60%; margin: 0 auto; right: 0;} #plan .group.even{padding: 27vw 7vw 10vw;} #plan .group.even .img{width: 60%; margin: 0 auto; left: 0;} #plan #group1{background-image: url("../../img/plan/bg_1_sp.png");} #plan #group1 .label1{top: 23vw; left: 60.6%; width: 5.9%; z-index: 1;} #plan #group1 .label2{top: -8vw; left: 18vw; width: 10%; z-index: 1;} #plan #group1 .label3{right: 0; width: 14.3%;} #plan #group1 .label4{bottom: 3vw; width: 9%;} #plan #group2{background-image: url("../../img/plan/bg_2_sp.png");} #plan #group2 .label1{top: -15vw; left: 14vw; width: 46%; z-index: 1;} #plan #group3 #group .item{width: 48.25%;} #plan #group3 #group .item:nth-of-type(3n){margin: 0 3.5% 3.5% 0;} #plan #group3 #group .item:nth-of-type(2n){margin: 0 0 3.5%;} #plan #newborn{background: none; padding: 0;} #plan #newborn h3{top: 0; background-size: 100% 100%; margin: 0 0 20px;} #plan #newborn .tit{text-align: center; margin: 0 0 10px;} #plan #newborn .box1{padding: 0; margin: 0 0 20px;} #plan #newborn .box1-left{position: static; width: 80%; text-align: center; margin: 0 auto; transform: translateY(0);} #plan #newborn .box1-right{width: 100%; margin: 0;} #plan #newborn .box1-right .inner{padding: 14% 8%;} #plan #newborn .box2{background: url('../../img/plan/bg_8.png') no-repeat top left/100% 100%; width: 100%; padding: 10% 8%;} #plan #newborn .box2 .item{width: 100%;} #plan #newborn .box2 .item:nth-of-type(1){background: none; padding: 0; margin: 0 0 70px;} #plan #newborn .box2 .item:nth-of-type(2){padding: 0;} #plan #newborn .note{background-size: 100% auto;} #plan #pricelist .box-container{background: none; padding: 0;} #plan #pricelist h4{top: -20px; background-size: 90% 100%;} #plan #pricelist .flower{top: -80px;} #plan #pricelist .box{display: block; padding: 40px 8%;} #plan #pricelist .item{width: 100% !important;} #plan #pricelist .item1{margin: 0 0 10px; font-size: 23px;} #plan #pricelist .item2{margin: 0 0 20px; font-size: 32px; background: none !important;} #plan #pricelist .item3{padding: 0;} #plan #pricelist .box1{background: url("../../img/plan/price_bg2_sp.png") no-repeat top left/100% 100%; padding: 80px 8% 120px;} #plan #pricelist .box2{background: url("../../img/plan/price_bg3_sp.png") no-repeat top left/100% 100%; margin: 0 0 15px;} #plan #pricelist .box3{background: url("../../img/plan/price_bg4_sp.png") no-repeat top left/100% 100%;} #plan #pricelist .box4{background: url("../../img/plan/price_bg5_sp.png") no-repeat top left/100% 100%;} #plan #pricelist .note{background-size: 100% auto, 100% auto;} } @media(max-width:520px){ #plan #pricelist h3{font-size: 7vw;letter-spacing: 0;} } @media only screen and (max-width:480px){ #plan #group3 #group .item{width: 100%; margin: 0 0 20px !important;} #plan #newborn{margin: 0 0 80px;} #plan #newborn .box1 .price, #plan #newborn .box2 .price{background-size: 100% auto;} #plan #pricelist{margin: 0 0 80px;} #plan #pricelist:before {width: 20vw; height: 20vw;} #plan #pricelist h4{top: 0;} #plan #pricelist .flower{width: 25vw; height: 24vw; font-size: 3.2vw;} } /* ============================== PLAN ============================== */ /* ============================== FLOW ============================== */ /* CSS Document */ #flow #mv{margin: 0 0 15px;} #flow #group4{text-align: center;margin-bottom: 40px;} #flow .group{margin: 0 0 40px; line-height: 1.5;} #flow h3{margin: 0 0 20px; text-align: center; font-size: 24px; line-height: 50px; font-weight: bold; letter-spacing: 0.1em; font-family: 'Kosugi Maru', sans-serif;} #flow .next{width: 98px; margin: 0 auto;} #flow .number{width: 67px; margin: 0 auto 15px;} #flow #group1 h3{color: #c91450; background: url("../../img/flow/bg_1.png") no-repeat top center/auto 100%;} #flow #group1 .box{max-width: 790px; margin: 0 auto; position: relative;} #flow #group1 .row{margin: 0 0 90px; display: flex; flex-wrap: wrap; justify-content: space-between;} #flow #group1 .img{width: 38.6%;} #flow #group1 .img2{position: absolute; right: 0; bottom: 50px; width: 367px;} #flow #group1 .txt{padding: 20px 0 0 0; width: 57.9%;} #flow #group1 .number{margin: 0 0 15px;} #flow #group2 h3{color: #0b6c85; background: url("../../img/flow/bg_2.png") no-repeat top center/auto 100%;} #flow #group2 .box{max-width: 920px; margin: 0 auto 20px; display: flex; flex-wrap: wrap; justify-content: space-between;} #flow #group2 .item{max-width: 400px; width: 49%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;} #flow #group2 .item .txt{padding: 0 0 0 15px;} #flow #group2 .item1 figure{width: 120px;} #flow #group2 .item1 .txt{width: calc(100% - 120px);} #flow #group2 .item2 figure{width: 80px;} #flow #group2 .item2 .txt{width: calc(100% - 80px);} #flow #group2 .box2{background: url("../../img/flow/line_1.png") no-repeat bottom center; text-align: center; margin: 0 0 30px; padding: 0 0 12px; color: #0b6c85;} #flow #group3{margin: 0 0 110px;} #flow #group3 h3{color: #115d31; background: url("../../img/flow/bg_3.png") no-repeat top center/auto 100%;} #flow #group3 .box{max-width: 940px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;} #flow #group3 .box .number{position: absolute; top: 70px; left: 0; right: 0;} #flow #group3 .box .item{width: 46%; background: url("../../img/flow/line_2.png") no-repeat bottom center/380px 7px; padding: 0 0 25px; margin: 0 0 15px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;} #flow #group3 .box .item figure{width: 130px;} #flow #group3 .box .item .txt{width: calc(100% - 130px);} #flow #group3 .box .item1 figure, #flow #group3 .box .item2 figure{padding: 0 0 0 20px;} #flow #group3 .box .item3, #flow #group3 .box .item4{background: none; align-items: flex-start; padding: 0; margin: 0;} #flow #group3 .box2{max-width: 900px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;} #flow #group3 .box2 .img{width: 42.78%;} #flow #group3 .box2 .txt{width: 57.22%; margin: 26px 0 0 0;} #flow #group3 .box2 .txt ul{padding: 10px 0 0 30px;} #flow #group3 .box2 .txt li{padding: 10px 0 15px; background: url("../../img/flow/line_2.png") no-repeat bottom left/auto 7px;} /*=============================== MEDIA ================================*/ @media only screen and (max-width:767px){ #flow .mb{margin-bottom: 11vw !important;} #flow h3{height: 11vw; line-height: 11vw; font-size: 5.5vw;} #flow #group1 h3{background: url("../../img/flow/bg_1.png") no-repeat top center/100% 100%;} #flow #group2 h3{background: url("../../img/flow/bg_2.png") no-repeat top center/100% 100%;} #flow #group3 h3{line-height: 1.3; height: 21vw; padding: 2.7vw 0 0 0; background: url("../../img/flow/bg_3.png") no-repeat top center/100% 100%;} #flow #group1 .number{margin: 0 auto 15px;} #flow #group1 .row{margin: 0;} #flow #group1 .img{width: 50%; margin: 0 auto;} #flow #group1 .txt{width: 100%; padding: 20px 0 0 0;} #flow #group1 .img2{position: static; max-width: 588px; width: 100%; margin: 0 auto 10px;} #flow #group2 .item{width: 100%; max-width: 767px;} #flow #group2 .item1{margin: 0 0 20px;} #flow #group3 .box .number{position: static;} #flow #group3 .box .item{width: 100%; background: url("../../img/flow/line_2.png") repeat-x bottom left/auto 7px} #flow #group3 .box .item3, #flow #group3 .box .item4{padding: 0 0 25px; margin: 0 0 15px;} #flow #group3 .box .item .txt br{display: none;} #flow #group3 .box2 .img{width: 90%; margin: 0 auto; text-align: center;} #flow #group3 .box2 .txt{width: 100%; margin: 0;} #flow #group3 .box2 .txt ul{padding: 10px 0 0 15px;} } @media only screen and (max-width:480px){ #flow .next{width: 65px;} #flow .number{width: 50px;} } /* ============================== FLOW ============================== */ /* ============================== CLOTHES ============================== */ /* CSS Document */ #clothes{text-align: center; padding: 0 0 100px;} #clothes .box-txt{max-width: 600px; margin: 0 auto; padding: 20px 0;} #clothes .tit{text-align: center; background: url("../img/clothes/line.png") no-repeat bottom center; padding: 0 0 10px; font-size: 22px; color: #f05c84; font-weight: bold; margin: 0 0 55px;} #clothes .tit:before, #clothes .tit:after{content: ''; width: 42px; height: 58px; display: inline-block; vertical-align: middle;} #clothes .tit:before{margin: 0 15px 0 0; background: url("../img/clothes/label_1.png") no-repeat top left/100% auto;} #clothes .tit:after{margin: 0 0 0 15px; background: url("../img/clothes/label_2.png") no-repeat top left/100% auto;} #clothes .list{max-width: 980px; margin: 0 auto 40px; width: 100%; display: flex; flex-wrap: wrap;} #clothes .list li{text-align: center; width: 300px; margin-right: 40px;} #clothes .list li:nth-of-type(3n){margin-right: 0;margin-bottom: 30px;} #clothes .list li figure{position: relative; margin: 0 auto 32px;} #clothes .list li figcaption{width: 101px; height: 34px; line-height: 34px; position: absolute; bottom: -22px; left: 0; right: 0; margin: 0 auto; font-size: 18px; color: #fff; background: url("../img/clothes/bg.png") no-repeat;} #clothes .list li .txt{margin: 0 0 10px;} #clothes .list li .like{font-size: 18px; font-weight: bold; cursor: pointer; color: #f05c84;} #clothes .list li .like:after{background: url("../img/common/ic_heart.gif") no-repeat top left/100% auto; content: ''; width: 34px; height: 24px; display: inline-block; margin: 0 0 0 10px;} #clothes #page{text-align: center;} #clothes #page a{display: inline-block; line-height: 32px; font-size: 18px; font-weight: bold; color: #f05c84; width: 36px; height: 32px;} #clothes #page a:hover, #clothes #page a.active{background: url("../img/clothes/bg_2.png") no-repeat;} /*=============================== MEDIA ================================*/ @media only screen and (max-width:1050px){ #clothes .list li{width: 32%; margin-right: 2%;} #clothes .list li:nth-of-type(3n){margin-right: 0;} } @media only screen and (max-width:767px){ #clothes .tit{font-size: 5vw;} #clothes .tit:before, #clothes .tit:after{width: 6vw; height: 8.5vw;} #clothes .list{max-width: 600px;} #clothes .list li{width: 45.67%; margin: 0 8.66% 30px 0;} #clothes .list li:nth-of-type(3n){margin: 0 8.66% 30px 0;} #clothes .list li:nth-of-type(2n){margin: 0 0 30px;} #clothes .list li figure{margin: 0;} } @media only screen and (max-width:480px){ #clothes .tit{background-size: 60% auto;} #clothes .list li{width: 100%; max-width: 274px; margin: 0 auto 30px !important;} } /* ============================== CLOTHES ============================== */ /* ============================== Q & A ============================== */ /* CSS Document */ #faq #mv{margin: 0 0 15px;} #faq #mv h2{font-family: 'Sawarabi Gothic', sans-serif;} #faq{background: url("../../img/common/bg_2.png") repeat top 50vw center; padding: 0 0 100px;} #faq .content{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;} #faq #subnav{width: 278px; min-height: 230px; background: url("../../img/faq/bg.png") no-repeat top left/100% 100%; padding: 3% 3% calc(3% + 13px); margin: 0 0 0 2%;} #faq #subnav li{background: url("../../img/faq/line_1.png") no-repeat bottom left; padding: 13px 0 16px; line-height: 1.5; color: #f06489; font-weight: bold; cursor: pointer;} #faq #subnav li:hover, #faq #subnav li.active{color: #f60d4c;} #faq .tab{width: 642px; display: none;} #faq #tab1{display: block;} #faq h3{font-size: 20px; color: #f05c84; font-weight: bold; background: url("../../img/faq/line_2.png") no-repeat bottom left; padding: 0 0 5px; margin: 0 0 25px;} #faq .tab li{line-height: 1.5; margin: 0 0 25px;} #faq .tab .question, #faq .tab .answer{position: relative; display: flex; align-items: center;} #faq .tab .question:before, #faq .tab .answer:before{width: 51px; height: 37px; content: ''; position: absolute; left: 0;} #faq .tab .question{padding: 0 0 0 55px; margin: 0 0 5px; min-height: 37px;} #faq .tab .question:before{background: url("../../img/faq/img_q.png") no-repeat top left/100% auto; top: 0;} #faq .tab .answer{padding: 20px 20px 20px 75px; min-height: 92px; background-image: url("../../img/faq/bg_2.png"), url("../../img/faq/bg_4.png"); background-repeat: no-repeat, no-repeat; background-position: top right, bottom right;} #faq .tab .answer:before{background: url("../../img/faq/img_a.png") no-repeat top left/100% auto; top: 18px;} #faq .tab .answer:after{content: ''; position: absolute; width: 96.11%; right: 0; top: 44px; bottom: 44px; background: url("../../img/faq/bg_3.png") repeat-y top right/100% auto; z-index: -1;} /*=============================== MEDIA ================================*/ @media only screen and (max-width:1024px){ #faq #subnav{margin: 0;} } @media only screen and (max-width:1000px){ #faq #subnav{width: 28%;} #faq .tab{width: 68%;} #faq .tab .answer{background-size: 96.11% auto;} #faq .tab .answer:after{top: 4vw; bottom: 4vw;} } @media only screen and (max-width:767px){ #faq #subnav{display: none;} #faq h3{position: relative;} #faq h3:after{border: solid #f05c84; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; content: ''; position: absolute; top: 10px; right: 10px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} #faq h3.open:after{transform: rotate(-135deg); -webkit-transform: rotate(-135deg);} #faq .tab{width: 100%; display: block;} #faq .tab ul{display: none;} } /* ============================== Q & A ============================== */ /* ============================== CONTACT ============================== */ /* CSS Document */ #contact{background: url("../../img/common/bg_2.png") repeat top 50vw center; padding: 0 0 100px;} #contact #access{position: relative;} #contact #access ul{position: absolute; top: 200px; left: 34%;} #contact #map{border-radius: 10%; overflow: hidden;} /*=============================== MEDIA ================================*/ @media only screen and (max-width:1000px){ #contact #access ul{top: 18vw;} #contact #access ul{font-size: 1.7vw;} } @media only screen and (max-width:767px){ #contact #access{margin: 0 0 20px;} #contact #access ul{position: static; font-size: 16px; width: 100%;} #contact #map iframe{height: 300px;} } /* ============================== CONTACT ============================== */ .add_0730{ font-size: 23px;text-align: center;margin-top: 10px; height: 91px;padding-top: 37px; background-size: 100%; background-image: url('../../img/contact/0803.png'); } @media (min-width:769px) and (max-width:1000px){ .add_0730{ background-repeat: no-repeat; height: auto; padding-top: 4vw; } .add_0730 p{ font-size: 2vw; } } @media (max-width:768px){ .add_0730{ padding-top: 0; height: auto; background-image: url('../../img/flow/bg_2.png'); background-repeat: no-repeat; } .add_0730 p{ font-size: 3vw; } } @media (max-width:380px){ .add_0730{ font-size: 14px; } } #chat{position: fixed; right: 30px; bottom: 100px; z-index: 99998; width: 45px;} @media (max-width:768px){ #chat{right: 10px;bottom: 30vw;width: 55px;} }