@charset "utf-8";

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

html { scroll-behavior: smooth;}
.chara-title {
    line-height: 1;
    text-align: center;
}
#characters {
  text-align: center;
    padding-top: 4rem;
    position: relative;
}
#characters img {
  max-width: 100%;
}

/********************************
col-5 style
********************************/
.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5,
.col-xs-2-5, .col-sm-2-5, .col-md-2-5, .col-lg-2-5,
.col-xs-3-5, .col-sm-3-5, .col-md-3-5, .col-lg-3-5,
.col-xs-4-5, .col-sm-4-5, .col-md-4-5, .col-lg-4-5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}   
.col-xs-1-5 {
    width: 20%;
    float: left;
}
.col-xs-2-5 {
    width: 40%;
    float: left;
}

.col-xs-3-5 {
    width: 60%;
    float: left;
}

.col-xs-4-5 {
    width: 80%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-1-5 {
        width: 20%;
        float: left;
    }
    .col-sm-2-5 {
        width: 40%;
        float: left;
    }
    .col-sm-3-5 {
        width: 60%;
        float: left;
    }
    .col-sm-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
    .col-md-2-5 {
        width: 40%;
        float: left;
    }
    .col-md-3-5 {
        width: 60%;
        float: left;
    }
    .col-md-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
    .col-lg-2-5 {
        width: 40%;
        float: left;
    }
    .col-lg-3-5 {
        width: 60%;
        float: left;
    }
    .col-lg-4-5 {
        width: 80%;
        float: left;
    }
} 

body {
  font-family:'Roboto','游ゴシック体','YuGothic', sans-serif;
}

.dropdowns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
}

.genre-margin {
    margin-bottom: 60px;
}

.dropdown-genre {
    background: #3a7bd5;
    color: #fff;
    border: solid #3a7bd5 2px;
    background: #3a7bd5;
    font-size: 1.6rem;
    display: block;
    padding: 12px 0;
    width: 100%;
}


.dropdown-genre:hover, .dropdown-genre:focus {
    border: solid #3a7bd5 2px;
    background: #3a7bd5 !important;
    color: #fff;
}

.dropdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dropdown-icon:after {
  font-family: "FontAwesome";
  font-weight: 900;
  position: absolute;
  right: 14px;
  font-size: 12px;
  content: "\f078";
}

.open > .dropdown-menu {
    width: 100%;
}
.open > .dropdown-icon:after {
  content: "\f077";
}

#product_row {
    margin: 0 auto;
    width: 1024px;/* pc用 */
    max-width: 100%;  
}

.product-genre {
    font-size: 24px;
    margin: 0;
    padding: 0;
    border-bottom: solid 1px #3a7bd5;
    font-weight: bold;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
}

.product-wrap {
/*    padding: 50px 0;*/
}

.product {
    border: solid 1px #ccc;
    margin-bottom: 3rem;
}

.product-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    position: relative;
}

.product .img-aspic {
    max-width: 80px;
    position: absolute;
    bottom: -30px;
    right: 6%;
}

@media (max-width: 576px) {
    .product .img-aspic {
        max-width: 60px;
        right: 4%;
        bottom: -20px;
    }
}

.product-header-logo {
    max-width: 100%;
    width: 260px;
}

.product-header.needstour {
    background-color: #fff5f5;
}

.product-header.kanxashi-cloud {
    background-color: #fffafb;
}
.product-header.cuticomi-cloud {
    background-color: #eff4f0;
}
.product-header.xenigata-cloud {
    background-color: #ecf1f7;
}
.product-header.shaseen {
    background-color: #f7f7f7;
}
.product-header.wakixashi-cloud {
    background-color: #fceeff;
}
.product-header.vansow {
    background-color: #fff7ec;
}
.product-header.cancel-pay {
    background-color: #f6fbff;
}
.product-header.oshiharai-com {
    background-color: #e8eee2;
}
.product-header.special-coupon-jp {
    background-color: #fff7e8;
}
.product-header.xenmai {
    background-color: #eef4d7;
}
.product-header.kanxashi-wedding {
    background-color: #e5f9f7;
}

.product-header.showby {
    background-color: #e4f4f9;
}
.product-header.kinpla {
    background-color: #f2fcfc;
}
.product-header.kinpla {
    background-color: #f2fcfc;
}
.product-header.shifop {
    background-color: #dcebf7;
}

.product-header.kankou {
    background-color: #f3ede8;
}
.product-header.ulalaka {
    background-color: #dae3e5;
}

.product-body {
    margin: 20px;
}
.product .categorys {
    margin-bottom: 6px;
    /*height: 20px;*/
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.product .category {
  font-size: 12px;
  padding: 5px 10px;
  margin-right: 10px;
  margin-bottom: 6px;
  border-radius: 2px;
  vertical-align: middle;
  background-color: #eee;
  display: inline-block;
}
.product .copy {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    line-height: 1.2;
}
.product .copy span {
    font-size: 12px;
    font-weight: normal;
    padding-left: 6px;
}
.product .description {
    min-height: 140px;
}
.product-body-wrap {

}
.product .button-wrap {
    padding: 1rem 0 0;
    height: 46px;
}

@media (max-width: 991px) {
    .product .description {
        font-size: 12px;
    }
    .product .category {
        font-size: 10px;
    }
    .product .copy {
        font-size: 14px;
    }
    .product .product-body {
        height: 280px;
        position: relative;
    }
    .button-wrap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }
}
@media (max-width: 768px) {
    .product .description {
        min-height: auto;
    }
    .product .product-body {
        height: auto;
        position: static;
    }
    .button-wrap {
        position: static;
    }


}

@media (max-width: 576px) {
    .product .copy {
        margin-top: 6px;
    }
    .product .categorys {
        margin-bottom: 0;
    }
    .product .category {
      font-size: 10px;
      margin-bottom: 10px;
    }
}

/* product
needstour

kanxashi-cloud
cuticomi-cloud
xenigata-cloud
shaseen
wakixashi-cloud
vansow
cancel-pay
oshiharai
special-coupon-jp
xenmai
kanxashi-wedding

showby
kinpla
*/


.btn-product,
.btn-product-link {
  cursor: pointer;
  position: relative;
  font-weight: bold;
  padding-right: calc(10px + 1rem) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 8px;
  margin: 0 auto;
  background: #3a7bd5;
  color: #fff;
  border: solid #3a7bd5 1px;
  font-size: 1.4rem;
  width: 230px;
  padding: 12px 0;
  padding-left: 2rem;
  max-width: 100%;
}

.btn-product:hover,
.btn-product-link:hover,
.btn-product:focus,
.btn-product-link:focus {
  border: solid #3a7bd5 1px;
  background: #fff !important;
  color: #3a7bd5;
}

.btn-product:after,
.btn-product-link:after {
  font-family: "FontAwesome";
  font-weight: 900;
  position: absolute;
  right: 14px;
  font-size: 1.4rem;
  font-weight: normal;
}
.btn-product:after {
  content: "\f105";
}
.btn-product-link:after {
  content: "\f08e";
}































/* product ページ */
div.button-link{
    margin: 10px 0 20px 0;
    text-align: center;
}
#product-content div.button-link{
    text-align: center;
    margin: 30px 0 50px;
}



h2.product-copy{
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    margin: 0;
    padding: 5px 0;
}
h3.product-dis{
    margin: 0;
    padding: 5px 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

div#page-sub-copy{
}

div#page-sub-copy .copy-box{
    color: #fff;
    text-align: center;
    padding: 20px 0;
}
div#page-sub-copy .copy-box h3{

}
div#page-sub-copy .copy-box h4{
    line-height: 1.5;
}
.product-content-border{

}

#product-content{

}

.margin-line{
    border-top: solid 2px #878999;
    border-bottom: solid 4px #878999;
    padding: 2px 0;
    margin: 40px 0;
}
/********************************
Product Function
********************************/
#product-content h3.title{
    text-align: center;
    margin: 20px 0 50px 0;
    font-size: 22px;
    font-weight: bold;
}

.product-des {
    padding: 0 0 15px;
    text-align: left;
}
.product-des .logo-img{
    text-align: center;
}
.product-des .logo-img img {
    width: 260px;
}
.product-des h3.product-dis{
    text-align: left;
}

.small-margin .col-md-4,.small-margin .col-sm-4,.small-margin .col-xs-4 { padding: 0 5px;  }

.product-category-detail{
    border-top : #878999 solid 2px;
    padding: 15px 0 20px;
}
.product-category-detail .product-detail-category-flexbox{
    margin: 0 0 10px 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-betweens;
}
.product-category-detail .detail-category{
  width: 100%;
  font-size: 12px;
  border-radius: 6px;
  height: 60px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
span.important {
    position: absolute;
    font-size: 8px;
    bottom: 23%;
    right: 20%;
}


.disable-border{
    border: solid 2px #E6E6E6;
    color: #E6E6E6;
    font-weight: bold;
}
.function-des {
    overflow: hidden;
    background: #F9F9F9;
    padding: 0 0 0 0;
}
.function-des img{
    display: inline-block;
    width: 100%;
}
.funclable{
    background: #3FA9F5;
    color: #fff;
    width: 80px;
    text-align: center;
    font-size:14px;
    padding: 6px 0;
}
.func{
    margin: 20px 0 10px 0;
}
.func.row{
    margin:0;
}
.func-wrap{
    padding: 0 0 0 15px;
    margin: 0 0 5px 0;
}
.func-wrap h4{
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 4px 0;
    padding: 0;
}
.func-wrap p{
    font-size: 12px;
}
/********************************
interview
********************************/
.titles{
    margin: 20px 0 30px 0;
    display: flex;
    justify-content: space-between;
}

.movie-title{
    width: 380px;
    display: block;
    margin: 0 auto 20px auto;
}

/** 
 * タイトル表示覧の大枠。
 * ここに線などは引かず、
 * 横幅の指定と、色で下方向にはみ出す分の余白を調整する
 */
h3.title-style {
    position :relative;
    margin: 0;
    width: 100%;
    max-width: 400px;
    text-align: center;
    margin-bottom: 15px;
}
/** 
 * 実際に文字を入力する要素
 * ここに背景色、縁の先などを指定
 * z-indexはafter要素より上に来るように指定
 */
h3.title-style > p {
    font-size: 20px;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 12px 0;
    background: #fff;
    border: solid 2px #4d4f59;
    position: relative;
    z-index: 100;
}
/** 
 * 各プロダクト毎の色を付ける部分
 * z-indexはpより下になるようにする
 */
h3.title-style:after {
    content: " ";
    width: 100%;
    height: 50px;
    border-right: solid 2px #4d4f59;
    border-bottom: solid 2px #4d4f59;
    position: absolute;
    display: block;
    right: -10px;
    top: 10px;
    z-index: 99;
}

.center-title{
    margin: 0 auto 20px;
}

.story_title{
    width: 380px;
    display: block;
    float: left;
}

.int_img_title{
    width: 200px;
    display: block;
    margin: 20px 0 0 0;
}

.int_img{
    width: 100%;
    max-width: 260px;
    display: block;
    margin: 0 auto;
}
p.pos{
    margin: 6px 0 0 0;
    text-align: center;
    font-size: 10px;
}
p.name{
    margin: 0 0 0 0;
    text-align: center;
}

.int_title{
    display: inline-block;
    margin: 0 0 20px 0;
    font-size: 20px;
    padding: 10px;
    color: #fff;
}
.top{
    text-align: left;
    margin: 20px 0 10px 0;
}
.under{
    text-align: right;
    margin: 20px 0 10px 0;
}
dl.interview{

}
dl.interview dt{
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 5px 0;
    color: #491022;
}
dl.interview dd{
    line-height: 1.5;
    margin: 0 0 15px 0;
}
.hotel {
    text-align: center;
    margin: 0 0 20px 0;
    overflow: hidden;
}

.hotel p{
    font-size: 12px;
}
.hotel img{
    border: solid 1px #fff;
    margin: 0 auto 5px;
}
.video{
    text-align: center;
}
.video iframe{
 
 width: 560px;
 height: 315px;   
}

/********************************
製品color
********************************/

/*  製品から―*/
.kanxashi-cloud-color{
    background: #F9AAD4;
}
.shaseen-color{
    background: #90D3F4
}
.xenigata-cloud-color{
    background: #4E7FBD;
}
.cuticomi-cloud-color{
    background: #8AC1AA;
}
.kanxashi-wedding-color{
    background: #53b0ae;
}
.showby-color{
    background: #2590BA;
}

.kanxashi-cloud-colorb{
    border: solid 2px #F9AAD4;
    background: #fff;
    font-weight: bold;
    color: #F9AAD4 !important;
}
.shaseen-colorb{
    border: solid 2px #90D3F4;
    background: #fff;
    font-weight: bold;
    color: #90D3F4 !important;
}
.xenigata-cloud-colorb{
    border: solid 2px #4E7FBD;
    background: #fff;
    font-weight: bold;
    color: #4E7FBD !important;
}
.cuticomi-cloud-colorb{
    border: solid 2px #8AC1AA;
    background: #fff;
    font-weight: bold;
    color: #8AC1AA !important;
}
.kanxashi-wedding-colorb{
    border: solid 2px #53b0ae;
    background: #fff;
    font-weight: bold;
    color: #53b0ae !important;
}
.vansow-colorb {
    background: #fff;
    border: solid 2px #ea8f1a;
    font-weight: bold;
    color: #ea8f1a !important;
}
.wakixashi-colorb {
    background: #fff;
    border: solid 2px #753383;
    font-weight: bold;
    color: #753383 !important;
}

.showby-colorb {
    background: #fff;
    border: solid 2px #2590BA;
    font-weight: bold;
    color: #2590BA !important;
}


.kanxashi-cloud-bgcolor,h3.title-style.kanxashi-cloud-bgcolor:after{
    background:linear-gradient( to right, #E0A4AF, #DF578F);
}
.shaseen-bgcolor,h3.title-style.shaseen-bgcolor:after{
    background:linear-gradient( to right, #A5E2FF,#15B1EE);
}
.xenigata-cloud-bgcolor,h3.title-style.xenigata-cloud-bgcolor:after{
    background:linear-gradient( to right, #C0C6DD,#061F5A);
}
.cuticomi-cloud-bgcolor,h3.title-style.cuticomi-cloud-bgcolor:after{
    background:linear-gradient( to right, #A7D3BF,#49C09A);
}
.kanxashi-cloud-border{
    border: solid 2px #F9AAD4;
    color: #F9AAD4;
    font-weight: bold;
}
.shaseen-border{
    border: solid 2px #90D3F4;
    color: #90D3F4;
    font-weight: bold;
}
.xenigata-cloud-border{
    border: solid 2px #4E7FBD;
    color: #4E7FBD;
    font-weight: bold;
}
.cuticomi-cloud-border{
    border: solid 2px #8AC1AA;    
    color: #8AC1AA;
    font-weight: bold;
}
.kanxashi-wedding-border{
    border: solid 2px #53b0ae;    
    color: #8AC1AA;
    font-weight: bold;
}
#page-title img{
    width: 100%;
    max-width: 320px;
}
@media (max-width: 768px) {
    .pc{
        display: none;
    }
h3.title-style {
    margin: 0 auto 30px;
}
#product_row{
    margin: 0 auto;
    width: 100%;/* pc用 */        
}
.video iframe{
    margin: 30px auto 0;
width: 100%;
height: 300px;   
}
#page-title img{
    width: 100%;
    max-width: 320px;
}
.product-des .logo-img img {
    width: 100%;
    max-width: 260px;
}
.product-logo-area img{
    width: 100%;
    max-width: 320px;
}

    .product-box{
    margin: 0 auto;
    padding: 0;
    width: 100%;/* pc用 */
    }
    
    .product-category-box{
        width: 100%;/* pc用 */
        height:120px;
        margin: 0 auto;
        padding: 10px 0 0;
    }
    .product-category-flexbox{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .product-category-box .product-category-flexbox .product-category{
      width: 30%;
      font-size: 14px;
      border-radius: 6px;
      height: 60px;
      padding: 10px 0;
      box-sizing: border-box;
      vertical-align: middle;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    
    #product_row{
        width: 100%;
        margin: 0 auto;

    }    
    .product-image-box{
        display: none;
    }
    
    .int_img_title{
        display: none;
    }
    .story_title{
        width: 100%;
        display: block;
        float: none;
        max-width: 360px;
        margin: 0 auto;
    }
    .movie-title{
        width: 100%;
        display: block;
        max-width: 360px;
    }
    .int_title{
        display: inline-block;
        margin: 0 0 20px 0;
        font-size: 18px;
        padding: 10px;
        color: #fff;
    }
    .top{
        text-align: center;
        margin: 20px 0 0px 0;
    }
    .under{
        text-align: center;
        margin: 30px 0 0px 0;
    }
    dl.interview{
        margin: 20px 0;
    } 
    .hotel img{
        margin: 0 auto 5px;
        width: 100%;
        display: inline-block;
    }
    .title-border {
        margin: 0 auto;
    }
}



@media screen and (min-width:768px) and ( max-width:992px) {
    #product_row{
    margin: 0 auto;
    width: 100%;/* pc用 */        
    }
#page-title img{
    width: 320px;
}
.product-des .logo-img img {
    width: 260px;
}
    .product-des .logo-img{
        text-align: center;
    }

    .product-des .logo-img img {
        width: 100%;
    }
    .small-margin .col-sm-4 { padding: 0 2px;  }
    .product-category-detail .detail-category{
      font-size: 10px;
    }
    .int_title{
       display: inline-block;
       margin: 0 0 20px 0;
       font-size: 20px;
       padding: 10px;
       color: #fff;
    }
    .top{
       text-align: left;
       margin: 20px 0 10px 0;
    }
    .under{
       text-align: right;
       margin: 20px 0 10px 0;
    }
    .story_title{
        width: 380px;
        display: block;
        float: left;
    }
    .int_img_title{
        width: 200px;
        display: block;
        margin: 20px 0 0 0;
        float: right;
    }
    .hotel {
        
    }
    .hotel p{
        text-align: center;
        font-size: 10px;
    }
    .hotel img{
        width: 100%;
        display: inline-block;
    }
    .product-image-box{
        margin: 30px auto 0;
    }

}

.ptext {
    font-size:10px;text-align: right;
}
.title-style-margin {
    margin: 0 auto 30px !important;
}