@charset "utf-8";

/***** TOPPAGE TAB MODE *****/
@media screen and (max-width: 800px) {
  #mv-slider__nav li {
    height: initial;
    border: initial;
  }
  #mv-slider__nav {
    bottom: 0;
  }
  .top__inner {
    display: none;
  }
  .top-btn__ul {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .top-btn__li {
    margin-right: 0;
    margin-bottom: 15px;
    width: 100%;
    height: 60px;
  }
  .top-btn__li:last-child {
    margin-bottom: 0;
  }
  .top-btn__li a:link {
    font-size: 1em;
    line-height: 53px;
  }

  p.notice {
    text-align: left;
    font-size: 11px!important;
  }
  p.notice br {
    display: none;
  }
  .concept {
    padding: 70px 0;
  }
  .concept .txt img {
    width: 85%;
    height: auto;
  }
  .about {
    padding: 60px 0;
  }
  .about h2 {
    margin-bottom: 30px;
    font-size: 22px;
  }
  .about__box h3 {
    font-size: 12px;
  }
  .about .right {
    float: none;
    margin-bottom: 20px;
    width: 100%;
  }
  .about .right img {
    width: 65%;
    height: auto;
  }
  .about .left {
    float: none;
    width: 100%;
  }
  .about .left img {
    width: 100%;
    height: auto;
  }
  .about .left .pic {
    margin: 20px 0;
  }
  .about .left p {
    text-align: center;
    font-size: 15px;
    line-height: 180%;
  }

  /*** dreams_TAB ***/
  .dreams {
    padding: 30px 0 130px 0;
  }
  .dreamTitleBox h3 {
    font-size: 15px;
  }
  .dreams .sp {
    text-align: center;
  }
  .dreams .sp img {
    width: 97%;
  }
  .dreamTitleBox {
    position: absolute;
    top: 65%;
    -webkit-transform: translateY(-82%) translateX(-50%);
    transform: translateY(-82%) translateX(-50%);
  }
  /*** Movie_TAB ***/
  .top-movie {
    padding: 60px 0;
  }
  .title h3 {
    font-size: 15px;
  }
  .top-movie .item {
    margin: 0 10px;
  }
  .top-movie .item .inn {
    width: auto;
    height: auto;
  }
  /*** category_TAB ***/
  .category {
    padding: 10px 0;
  }
  .category .inner {
    padding: 0 2px;
  }
  .category .copy img {
    width: 90%;
    height: auto;
  }
  .category__ul li {
    float: none;
    margin: 0;
    width: 100%;
  }
  .category__ul li .md {
    margin-bottom: .6em;
    font-size: 1.46rem;
  }
  .category__ul {
    margin-bottom: 0;
  }
  .polaroids li {
    width: 100%;
  }
  .btn {
    margin-top: 30px;
  }
  .btn span {
    padding: 11px 0;
    width: 94%;
    font-size: 16px;
  }
  /*** Reason_TAB ***/
  .reason {
    padding: 70px 0 0 0;
  }
  .fukidashi {
    padding: 15px;
    font-size: 16px;
  }
  .reason .lead {
    padding: 70px 0 12px 0;
    font-size: 42px;
    line-height: 150%;
  }
  .reason p.notice {
    padding-top: .5em;
    text-align: center;
  }
  .reason .box .list .label img {
    width: 160px;
  }
  .reason .box .list .loop {
    padding: 80px 0 0 0;
  }
  .blow {
    height: 80px;
  }
  .loopitem {
    position: relative;
    overflow: hidden;
    margin: 0 auto 0;
    width: 100%;
    height: 250px;
    text-align: left;
  }
  .loopitem ul {
    display: inline;
    float: left;
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 250px;
  }
  .loopitem ul li {
    display: inline;
    float: left;
    overflow: hidden;
    width: 504px;
    height: 250px;
  }
  .loopitem ul li img {
    width: 100%;
    height: auto;
  }
  .loop02 ul li {
    display: inline;
    float: left;
    overflow: hidden;
    width: 167px;
    height: 250px;
  }
  .loop04 ul li {
    display: inline;
    float: left;
    overflow: hidden;
    width: 250px;
    height: 250px;
  }
  .reason .box .list h2 {
    margin-bottom: 15px;
    font-size: 2.14rem;

    lne-height: 1.4;
  }
  .reason .box .list h2 span {
    font-size: 2.14rem;
  }
  .reason .box .list .label {
    top: -4.5%;
  }
  .reason .box .list p {
    padding: 0 15px;
    text-align: left;
    font-size: 1rem;
    line-height: 1.5;
  }
  .reason .box .list p br {
    display: none;
  }
  .reason .box .list {
    padding-bottom: 40px;
  }
  .list_ptr {
    padding-bottom: 50px;
    width: 100%;
  }
  .list_ptr .label img {
    width: 150px;
  }
  .list_ptr .label {
    top: -30px;
    right: 6%;
  }
  .list_ptr.even .label {
    top: -30px;
    left: 6%;
  }
  .list_ptr h2,
  .list_ptr.even h2 {
    padding: 40px 0 0;
    text-align: center;
    font-size: 2.14rem;
  }
  .list_ptr h2 span,
  .list_ptr.even h2 span {
    font-size: 2.14rem;
  }
  .list_ptr p,
  .list_ptr.even p {
    text-align: center;
    font-size: .9rem;
  }

  .polaroids li:nth-child(even) a {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }

  .polaroids li:nth-child(odd) a {
    left: 0;
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }

  .list_ptr.even.history h2 {
    padding-top: 25px;
    line-height: 120%;
  }
  .ouro3 .anim {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
  }
  .ouro3 .right .anim {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
  }
  .ouro {
    margin: 0;
  }
  .btn-viewall {
    left: 20px;
    width: 100px;
  }
  .btn-right {
    display: none;
  }
  .btn-right-sp {
    bottom: 160px;
  }
  .sp-img {
    position: relative;
  }
  .sp-bottom {
    display: block;
  }
  .pc-bottom {
    display: none;
  }
  /*** 申込の流れ_TAB ***/
  .flow {
    padding: 70px 0 30px 0;
  }
  .flow__img {
    padding: 11rem 0 8rem;
  }
  .category__ul li .planInfo {
    padding-top: 10px;
  }
  .informationList {
    padding: 0 10px;
  }
  .informationList .wrap {
    margin-top: 10px;
  }
  .informationList .wrap .left {
    float: none;
    padding-bottom: 10px;
    width: 100%;
  }
  .informationList .wrap .right {
    float: none;
    padding-bottom: 0;
    width: 100%;
  }
  .informationList .wrap .md {
    margin-bottom: 10px;
    padding: 5px 0;
    font-size: 15px;
  }
  .informationList .wrap .limits {
    font-size: 25px;
  }
  .informationList .wrap .result {
    text-align: left;
    font-size: 14px;
  }
  .informationList .wrap .result br {
    display: none;
  }
  /*** Q&A_TAB ***/
  .faq {
    padding: 60px 0;
  }
  .faq dl {
    margin: 5px 0;
    padding: 3px;
    font-size: 13px;
  }
  .faq dl dt {
    padding: 9px 30px 10px 30px;
  }
  .access iframe {
    height: 300px;
  }
  .otherPlan {
    padding: 60px 0;
  }
  .otherPlan p {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 13px;
  }
  .message {
    padding: 70px 0;
  }
  .message__ttl {
    font-size: 15px;
  }
  .message p {
    font-size: 11px;
  }
  .message h3 {
    font-size: 15px;
  }
  .line {
    padding: 40px 0;
  }
  .line h2 {
    font-size: 20px;
    line-height: 130%;
  }
  .method {
    padding: 12px;
    width: 320px;
    font-size: 16px;
  }
  .linea {
    margin-top: 0;
  }
  .linea img {
    height: 20px;
  }
  .linea span {
    padding: 8px 0;
  }
  .idSearch {
    float: none;
    margin-top: 20px;
    padding: 10px;
    width: 100%;
  }
  .line .icon {
    width: 25%;
    height: auto;
  }
  .line .txt {
    width: 72%;
  }
  .line .txt .md {
    font-size: 16px;
  }
  .line .txt p {
    margin: 4px 0 0 0;
    font-size: 13px;
  }
  .only {
    margin-bottom: 30px;
    padding: 0 0;
  }
  .only h3 {
    margin-bottom: 25px;
    font-size: 20px;
    line-height: 160%;
  }
  .chance {
    margin: 0 0 0 0;
    font-size: 23px;
    line-height: 165%;
  }
  .chance span.off {
    font-size: 30px;
  }
  .circle .leadtxt .lead {
    padding-top: 24px;
  }
}/*_TAB*/



/***** TOPPAGE SP MODE *****/

@media screen and (max-width:640px) {
  section h2 {
    margin: 0 auto 1.5em;
  }
  /*** Panel_SP ***/
  .app-menu {
    padding: 0;
  }
  .thum-box {
    padding: 0 4px;
  }
  .thum-box ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .thum-box li {
    display: inline-block;
    margin-right: 0;
    padding-top: 4px;
    width: -webkit-calc(50% - 2px);
    width: calc(50% - 2px);
  }
  
  .thum-box li.app-menu__camp,
  .thum-box li.app-menu__camp02,
  .thum-box li.big-img {
    display: block;
    margin: 0;
    width: 100%;
  }
  .thum-box li.app-menu__camp02 {
    text-align: center;
  }
  /*** dreams_SP ***/
  .dreams {
    padding-top: 30px;
    padding-bottom: 100%;
  }
  .dreamTitleBox {
    position: absolute;
    top: 82%;
    -webkit-transform: translateY(-82%) translateX(-50%);
    transform: translateY(-82%) translateX(-50%);
  }
  .category__title {
    padding-top: 30px;
  }
  .category__inner {
    padding-bottom: 0;
  }
  .category {
    background-image: url(../../img/white_wood_sp.png);
  }
  .polaroids li:nth-child(3) a {
    left: 0;
/*    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);*/
  }

  .polaroids li:nth-child(even) a {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }

  .polaroids li:nth-child(odd) a {
    left: 0;
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }


  /*** Reason_SP ***/
  .title img {
    max-height: 52px;
  }
  .reason__title img {
    width: 100%;
  }
  .reason__catch {
    font-size: 1rem;
    letter-spacing: .1em;
  }
  .reason .lead {
    font-size: 32px;
  }
  .reason .lead span {
    font-size: 5.333rem;
  }
  .circle .ouro {
    width: 250px;
    height: 250px;
  }
  .blow img {
    width: 38.3%;
  }
  .list_ptr .label,.list_ptr.even .label {
    position: static;
    margin: 0 auto;
    width: 150px;
    text-align: center;
  }
  .list_ptr h2,.list_ptr.even h2 {
    margin-bottom: 10px;
    padding: 20px 0 0;
    text-align: center;
  }
  .list_ptr .pic,.list_ptr.even .pic {
    float: none;
    width: 100%;
  }
  .list_ptr .pic img {
    width: 100%;
    height: auto;
  }
  .list_ptr .reason__txt, .list_ptr.even .reason__txt {
    float: none;
    padding: 10px 10px 0;
    width: 100%;
  }
  .list_ptr p,.list_ptr.even p {
    text-align: left;
    line-height: 1.5;
  }
  .btn-readmore--2 {
    margin: 1em auto 2em;
  }
  /*** 申し込みの流れ_SP ***/
  .flow__img {
    padding: 8rem 0 4rem;
    width: 100%;
  }
  .flow__ttl {
    margin-top: 0;
    font-size: 1rem;
    line-height: 1.4;
  }
  .flow__txt {
    font-size: .6em;
  }
  .flow .btn-readmore {
  }
  .otherPlan .left, .otherPlan .right {
    float: none;
    width: 100%;
  }
}

/***** TOPPAGE SP MODE(iphone5用) *****/

@media screen and (max-width:340px) {
  /*** 申し込みの流れ_SP ***/
  .title img {
    max-height: 46px;
  }
  .reason .box .list .label {
    top: -.5%;
  }
  .reason .box .list .label img {
    width: 120px;
  }
  .list_ptr .label img {
    width: 110px;
  }
  .flow__img {
    padding: 7rem 0 3rem;
  }
  .message__ttl {
    font-size: 17px;
  }
}