@charset "utf-8";

div#sb-site {
    padding: 100px 0 0;
}
div#container {
    font-family: 'Kan415Typos';
}
p {
    font-size: 20px;
}
main {
    width: 100%;
    margin: 0 auto;
}
/*-------------------
main
-------------------*/
.main-box {
    background: url(../images/main/main-bg.jpg);
    background-size: cover;
    padding: 5% 0 0;
    height: 70vw;
    position: relative;
}
.main-img {
    width: 640px;
    margin: 0 auto;
    position: relative;
}
.main-box img.rogo_img {
    width: 20vw;
}
.main-img p {
    right: 0;
    display: block;
    position: absolute;
}
.main .intro img.rogo_img {
    width: 50vw;
}
/*--------kumo01--------*/
.main-box:before {
    content: "";
    background: url(../images/kumo01.png) left / contain no-repeat;
    top: 18vw;
    left: 0;
    width: 10vw;
    height: 20vw;
    position: absolute;
    animation-name: fadein_left;
    animation-duration: 3s;
}
.main-box:after {
    content: "";
    background: url(../images/kumo02.png) right / contain no-repeat;
    bottom: 10vw;
    right: 0;
    width: 10vw;
    height: 20vw;
    animation-name: fadein_right;
    animation-duration: 3s;
    position: absolute;
}
/*-------------------
intro
-------------------*/
.intro {
    background: #f6f4ef;
    padding: 10vw 0;
}
.intro h2 {
    font-size: 40px;
}
.intro p {
    font-size: 20px;
    line-height: 3;
    margin: 3% 0;
}

/*-------------------
catch
-------------------*/
.catch ul li {
    letter-spacing: 3px;
}
.catch span{
    font-size: 27px;
}
.catch ul li:nth-child(1) {
    background: url(../images/catch/catch01.jpg);
    background-size: cover;
    height: 30vw;
}
.catch ul li:nth-child(2) {
    background: url(../images/catch/catch02.jpg);
    background-size: cover;
    height: 30vw;
}
.catch ul li:nth-child(3) {
    background: url(../images/catch/catch03.jpg);
    background-size: cover;
    height: 30vw;
}
.catch p.catch01,
.catch p.catch03{
    text-align: left;
    padding: 5vw 0 0 5vw;
}
.catch p.catch02 {
    text-align: right;
    color: #fff;
    padding: 10em 5vw 0 0;
}
.catch p.catch03 {
    color: #fff;
}

/*-------------------
lineup
-------------------*/
.lineup {
    position: relative;
}
.lineup_rogo {
    background: linear-gradient(
90deg
, #bb3b50 0%, #bb3b50 40%, #f6f4f0 0%, #f6f4f0 100%);
    padding: 5%;
}
.lineup_rogo img.rogo_img {
    width:50vw;
}
.lineup_rogo_text {
    text-align: left;
}
.lineup_box,
.lineup_slider{
    -webkit-flex;
    display: flex;
    flex-wrap:wrap;
    width: 100%;
    justify-content: center;
}
.lineup_slider {
    padding-top: 20px;
}
.lineup_box > div {
    width: 50%;
}
.lineup_slider_item {
    width: 12vw;
}
.lineup_inner {
    width: 40vw;
    margin: 0 auto;
    padding-top: 90px;
}
.lineup_box p {
    text-align: left;
    padding: 0 20px 10px;
    font-size: 15px;
}
.lineup_box p.main-text {
    letter-spacing: 1px;
    line-height: 1.7;
}
.lineup_box p.main-text span {
    font-size: 18px;
}

/*----- line up 01 -----*/
.lineup01_bg {
    background: #5277d4;
}
.lineup01_text {
    color: #1c326a;
}
/*----- line up 02 -----*/
.lineup02_bg {
    background: #c53a60;
}
.lineup02_text {
    color: #611127;
}
/*----- line up 03 -----*/
.lineup03_bg {
    background: #aab684;
}
.lineup03_text {
    color: #4c5922;
}
/*----- line up 04 -----*/
.lineup04_bg {
    background: #f1e7dc;
}
.lineup04_text {
    color: #837769;
}
/*----- line up 05 -----*/
.lineup05_bg {
    background: #a1644c;
    position: relative;
}
.lineup05_text {
    color: #eaa489;
}
.lineup05_bg h3:before {
    content: '';
    background: url(../images/lineup/lineup_new.png) top left;
    position: absolute;
    width: 6vw;
    height: 6vw;
    top: -40px;
    left: -20px;
    background-size: cover;
}
/*----- line up 06 -----*/
.lineup06_bg {
    background: #f5c6d0;
    position: relative;
}
.lineup06_text {
    color: #f3728e;
}
.lineup06_bg h3:before {
    content: '';
    background: url(../images/lineup/lineup_new.png) top right;
    position: absolute;
    width: 6vw;
    height: 6vw;
    top: -30px;
    left: 0px;
    background-size: cover;
}
/*----- slick -----*/
.lineup_box > div .slick-dots {
    bottom: 6%;
}

/*-------------------
gallery
-------------------*/
.gallery {
    margin-bottom: 10em;
}
.gallery_rogo {
    padding: 5%;
    background: url(../images/gallery/gallery_bg.jpg);
}
.gallery p {
    text-align: right;
}
.gallery_rogo img.rogo_img {
    width: 50vw;
}
.gallery_box {
    display: flex;
    height: 500px;
}
.gallery_box > div {
    width: 50%;
    padding: 30px 0;
}
.gallery_list ul {
    display: flex;
    flex-wrap: wrap;
    width: 655px;
    margin: 0 auto;
    justify-content: start;
}
.gallery_list ul li {
    width: 24%;
    margin: 0 1% 7px 0;
    position: relative;
}
.gallery_list a:hover {
    opacity: 0.7;
}
img.gallery_title {
    width: 200px;
    margin: 0 0 20px;
}
.gallery_list:nth-child(2) {
    background: #f6f4ee;
}
.gallery_img.img_bg03 {
    background: url(../images/gallery/gallery_img03.jpg) bottom right;
    background-size: cover;
}
.gallery_img:nth-child(2) {
    background: url(../images/gallery/gallery_img05.jpg) bottom right;
    background-size: cover;
}
.gallery_img.img_bg07 {
    background: url(../images/gallery/gallery_img07.jpg) bottom right;
    background-size: cover;
}
.gallery_list ul li a:after {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 20%;
    height: 29px;
    content: "";
    background: url(../images/gallery/zoom_icon.png) no-repeat right bottom;
    background-size: contain;
}

/*-------------------
link
-------------------*/
.link {
    display: flex;
    margin: 50px auto;
    justify-content: center;
}
.link > div {
    margin: 0 1%;
    width: 24%;
}

/*-------------------
plan
-------------------*/
.plan_rogo img.rogo_img {
    width: 50vw;
}
.plan_rogo {
    padding: 5%;
    position: relative;
}
.plan_rogo p {
    position: absolute;
    top: 5vw;
    left: 20vw;
    text-align: left;
}
.shichigosan {
    width: 952px;
    margin: 0 auto;
    font-family: Shuei MaruGo B;
}
.shichigosan p {
    font-size: 12px;
}
.sp-price_box.weekday p.price_text {
    background: #e8383d;
    margin: 10px 5px 0;
}
/*-------------------
faq
-------------------*/
.faq {
    background: url(../images/faq/faq_bg.jpg) top left;
    padding: 50px 0;
    background-size: cover;
}
.faq h2 {
    font-size: 5em;
}
.faq ul ,
.more ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px 0;
}
.faq ul li {
    background: url(../images/faq/q_back.jpg) top left no-repeat #fff;
    width: 40%;
    margin: 1%;
    text-align: left;
    padding: 35px 40px;
    position: relative;
    border-radius: 10px;
    height: 120px;
}
.faq ul li h3 {
    font-size: 18px;
    padding-bottom: 15px;
}
.faq ul li p {
    font-size: 15px;
    color: #814042;
}
.faq_button_img {
    background: #f5f3ec;
}
/*-------------------
more
-------------------*/
.more {
    padding: 50px 0;
    background: #f6f1ec;
}
.more img.more_title {
    width: 120px;
}
.more ul li {
    margin: 5px;
    width: 20%;
}

/*-------------------
scroll up
-------------------*/
.bottom_753_lp {
    position: fixed;
    bottom: 1%;
    right: 1%;
    z-index: 2;
    opacity: 0.7;
}
.bottom_753_lp a {
    display: block;
    width: 15em;
}

/*-------------------
animate
-------------------*/
.fade_up {
  transition: all 1s;
  -webkit-transform: translate3d(0, 50%, 0);
  transform: translate3d(0, 50%, 0);
  opacity: 0;
}
.fade_up.scrollin {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

@keyframes fadein_left {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadein_right {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*下部固定*/
.bottom_753_lp {
    position: fixed;
    bottom: 1%;
    right: 1%;
    z-index: 2;
    opacity: 0.7;
}
.bottom_753_lp a {
    display: block;
    width: 10vw;
}

/*---------------------------------------
sp
----------------------------------------*/
@media screen and (max-width:640px) {
div#sb-site {
    padding: 66px 0 0;
}
p { font-size: 15px; }
div#container {
    margin-bottom: 10px;
}

/*-------------------
main
-------------------*/
.main {
	position: relative;
	width: 100%;
}
.main-box {
    background: url(../images/main/main-bg_sp.jpg);
    background-size: cover;
    padding: 0;
    height: 550px;
}
.main-img {
    width: 95%;
}
.main-box img.rogo_img {
    width: 200px;
    padding-top: 5%;
}
.main-box:before {
    content: "";
    background: url(../images/kumo01.png) left / contain no-repeat;
    top: 25vw;
    left: 0;
    width: 15vw;
    height: 50vw;
    position: absolute;
    animation-name: fadein_left;
    animation-duration: 3s;
}
.main-box:after {
    content: "";
    background: url(../images/kumo02.png) right / contain no-repeat;
    bottom: 5vw;
    right: 0;
    width: 20vw;
    height: 45vw;
    animation-name: fadein_right;
    animation-duration: 3s;
    position: absolute;
}
/*-------------------
intro
-------------------*/
.intro h2 {
    font-size: 20px;
}
.intro p {
    font-size: 15px;
    line-height: 2.5;
    margin: 3%;
}

/*-------------------
catch
-------------------*/
.catch ul li {
    position: relative;
    letter-spacing: 3px;
}
.catch span{
    font-size: 1.6em;
}
.catch p {
font-size: 1.3em;
    letter-spacing: 3px;
    line-height: 1.5;
}
.catch ul li:nth-child(1) {
    background: url(../images/catch/catch01_sp.jpg);
    background-size: cover;
    height: 56em;
}
.catch ul li:nth-child(2) {
    background: url(../images/catch/catch02_sp.jpg);
    background-size: cover;
    height: 56em;
}
.catch ul li:nth-child(3) {
    background: url(../images/catch/catch03_sp.jpg);
    background-size: cover;
    height: 56em;
}
.catch p.catch01,
.catch p.catch03 {
    padding: 50px 0 0 25px;
    text-align: left;
}
.catch p.catch02 {
    padding: 50px 25px 0 0;
}
/*-------------------
line up
-------------------*/
.lineup_rogo {
    position: relative;
    height: 330px;
}
.lineup_rogo img.rogo_img {
    width: 300px;
    padding-top: 10%;
    margin-left: -7.5em;
    margin-top: -2em;
}
.lineup_rogo_text {
    text-align: left;
    padding: 3% 0 5% 5%;
}
.lineup_rogo p {
    bottom: 1em;
    position: absolute;
}

.lineup_box > div {
    width: 50%;
    padding-bottom: 0;
}
.lineup_inner {
    padding-top: 50px;
}
lineup05_bg.lineup_inner {
    background: #a0644b;
}
.lineup_box p.main-text span {
    font-size: 16px;
}
.lineup_box p {
    text-align: left;
    padding: 0 20px 10px;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1.5;
}
.lineup_box{
    -webkit-flex;
    display: flex;
    flex-wrap:wrap;
    width: 100%;
}

#container .lineup_box p.main-text{
    letter-spacing: 1px;
    line-height: 1.2;
}
/*----- line up 01 -----*/
.lineup01_bg {
    background: #5277d4;
}
.lineup01_bg p {
    text-align: left;
    padding:5%;
}
.lineup01_text {
    color: #1c326a;
}
/*----- line up 02 -----*/
.lineup02_bg {
    background: #c53a60;
}
.lineup02_bg p {
    text-align: left;
    padding:5%;
}
.lineup02_text {
    color: #611127;
}
/*----- line up 03 -----*/
.lineup03_bg {
    background: #aab684;
}
.lineup03_bg p {
    text-align: left;
    padding:5%;
}
.lineup03_text {
    color: #4c5922;
}
/*----- line up 04 -----*/
.lineup04_bg {
    background: #f1e7dc;
}
.lineup04_bg p {
    text-align: left;
    padding:5%;
}
.lineup04_text {
    color: #837769;
}
/*----- line up 05 -----*/
.lineup05_bg {
    background: #a1644c;
    position: relative;
}
.lineup05_bg p {
    text-align: left;
    padding:5%;
}
.lineup05_text {
    color: #eaa489;
}
.lineup05_bg h3:before {
    content: '';
    background: url(../images/lineup/lineup_new.png) top left;
    position: absolute;
    width: 60px;
    height: 60px;
    top: -40px;
    left: -20px;
}
/*----- line up 06 -----*/
.lineup06_bg {
    background: #f5c6d0;
    position: relative;
    padding-top: 5%;
    padding-bottom: 0;
}
.lineup06_bg p {
    text-align: left;
    padding:5%;
}
.lineup06_text {
    color: #f3728e;
}
.lineup06_bg h3:before {
    content: '';
    background: url(../images/lineup/lineup_new.png) top right;
    position: absolute;
    width: 60px;
    height: 60px;
    top: -30px;
    left: 0px;
    z-index: 1;
}
/*----- slick -----*/
.lineup_box > div .slick-dots {
    bottom: 6%;
}

/*-------------------
link
-------------------*/
.link {
    display: block;
}
.link > div {
    margin: 0 auto 20px;
    width: 100%;
    overflow: hidden;
}
.link > div img {
  transition-duration: 0.3s;
}
.link > div img:hover {
    transform: scale(1.1);
    transition-duration: 0.3s;
}
/*-------------------
gallery
-------------------*/
.gallery {
    margin-bottom: 5em;
}
.gallery p {
    text-align: right;
    margin-right: 20px;
}
.gallery_rogo {
    padding: 0%;
    background: url(../images/gallery/gallery_bg.jpg);
    background-size: cover;
    padding-bottom: 20px;
}
.gallery_rogo img.rogo_img {
    width: 300px;
}
.gallery_box > div {
    width: 100%;
    padding: 20px 0;
}
.gallery_img {
    display: none;
}
.gallery_box {
    display: block;
    height: auto;
    margin: 0 0 30px;
}
.gallery_list ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 5%;
    justify-content: start;
}
.gallery_list ul li {
    width: 28%;
    margin: 1%;
}
.gallery_btn img {
    width: 85%;
}

/*-------------------
plan
-------------------*/
.shichigosan {
    width: 100%;
}
.plan_rogo img.rogo_img {
    width: 300px;
    margin-right: -50px;
    padding-top: 50px;
}
.plan_rogo {
    padding: 0 5%;
}
.plan_rogo p {
    left: 20px;
    top: -1em;
}
#brother .set-plan_list > div {
    width: 100%;
    margin: 0 auto;
}
/*-------------------
faq
-------------------*/
.faq {
    background: #f5f3ed;
    padding: 22px 0;
}
.faq ul li {
    width: auto;
    margin: 3% 5%;
    text-align: left;
    padding: 25px;
    border-radius: 10px;
    height: auto;
}
.faq ul li h3 {
    font-size: 16px;
    padding-bottom: 10px;
}
.faq ul li p {
    font-size: 13px;
}
.more ul li {
    margin: 5px;
    width: 40%;
}
.faq_button_img img {
    width: 70%;
}

/*下部固定*/
.bottom_753_lp {
    bottom: 80px;
}
.bottom_753_lp a{
    width: 30vw;
}
}