@import url("cssreset.css");
@import url("base.css");

/* top.css */
/*--------------------------------------*/

#header {
    position:fixed;
    background:#fff;
    z-index:10000;
}
	
/* slider */
#slider {
    overflow:hidden;
    width:980px;
    height:330px;
    margin:0 auto;
    text-align:center;
    padding-top:120px;
}
#slider ul {
    width:980px;
    margin:0 auto;
}
#slider ul li {
    margin:0;
    padding:0;
}

.bx-wrapper {
    margin: 0 auto;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    bottom:0;
}
.bx-wrapper .bx-prev {
    left:10px;
    background:url("../images/top/slide_btn_prev.png") no-repeat 0 0;
}
.bx-wrapper .bx-next {
    right:10px;
    background:url("../images/top/slide_btn_next.png") no-repeat 0 0;
}
.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
    background-position:0 0;
}

.bx-wrapper .bx-controls-direction a {
    margin-top:-16px;
    outline:0;
    width:56px;
    height:56px;
}


/* top head */
#topHead {
    background:#e6f3d9;
    margin:0 auto 30px;
    border-bottom:5px solid #7fc342;
}
#topHeadInner {
    width:980px;
    margin:0 auto;
    padding:25px 0 0;
    text-align:center;
}
#topHeadInner ul.btn {
    margin:0 auto 1em;
    text-align:center;
}
#topHeadInner ul.btn li {
    display:inline-block;
    margin:0 30px;
    line-height:0.8em;
}
#topHeadInner ul.btn2 {
    /*width:234px;*/
    margin:0 auto;
    text-align:center;
}
#topHeadInner ul.btn2 li {
    /*display:block;*/
    display:inline-block;
    margin:0 auto 1em;
}



/* contents */
p.about {
    background:url("../images/top/img_about.png") no-repeat right 0;
    padding:0 320px 60px 0;
}

p.whenwhat {
    background:url("../images/top/img_2w.png") no-repeat right 0;
    padding:0 395px 60px 0;
}

p.rule {
    background:url("../images/top/img_rule.png") no-repeat right 0;
    padding:0 375px 280px 0;
}
p.rule span {
    color:#f08cbe;
}

p.who {
    background:url("../images/top/img_who.png") no-repeat right 0;
    padding:0 350px 60px 0;
}

p.rights {
    background:url("../images/top/img_rights.png") no-repeat right 0;
    padding:0 380px 60px 0;
}

p.privacy {
    padding:1em 0 0;
}

/* tel contents balloons */
.tel_contents {
    margin:0 auto 40px;
}
.tel_contents .left {
    float:left;
    width:385px;
}
.tel_contents .right {
    float:right;
    width:385px;
}
.tel_contents .box {
    width:385px;
    margin:0 auto 20px;
    padding:52px 0 0;
}
.tel_contents .box_a {
    background:url("../images/top/balloon_tel_top_a.png") no-repeat 0 0;
}
.tel_contents .box_b {
    background:url("../images/top/balloon_tel_top_b.png") no-repeat 0 0;
}
.tel_contents .box .contents {
    background:url("../images/top/balloon_tel_vertical.png") repeat-y 0 bottom;
    padding:20px;
    text-align:left;
}
.tel_contents .box .bottom {
    width:385px;
    height:65px;
    background:url("../images/top/balloon_tel_bottom.png") no-repeat 0 0;
}


/* thoughts balloons */
.thoughts {
    position:relative;
    width:100%;
    margin:0 auto 40px;
}
.thoughts .left {
    float:left;
    width:382px;
}
.thoughts .right {
    float:right;
    width:382px;
}
.thoughts .box {
    position:relative;
    width:330px;
    margin:0 0 30px;
    padding:20px;
    border-radius:10px;
}

.thoughts .red {
    border:6px solid #ff0000;
}
.thoughts .blue {
    border:6px solid #005adc;
}
.thoughts .yellow {
    border:6px solid #ff9900;
}
.thoughts .sky {
    border:6px solid #00adcb;
}
.thoughts .green {
    border:6px solid #44b936;
}

.thoughts .arrow {
    position:absolute;
}
.thoughts .red .arrow {
    top:70px;
    right:-31px;
}
.thoughts .blue .arrow {
    top:75px;
    right:-31px;
}
.thoughts .yellow .arrow {
    top:70px;
    left:-31px;
}
.thoughts .sky .arrow {
    top:20px;
    left:-31px;
}
.thoughts .green .arrow {
    top:120px;
    left:-31px;
}

.thoughts .doll_a {
    position:absolute;
    top:120px;
    left:0;
    right:0;
    margin:auto;
}
.thoughts .doll_b {
    position:absolute;
    top:360px;
    left:0;
    right:0;
    margin:auto;
}
.thoughts .doll_c {
    position:absolute;
    top:570px;
    left:0;
    right:0;
    margin:auto;
}


/* faq */
dl.faq {
    margin:0 0 30px;
}
dl.faq dt {
    float:left;
    margin:0 0 20px;
}
dl.faq dt img {
    display:inline-block;
}
dl.faq dt.q {
    background:#f58250;
    padding:5px;
    border-radius:10px;
}
dl.faq dt.a {
    height:100%;
    background:#ffffff;
    padding:2px;
    border:3px solid #f58250;
    border-radius:10px;
}
dl.faq dd {
    margin:0 0 30px 80px;
}
dl.faq dd.q {
    line-height:54px;
    font-size:1.6em;
    color:#f58250;
}




/* - 980px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 980px) {

#header {
    height:120px;
}

/* slider */
#slider {
    width:100%;
    height:auto;
}
#slider ul {
    width:100%;
}
.bx-wrapper .bx-prev {
    left:1%;
}
.bx-wrapper .bx-next {
    right:-12%;
}
.bx-wrapper .bx-prev,.bx-wrapper .bx-next {
    background-size:contain;
}

.bx-wrapper .bx-controls-direction a {
    margin-top:-16px;
    outline:0;
    width:20%;
    height:20%;
}


/* top head */
#topHead img {
    display:block;
    max-width:100%;
    height:auto;
}
#topHeadInner {
    width:100%;
}
#topHeadInner ul.btn {
}
#topHeadInner ul.btn li {
    width:45%;
    margin:0 1%;
}
#topHeadInner ul.btn2 {
}
#topHeadInner ul.btn2 li {
}


/* contents */
p.about {
    background-size:28%;
    padding:0 33% 2em 0;
}
p.whenwhat {
    background-size:35%;
    padding:0 40% 2em 0;
}
p.rule {
    background-size:30%;
    padding:0 37% 8em 0;
}
p.who {
    background-size:28%;
    padding:0 33% 2em 0;
}
p.rights {
    background-size:32%;
    padding:0 40% 2em 0;
}


/* tel contents balloons */
.tel_contents {
}
.tel_contents .left {
    width:47%;
}
.tel_contents .right {
    width:47%;
}
.tel_contents .box {
    width:100%;
    padding:13.50% 0 0;
}
.tel_contents .box_a {
    background-size:contain;
}
.tel_contents .box_b {
    background-size:contain;
}
.tel_contents .box .contents {
    background-size:100%;
}
.tel_contents .box .bottom {
    width:100%;
    background-size:contain;
}


/* thoughts balloons */
.thoughts {
}
.thoughts .left {
    width:40%;
}
.thoughts .right {
    float:left;
    width:40%;
    margin-left:14%;
}
.thoughts .box {
    width:100%;
    margin:0 0 2em;
    padding:5%;
}

.thoughts .red {
    border:2% solid #ff0000;
}
.thoughts .blue {
    border:2% solid #005adc;
}
.thoughts .yellow {
    border:2% solid #ff9900;
}
.thoughts .sky {
    border:2% solid #00adcb;
}
.thoughts .green {
    border:2% solid #44b936;
}

.thoughts .arrow {
    display:none;
}

.thoughts .doll_a {
    top:5em;
    width:8%;
}
.thoughts .doll_b {
    top:20em;
    width:8%;
}
.thoughts .doll_c {
    top:32em;
    width:8%;
}


/* faq */
dl.faq {
}
dl.faq dt.q {
}
dl.faq dt.a {
}
dl.faq dd {
    margin:0 0 30px 10%;
}
dl.faq dd.q {
}




}
/* - 980px end */



/* - 640px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 640px) {

#wrapper {
    overflow:hidden;
}

#headerInner {
    height:74px;
}

#headerInner h1 {
    margin-top:10px;
}

/* top head */
#topHead img {
}
#topHeadInner {
    width:100%;
}
#topHeadInner ul.btn {
}
#topHeadInner ul.btn li {
    display:block;
    width:90%;
    margin:0 5% 1em;
}
#topHeadInner ul.btn2 {
    max-width:234px;
}
#topHeadInner ul.btn2 li {
}



/* contents */
p.about {
    background-size:60%;
    background-position:center bottom;
    margin:0 0 3em;
    padding:0 0 45%;
}
p.whenwhat {
    background-size:70%;
    background-position:center bottom;
    margin:0 0 3em;
    padding:0 0 55%;
}
p.rule {
    background-size:70%;
    background-position:center bottom;
    margin:0 0 3em;
    padding:0 0 75%;
}
p.who {
    background-size:60%;
    background-position:center bottom;
    margin:0 0 3em;
    padding:0 0 28%;
}
p.rights {
    background-size:70%;
    background-position:center bottom;
    margin:0 0 3em;
    padding:0 0 50%;
}


/* tel contents balloons */
.tel_contents {
}
.tel_contents .left,.tel_contents .right {
    float:none;
    width:90%;
    margin:0 auto;
}
.tel_contents .box {
    margin:0 auto 1em;
}


/* thoughts balloons */
.thoughts {
}
.thoughts .left,.thoughts .right {
    float:none;
    width:100%;
    margin:0;
}
.thoughts .box {
    width:84%;
    margin:0 auto 1.5em;
}

.thoughts .doll_a,.thoughts .doll_b,.thoughts .doll_c {
    display:none;
}


/* faq */
dl.faq dd {
    margin:0 0 1em 16%;
}
dl.faq dd.q {
    line-height:54px;
    font-size:1.4em;
}


}
/* - 640px end */