@charset "UTF-8";

/* ---------------------------------------------------
   サクラのページのCSS 
------------------------------------------------------ */

/* 共通デザインの変更 */


/* リンクのスタイル */
.outside-link-sacla{
  text-decoration: underline;
}

.content #content-sacla h2:not(.custom1) {
    background: rgba(0, 0, 0, 0) url("https://www.jss-net.com/wp-content/themes/jss/images/h2-bg-sacla.svg") no-repeat scroll 0 0 / cover ;
    color: #f52f95;
}
.content #content-sacla h3 {
  border-left: 10px solid #f490c4;
  background: #F4D4FF none repeat scroll 0 0;
  height: 60px;
}


/* TOPページの画像領域 */
.sacla-img {
  position :relative;
}

.logo-area-sacla {
  position: absolute;
  top: 5px;
  left: 10px;
  width: 50%
}

.text-box{
     float: left;
     width: 180px;
     margin: 0px 10px 10px 0px;
}

/* 紹介のリンクが置いてある領域 */
.button-area-sacla {
  position: absolute;
  padding-left: 10px;
  bottom: 0px;
}

.page-link-sacla {
    background-color: #f52f95;
    background-image: linear-gradient(to bottom, #f52f95, #f490c4);
    border-radius: 3px;
    color: white;
    display: block;
    line-height: 2.5em;
    text-align: center;
    font-size: 16px;
    box-shadow:3px 3px rgba(0,0,0,0.2);
    transition: all 0.1s ease-in-out;
}
.page-link-sacla:hover {
    box-shadow:5px 5px rgba(0,0,0,0.6);
    filter: alpha(opacity=80);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=80)";  /* ie 8 */
    -moz-opacity:0.8;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.8;              /* Safari 1.x */
    opacity:0.8;
    zoom:1;
}


/* メリット部分のレイアウト */
.one-third.merit-article-sacla {
  margin-right: 2% ;
  margin-bottom: 10px;
}

/* 機能紹介での文書ブロックのレイアウト*/
.one-half.function-article-sacla {
  margin-right: 2% ;
  margin-bottom: 10px;
}
.one-third.function-article-sacla ,
.three-fifth.function-article-sacla {
  margin-right: 2% ;
  margin-bottom: 10px;
}


.function-article-sacla  img
,.div-introduction-article-sacla img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.function-article-sacla  img:hover
,.div-introduction-article-sacla img:hover {
  opacity: .5;
}


/* トータルパッケージ部分の機能ごとの紹介の六角形のレイアウト */
div.hexagon {
  position:absolute; 
}

div.twitter_line {
  position:absolute;
}

div.image {
  position:absolute;
}

div.square {
  position:absolute;
}

div.cloud {
  position:absolute;
}

div.box {
  position:absolute;
}

div.line {
  position:absolute;
}

/* サクラのページのフッター */
#footer-sacla {
  margin-top: 20px;
  width: 100%;
  min-height: 50px;
  background: #F4D4FF ;
  text-align: center;
}
#footer-sacla span {
  padding-top: 40px;
  vertical-align: middle;
  color: black;
}

/* 画面サイズが最大の場合 */
@media screen and (min-width: 1040px) {

  /* トータルパッケージのレイアウト */
  
  .sacla-packge-system {
  position:relative;
  height: 510px;
  }
  .sacla img {
  max-width: 780px;
  height:auto;
  }
  
  div.package-square1-sacla{
    position: relative;
    left: 45px; 
    top: 186px;
    color:DarkBlue;
  }
  div.package-square2-sacla{
    position: relative;
    left:248px; 
    top: 186px;
    color:DarkBlue;
  }
  div.package-square3-sacla{
    position: relative;
    left:370px; 
    top: 186px;
    color:DarkBlue;
  }
  div.package-square4-sacla{
    position: relative;
    left:505px; 
    top: 186px;
    color:DarkBlue;
  }
  div.package-square5-sacla{
    position: relative;
    left:598px; 
    top: 185px;
  }
  div.package-square6-sacla{
    position: relative;
    left:662px; 
    top: 180px;
  }
  div.package-square7-sacla{
    position: relative;
    left: 180px; 
    top: 323px;
  }
  
  
  div.package-screen-sacla{
  position: relative;
  left:479px;
  top: 30px;
  color: Black;
  }
  div.package-app-sacla{
  position: relative;
  left:402px;
  top: 35px;
  color: Black;
  }
  
  
  div.package-cloud-sacla{
    position: relative;
    left: 335px; 
    top: -55px;
  }
  div.package-box1-sacla{
    position: relative;
    left: 45px; 
    top: -93px;
  }
  div.package-box2-sacla{
    position: relative;
    left:130px; 
    top: -92px;
  }
  div.package-box3-sacla{
    position: relative;
    left:221px; 
    top: -91px;
  }
  div.package-box4-sacla{
    position: relative;
    left:338px; 
    top: -91px;
  }
  div.package-box5-sacla{
    position: relative;
    left:444px; 
    top: -92px;
  }
  div.package-box6-sacla{
    position: relative;
    left:520px; 
    top: -92px;
  }
  div.package-box7-sacla{
    position: relative;
    left:595px; 
    top: -92px;
  }
  
  .div-square1-header-sacla{
    width:170px;
    text-align:center;
  }
  .div-square2-header-sacla{
    width:90px;
    text-align:center;
  }
  .div-square3-header-sacla{
    width:105px;
    text-align:center;
  }
  .div-square4-header-sacla{
    width:75px;
    text-align:center;
  }
  .div-square5-header-sacla{
    width:50px;
    text-align:center;
  }
  .div-square6-header-sacla{
    width:45px;
    text-align:center;
  }
  .div-square7-header-sacla{
    width:450px;
    text-align:center;
  }
  
  .div-screen-header-sacla{
  width: 200px;
  text-align: center;
  }
  .div-app-header-sacla{
  width: 50px;
  text-align: center;
  }
  
  .div-cloud-header-sacla{
    width:120px;
    text-align:center;
  }
  .div-box-header-sacla{
    width:130px;
    text-align:center;
  }
  
  .square li {
    line-height: 1.1em;
    font-size: 11px;
  }
  .square h4 {
    font-size:22px;
    height:23px;
    color:white;
  }
  .div-square6-header-sacla h4 {
    font-size:22px;
    color:white;
  }
  
  .div-screen-header-sacla h4{
  font-size:13px;
  color:Black;
  }
  .div-app-header-sacla h4{
  font-size:13px;
  color:Black;
  }
  
  .div-cloud-header-sacla h4 {
    font-size:25px;
    color:Fuchsia;
  }
  .div-box-header-sacla h4 {
    font-size:12px;
  }
   
  .square {
    left:0px;
    top: 0px;
  }
  
  .screen1 {
    left:-289px;
    top: 0px;
  }
  .screen2 {
    left:0px;
    top: 0px;
  }
  .screen3 {
    left:105px;
    top: 0px;
  }
  .screen4 {
    left:0px;
    top: 0px;
  }

}

/* 画面サイズ中(トータルパッケージ用) */
  @media screen and (max-width: 1039px) and (min-width: 910px) {
  
  .sacla-packge-system {
  position:relative;
  height: 450px;
  }
  
  .sacla img {
  max-width: 680px;
  height:auto;
  }
  
  div.package-square1-sacla{
    position: relative;
    left: 40px; 
    top: 162px;
    color:DarkBlue;
  }
  div.package-square2-sacla{
    position: relative;
    left:215px; 
    top: 162px;
    color:DarkBlue;
  }
  div.package-square3-sacla{
    position: relative;
    left:321px; 
    top: 163px;
    color:DarkBlue;
  }
  div.package-square4-sacla{
    position: relative;
    left:440px; 
    top: 162px;
    color:DarkBlue;
  }
  div.package-square5-sacla{
    position: relative;
    left:518px; 
    top: 162px;
  }
  div.package-square6-sacla{
    position: relative;
    left:575px; 
    top: 160px;
  }
  div.package-square7-sacla{
    position: relative;
    left: 100px; 
    top: 283px;
  }
  
  
  div.package-screen-sacla{
  position: relative;
  left:405px;
  top: 30px;
  color: Black;
  }
  div.package-app-sacla{
  position: relative;
  left:353px;
  top: 32px;
  color: Black;
  }
  
  
  div.package-cloud-sacla{
    position: relative;
    left: 294px; 
    top: -50px;
  }
  div.package-box1-sacla{
    position: relative;
    left: 31px; 
    top: -82px;
  }
  div.package-box2-sacla{
    position: relative;
    left:105px; 
    top: -82px;
  }
  div.package-box3-sacla{
    position: relative;
    left:185px; 
    top: -81px;
  }
  div.package-box4-sacla{
    position: relative;
    left:288px; 
    top: -81px;
  }
  div.package-box5-sacla{
    position: relative;
    left:381px; 
    top: -82px;
  }
  div.package-box6-sacla{
    position: relative;
    left:446px; 
    top: -81px;
  }
  div.package-box7-sacla{
    position: relative;
    left:512px; 
    top: -81px;
  }
  
  .div-square1-header-sacla{
    width:150px;
    text-align:center;
  }
  .div-square2-header-sacla{
    width:80px;
    text-align:center;
  }
  .div-square3-header-sacla{
    width:100px;
    text-align:center;
  }
  .div-square4-header-sacla{
    width:65px;
    text-align:center;
  }
  .div-square5-header-sacla{
    width:50px;
    text-align:center;
  }
  .div-square6-header-sacla{
    width:45px;
    text-align:center;
  }
  .div-square7-header-sacla{
    width:450px;
    text-align:center;
  }
  
  .div-screen-header-sacla{
  width: 200px;
  text-align: center;
  }
  .div-app-header-sacla{
  width: 40px;
  text-align: center;
  }
  
  .div-cloud-header-sacla{
    width:120px;
    text-align:center;
  }
  .div-box-header-sacla{
    width:130px;
    text-align:center;
  }
  
  .square li {
    line-height: 1.1em;
    font-size: 10px;
  }
  .square h4 {
    font-size:16px;
    height:18px;
    color:white;
  }
  .div-square6-header-sacla h4 {
    font-size:17px;
    color:white;
  }
  
  .div-screen-header-sacla h4{
  font-size:11px;
  color:Black;
  }
  .div-app-header-sacla h4{
  font-size:11px;
  color:Black;
  }
  
  .div-cloud-header-sacla h4 {
    font-size:23px;
    color:Fuchsia;
  }
  .div-box-header-sacla h4 {
    font-size:11px;
  }
   
  .square {
    left:0px;
    top: 0px;
  }
  
  .screen1 {
    left:-250px;
    top: 0px;
  }
  .screen2 {
    left:0px;
    top: 0px;
  }
  .screen3 {
    left:90px;
    top: 0px;
  }
  .screen4 {
    left:0px;
    top: 0px;
  }
}

/* 画面サイズ小(トータルパッケージ用) */
@media screen and (max-width: 909px) and (min-width: 780px) {
  
  .sacla-packge-system {
  position:relative;
  height: 380px;
  }
  
  .sacla img {
  max-width: 580px;
  height:auto;
  }
  
  div.package-square1-sacla{
    position: relative;
    left:32px; 
    top:138px;
    color:DarkBlue;
  }
  div.package-square2-sacla{
    position: relative;
    left:183px; 
    top: 138px;
    color:DarkBlue;
  }
  div.package-square3-sacla{
    position: relative;
    left:274px; 
    top: 138px;
    color:DarkBlue;
  }
  div.package-square4-sacla{
    position: relative;
    left:376px; 
    top: 138px;
    color:DarkBlue;
  }
  div.package-square5-sacla{
    position: relative;
    left:439px; 
    top: 139px;
  }
  div.package-square6-sacla{
    position: relative;
    left:495px; 
    top: 137px;
  }
  div.package-square7-sacla{
    position: relative;
    left: 50px; 
    top: 242px;
  }
  
  div.package-screen-sacla{
  position: relative;
  left:341px;
  top: 23px;
  color: Black;
  }
  div.package-app-sacla{
  position: relative;
  left:302px;
  top: 27px;
  color: Black;
  }
  
  div.package-cloud-sacla{
    position: relative;
    left:235px; 
    top: -40px;
  }
  div.package-box1-sacla{
    position: relative;
    left: 23px; 
    top: -69px;
  }
  div.package-box2-sacla{
    position: relative;
    left: 86px; 
    top: -69px;
  }
  div.package-box3-sacla{
    position: relative;
    left:154px; 
    top: -69px;
  }
  div.package-box4-sacla{
    position: relative;
    left:240px; 
    top: -69px;
  }
  div.package-box5-sacla{
    position: relative;
    left:321px; 
    top: -69px;
  }
  div.package-box6-sacla{
    position: relative;
    left:376px; 
    top: -69px;
  }
  div.package-box7-sacla{
    position: relative;
    left:433px; 
    top: -69px;
  }
  
  .div-square1-header-sacla{
    width:130px;
    text-align:center;
  }
  .div-square2-header-sacla{
    width:70px;
    text-align:center;
  }
  .div-square3-header-sacla{
    width:85px;
    text-align:center;
  }
  .div-square4-header-sacla{
    width:55px;
    text-align:center;
  }
  .div-square5-header-sacla{
    width:50px;
    text-align:center;
  }
  .div-square6-header-sacla{
    width:30px;
    text-align:center;
  }
  .div-square7-header-sacla{
    width:450px;
    text-align:center;
  }
  
  .div-screen-header-sacla{
  width: 200px;
  text-align: center;
  }
  .div-app-header-sacla{
  width: 35px;
  text-align: center;
  }
  
  .div-cloud-header-sacla{
    width:120px;
    text-align:center;
  }
  .div-box-header-sacla{
    width:130px;
    text-align:center;
  }
  
  .square li {
    line-height: 1.1em;
    margin-bottom: -2px;
    font-size: 10px;
    -webkit-transform: scale(0.8);
    -webkit-transform-origin:0 0;
  }
  
  .square h4 {
    font-size:14px;
    height:14px;
    color:white;
  }
  .div-square6-header-sacla h4 {
    font-size:14px;
    color:white;
  }
  
  .div-screen-header-sacla h4{
  font-size:10px;
  -webkit-transform: scale(0.9);
  -webkit-transform-origin:0 0;
  color:Black;
  }
  .div-app-header-sacla h4{
  font-size:10px;
  -webkit-transform: scale(0.9);
  -webkit-transform-origin:0 0;
  color:Black;
  }
  
  .div-cloud-header-sacla h4 {
    font-size:16px;
    color:Fuchsia;
  }
  .div-box-header-sacla h4 {
    font-size:10px;
    -webkit-transform: scale(0.9);
    -webkit-transform-origin:0 0;
  }
  
  .square {
    left:0px;
    top: 0px;
  }
  
  .screen1 {
    left:-213px;
    top: 0px;
  }
  .screen2 {
    left:0px;
    top: 0px;
  }
  .screen3 {
    left:78px;
    top: 0px;
  }
  .screen4 {
    left:0px;
    top: 0px;
  }
}

/* 画面サイズ小(トータルパッケージ用) */
@media screen and (max-width: 779px) and (min-width: 500px) {
  
  .sacla-packge-system {
  position:relative;
  height: 315px;
  }
  
  .sacla img {
  max-width: 480px;
  height:auto;
  }
  
  div.package-square1-sacla{
    position: relative;
    left:27px; 
    top:116px;
    color:DarkBlue;
  }
  div.package-square2-sacla{
    position: relative;
    left:152px; 
    top: 117px;
    color:DarkBlue;
  }
  div.package-square3-sacla{
    position: relative;
    left:226px; 
    top: 117px;
    color:DarkBlue;
  }
  div.package-square4-sacla{
    position: relative;
    left:311px; 
    top: 117px;
    color:DarkBlue;
  }
  div.package-square5-sacla{
    position: relative;
    left:359px; 
    top: 117px;
  }
  div.package-square6-sacla{
    position: relative;
    left:409px; 
    top: 115px;
  }
  div.package-square7-sacla{
    position: relative;
    left: 10px; 
    top: 199px;
  }
  
  div.package-screen-sacla{
  position: relative;
  left:276px;
  top: 20px;
  color: Black;
  }
  div.package-app-sacla{
  position: relative;
  left:249px;
  top: 22px;
  color: Black;
  }
  
  div.package-cloud-sacla{
    position: relative;
    left:190px; 
    top: -33px;
  }
  div.package-box1-sacla{
    position: relative;
    left: 15px; 
    top: -57px;
  }
  div.package-box2-sacla{
    position: relative;
    left: 68px; 
    top: -57px;
  }
  div.package-box3-sacla{
    position: relative;
    left:125px; 
    top: -57px;
  }
  div.package-box4-sacla{
    position: relative;
    left:197px; 
    top: -57px;
  }
  div.package-box5-sacla{
    position: relative;
    left:262px; 
    top: -57px;
  }
  div.package-box6-sacla{
    position: relative;
    left:308px; 
    top: -57px;
  }
  div.package-box7-sacla{
    position: relative;
    left:355px; 
    top: -57px;
  }
  
  .div-square1-header-sacla{
    width:105px;
    text-align:center;
  }
  .div-square2-header-sacla{
    width:55px;
    text-align:center;
  }
  .div-square3-header-sacla{
    width:70px;
    text-align:center;
  }
  .div-square4-header-sacla{
    width:45px;
    text-align:center;
  }
  .div-square5-header-sacla{
    width:50px;
    text-align:center;
  }
  .div-square6-header-sacla{
    width:25px;
    text-align:center;
  }
  .div-square7-header-sacla{
    width:450px;
    text-align:center;
  }
  
  .div-screen-header-sacla{
  width: 200px;
  text-align: center;
  }
  .div-app-header-sacla{
  width: 35px;
  text-align: center;
  }
  
  .div-cloud-header-sacla{
    width:120px;
    text-align:center;
  }
  .div-box-header-sacla{
    width:130px;
    text-align:center;
  }
  
  .square li {
    line-height: 1.1em;
    margin-bottom: -3px;
    font-size: 10px;
    -webkit-transform: scale(0.7);
    -webkit-transform-origin:0 0;
  }
  
  .square h4 {
    font-size:12px;
    height:8px;
    color:white;
  }
  .div-square6-header-sacla h4 {
    font-size:10px;
    color:white;
  }
  
  .div-screen-header-sacla h4{
  font-size:10px;
  -webkit-transform: scale(0.8);
  -webkit-transform-origin:0 0;
  color:Black;
  }
  .div-app-header-sacla h4{
  font-size:10px;
  -webkit-transform: scale(0.8);
  -webkit-transform-origin:0 0;
  color:Black;
  }
  
  .div-cloud-header-sacla h4 {
    font-size:14px;
    color:Fuchsia;
  }
  .div-box-header-sacla h4 {
    font-size:10px;
    -webkit-transform: scale(0.8);
    -webkit-transform-origin:0 0;
  }
  
  .square {
    left:0px;
    top: 0px;
  }
  
  .screen1 {
    left:-175px;
    top: 0px;
  }
  .screen2 {
    left:0px;
    top: 0px;
  }
  .screen3 {
    left:65px;
    top: 0px;
  }
  .screen4 {
    left:0px;
    top: 0px;
  }
}

/* 画面サイズ極小(トータルパッケージ用) ※360pxをベースに作成 */
@media screen and (max-width: 499px) {
  
  .sacla-packge-system {
  position:relative;
  height: 215px;
  }
  
  .sacla img {
  max-width: 330px;
  height:auto;
  }
  
  div.package-square1-sacla{
    position: relative;
    left:20px; 
    top: 78px;
    color:DarkBlue;
  }
  div.package-square2-sacla{
    position: relative;
    left:105px; 
    top: 78px;
    color:DarkBlue;
  }
  div.package-square3-sacla{
    position: relative;
    left:157px; 
    top: 78px;
    color:DarkBlue;
  }
  div.package-square4-sacla{
    position: relative;
    left:215px; 
    top: 78px;
    color:DarkBlue;
  }
  div.package-square5-sacla{
    position: relative;
    left:239px; 
    top: 79px;
  }
  div.package-square6-sacla{
    position: relative;
    left:277px; 
    top: 76px;
  }
  div.package-square7-sacla{
    position: relative;
    left: -50px; 
    top: 136px;
  }
  
  div.package-screen-sacla{
  position: relative;
  left:195px;
  top: 15px;
  color: Black;
  }
  div.package-app-sacla{
  position: relative;
  left:172px;
  top: 16px;
  color: Black;
  }
  
  div.package-cloud-sacla{
    position: relative;
    left:111px; 
    top: -26px;
  }
  div.package-box1-sacla{
    position: relative;
    left: 14px; 
    top: -40px;
  }
  div.package-box2-sacla{
    position: relative;
    left: 50px; 
    top: -40px;
  }
  div.package-box3-sacla{
    position: relative;
    left: 88px; 
    top: -40px;
  }
  div.package-box4-sacla{
    position: relative;
    left:138px; 
    top: -40px;
  }
  div.package-box5-sacla{
    position: relative;
    left:183px; 
    top: -40px;
  }
  div.package-box6-sacla{
    position: relative;
    left:216px; 
    top: -40px;
  }
  div.package-box7-sacla{
    position: relative;
    left:247px; 
    top: -40px;
  }
  
  .div-square1-header-sacla{
    width:70px;
    text-align:center;
  }
  .div-square2-header-sacla{
    width:35px;
    text-align:center;
  }
  .div-square3-header-sacla{
    width:45px;
    text-align:center;
  }
  .div-square4-header-sacla{
    width:30px;
    text-align:center;
  }
  .div-square5-header-sacla{
    width:50px;
    text-align:center;
  }
  .div-square6-header-sacla{
    width:25px;
    text-align:center;
  }
  .div-square7-header-sacla{
    width:450px;
    text-align:center;
  }
  
  .div-screen-header-sacla{
  width: 200px;
  text-align: center;
  }
  .div-app-header-sacla{
  width: 35px;
  text-align: center;
  }
  
  .div-cloud-header-sacla{
    width:120px;
    text-align:center;
  }
  .div-box-header-sacla{
    width:130px;
    text-align:center;
  }
  
  .square li {
    line-height: 1.1em;
    margin-bottom: -6px;
    font-size: 10px;
    -webkit-transform: scale(0.4);
    -webkit-transform-origin:0 0;
  }
  
  .square h4 {
    font-size:10px;
    height:5px;
    color:white;
  }
  .div-square6-header-sacla h4 {
    font-size:10px;
    color:white;
  }
  
  .div-screen-header-sacla h4{
  font-size:10px;
  -webkit-transform: scale(0.5);
  -webkit-transform-origin:0 0;
  color:Black;
  }
  .div-app-header-sacla h4{
  font-size:10px;
  -webkit-transform: scale(0.5);
  -webkit-transform-origin:0 0;
  color:Black;
  }
  
  .div-cloud-header-sacla h4 {
    font-size:11px;
    color:Fuchsia;
  }
  .div-box-header-sacla h4 {
    font-size:10px;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin:0 0;
  }
  
  .square {
    left:0px;
    top: 0px;
  }
  
  .screen1 {
    left:-121px;
    top: 0px;
  }
  .screen2 {
    left:0px;
    top: 0px;
  }
  .screen3 {
    left:45px;
    top: 0px;
  }
  .screen4 {
    left:0px;
    top: 0px;
  }
}


/* 画面サイズ大 */
@media screen and (min-width: 769px) {
  
  /* TOP画面の問題部分*/
  .problem-sacla {
    min-height: 230px;
  }

  /* TOP画面のアプローチ部分 */
  .approach-sacla {
    min-height: 650px;
  }

  /* 特徴の部分のレイアウト */
  .div-feature-communication-sacla 
  , .div-feature-bi-sacla
  , .div-feature-eventpad-sacla {
    min-height: 500px;
  }

  .feature-communication-sacla img,
  .feature-platform-sacla img {
    max-width: 200px;
    height: auto;
  }
  .feature-bi-sacla img {
    max-width: 450px;
    height: auto;
  }
  .featuer-eventpad-sacla img {
    max-width: 500px;
    height: auto;
  }

  /* 機能紹介部分のレイアウト */
  div.material-request-sacla
  ,div.function-communication-sacla
 {
    min-height: 500px;
  }
  div.advertising-media-sacla
  ,div.high-school-sacla 
  ,div.div-introduction-article-sacla{
    min-height: 350px;
  }
  div.target-management-sacla
  ,div.analysis-collection-sacla  {
    min-height: 400px;
  }
  
  div.div-merit-article-sacla  {
    min-height: 450px;
  }

  div.div-package-relation-sacla {
    min-height: 200px;
  }

  /* よくある質問のレイアウト */
  .one-third.faq-article-sacla {
    margin-right: 2% ;
    margin-bottom: 10px;
  }

  .faq-article-sacla p.row-height-3 {
    height: 180px;
  }

  .faq-article-sacla p.row-height-2 {
    height: 120px;
  }

  .faq-article-sacla p.row-height-1 {
    height: 60px;
  }

}

/* 画面サイズ中 */
@media screen and (max-width: 768px) and (min-width: 640px) {

  /* TOP画面の問題部分*/
  .problem-sacla {
    min-height: 230px;
  }

  /* TOP画面のアプローチ部分 */
  .approach-sacla {
    min-height: 650px;
  }

  /* 特徴の部分のレイアウト */
  .div-feature-communication-sacla
  , .div-feature-eventpad-sacla {
    min-height: 400px;
  }
  .div-feature-platform-sacla {
    min-height: 300px;
  }

  .div-feature-bi-sacla {
    min-height: 600px;
  }

  .feature-communication-sacla img,
  .feature-platform-sacla img{
    max-width: 150px;
    height: auto;
  }
  .feature-bi-sacla img {
    max-width: 300px;
    height: auto;
  }
  .featuer-eventpad-sacla img {
    max-width: 400px;
    height: auto;
  }

  /* 機能紹介部分のレイアウト */
  div.material-request-sacla 
  ,div.function-communication-sacla 
  {
    min-height: 500px;
  }
  div.advertising-media-sacla
  ,div.high-school-sacla 
  ,div.div-introduction-article-sacla {
    min-height: 350px;
  }
  div.target-management-sacla
  ,div.analysis-collection-sacla {
    min-height: 400px;
  }
  
  div.div-merit-article-sacla  {
    min-height: 450px;
  }
  div.div-package-relation-sacla {
    min-height: 200px;
  }


  /* よくある質問のレイアウト */
  .one-third.faq-article-sacla {
    margin-right: 2% ;
    margin-bottom: 10px;
  }

  .faq-article-sacla p.row-height-3 {
    height: 180px;
  }

  .faq-article-sacla p.row-height-2 {
    height: 120px;
  }

  .faq-article-sacla p.row-height-1 {
    height: 60px;
  }
}


/* 画面サイズ小 */
@media screen and (max-width: 640px) and (min-width: 430px) {

  /* TOP画面の問題部分*/
  .problem-sacla {
    min-height: 300px;
  }

  /* TOP画面のアプローチ部分 */
  .approach-sacla {
    min-height: 1050px;
  }


  /* 特徴部分のレイアウト */
  .div-feature-communication-sacla ,
  .div-feature-platform-sacla{
    min-height: 300px;
    width:100%;
  }
  .div-feature-bi-sacla {
    min-height: 500px;
    width:100%;
  }
  .div-feature-eventpad-sacla {
    min-height: 400px;  
    width:100%;
  }

  /* 特徴部分の上下のレイアウトを変更する。 */
  .div-feature-communication-sacla,
  .div-feature-bi-sacla,
  .div-feature-eventpad-sacla,
  .div-feature-platform-sacla{
    position: relative;
  }
  .div-feature-communication-sacla .one-third,
  .div-feature-bi-sacla .one-third,
  .div-feature-eventpad-sacla .one-third
  .div-feature-platform-sacla .one-third{
    width: 100%;
    position: absolute;
    top: 0px;
  }
  .div-feature-communication-sacla .three-fifth,
  .div-feature-bi-sacla .three-fifth,
  .div-feature-eventpad-sacla .three-fifth,
  .div-feature-platform-sacla .three-fifth{
    width: 100%;
    position: absolute;
    bottom: 0px;
  }

  /* 特徴の部分の画像レイアウト */
  .feature-communication-sacla img,
  .feature-platform-sacla img{
    max-width: 150px;
    height: auto;
  }
  .feature-bi-sacla img {
    max-width: 400px;
    height: auto;
  }
  .featuer-eventpad-sacla img {
    max-width: 300px;
    height: auto;
  }

  /* 機能紹介部分のレイアウト */
  div.material-request-sacla
  ,div.advertising-media-sacla 
  ,div.high-school-sacla
  ,div.target-management-sacla
  ,div.analysis-collection-sacla 
  ,div.function-communication-sacla {
    position: relative;
  }
  div.material-request-sacla .one-third
  ,div.advertising-media-sacla .one-third
  ,div.high-school-sacla .one-third
  ,div.target-management-sacla .one-third
  ,div.analysis-collection-sacla .one-third
  ,div.function-communication-sacla .one-third{
    position: absolute;
    top: 0px;
  }
  div.material-request-sacla .three-fifth
  ,div.advertising-media-sacla .three-fifth
  ,div.high-school-sacla .three-fifth
  ,div.target-management-sacla .three-fifth
  ,div.analysis-collection-sacla .three-fifth 
  ,div.function-communication-sacla .three-fifth {
    position: absolute;
    bottom: 0px;
  }

  div.material-request-sacla
  ,div.analysis-collection-sacla 
  ,div.function-communication-sacla
  ,div.div-merit-article-sacla
  ,div.advertising-media-sacla 
  ,div.high-school-sacla  
  ,div.target-management-sacla 
  ,div.div-introduction-article-sacla {
    min-height: 600px;
  }
  

  div.div-package-relation-sacla {
    min-height: 150px;
  }

  /* トータルパッケージ部分のレイアウト */
  div.div-package-sacla {
    margin-top:40px;
  }

  /* 導入事例部分のレイアウト */
  div.div-introduction-article-sacla {
    min-height:200px;
  }


  /* よくある質問のレイアウト */
  .one-third.faq-article-sacla {
    margin-right: 2% ;
    margin-bottom: 10px;
  }

  p.faq-support-time-sacla 
  p.faq-support-time-sacla {
    height: 150px;
  }

  p.faq-storage-time-sacla
  ,p.faq-update-year-sacla
  ,p.faq-customize-sacla
  ,p.faq-move-data-sacla
  ,p.faq-mobile-site-sacla
  {
    height: 50px;
  }

}

/* 画面サイズ極小（スマホ） */
@media screen and (max-width: 430px) {

  /* TOP画面の問題部分*/
  .problem-sacla {
    min-height: 300px;
  }

  /* TOP画面のアプローチ部分 */
  .approach-sacla {
    min-height: 1050px;
  }


  /* 特徴部分のレイアウト */
  .div-feature-communication-sacla ,
  .div-feature-platform-sacla{
    min-height: 400px;
    width:100%;
  }
  .div-feature-bi-sacla {
    min-height: 500px;
    width:100%;
  }
  .div-feature-eventpad-sacla {
    min-height: 450px;  
    width:100%;
  }

  /* 特徴部分の上下のレイアウトを変更する。 */
  .div-feature-communication-sacla,
  .div-feature-bi-sacla,
  .div-feature-eventpad-sacla,
  .div-feature-platform-sacla{
    position: relative;
  }
  .div-feature-communication-sacla .one-third,
  .div-feature-bi-sacla .one-third,
  .div-feature-eventpad-sacla .one-third
  .div-feature-platform-sacla .one-third{
    width: 100%;
    position: absolute;
    top: 0px;
  }
  .div-feature-communication-sacla .three-fifth,
  .div-feature-bi-sacla .three-fifth,
  .div-feature-eventpad-sacla .three-fifth,
  .div-feature-platform-sacla .three-fifth{
    width: 100%;
    position: absolute;
    bottom: 0px;
  }

  /* 特徴の部分の画像レイアウト */
  .feature-communication-sacla img,
  .feature-platform-sacla img{
    max-width: 100px;
    height: auto;
  }
  .feature-bi-sacla img {
    max-width: 300px;
    height: auto;
  }
  .featuer-eventpad-sacla img {
    max-width: 300px;
    height: auto;
  }

  /* 機能紹介部分のレイアウト */

  div.div-function-sacla {
    margin-top:50px;
  }

  div.material-request-sacla
  ,div.advertising-media-sacla 
  ,div.high-school-sacla
  ,div.target-management-sacla
  ,div.analysis-collection-sacla 
  ,div.function-communication-sacla {
    position: relative;
  }
  div.material-request-sacla .one-third
  ,div.advertising-media-sacla .one-third
  ,div.high-school-sacla .one-third
  ,div.target-management-sacla .one-third
  ,div.analysis-collection-sacla .one-third
  ,div.function-communication-sacla .one-third{
    position: absolute;
    top: 0px;
  }
  div.material-request-sacla .three-fifth
  ,div.advertising-media-sacla .three-fifth
  ,div.high-school-sacla .three-fifth
  ,div.target-management-sacla .three-fifth
  ,div.analysis-collection-sacla .three-fifth 
  ,div.function-communication-sacla .three-fifth {
    position: absolute;
    bottom: 0px;
  }

  div.material-request-sacla
  ,div.analysis-collection-sacla 
  ,div.function-communication-sacla
  ,div.div-merit-article-sacla
  ,div.advertising-media-sacla 
  ,div.high-school-sacla  
  ,div.target-management-sacla 
  ,div.div-introduction-article-sacla {
    min-height: 450px;
  }
  

  div.div-package-relation-sacla {
    min-height: 150px;
  }

  /* トータルパッケージ部分のレイアウト */
  div.div-package-sacla {
    margin-top:40px;
  }


  div.package-article-sacla{
    position: relative;
    left: 35px; 
    top: -150px;
    color:white;
    
  }
  div.package-article-sacla li {
    line-height: 1.5em;
    text-shadow: 2px 2px 1px #888888;
    font-size: 11px;
  }
 .div-article-header-sacla {
    width:120px;
    text-align:center;
  }
  .div-article-header-sacla h4 {
    font-size:12px;
    color:white;
    text-shadow: 2px 2px 1px #888888;
  }

  .hexagon img {
    max-width: 190px;
    height: auto;
  }
  .hexagon1 { 
    left:0px; 
    top: 0px;
  }
  .hexagon2 { 
    left:145px; 
    top: 85px;
  }
  .hexagon3 { 
    left:0px; 
    top: 170px;
  }
  .hexagon4 { 
    left:145px; 
    top: 255px;
  }
  .hexagon5 { 
    left:0px; 
    top: 340px;
  }
  .hexagon6 { 
    left:145px; 
    top: 425px;
  }



  /* 導入事例部分のレイアウト */
  div.div-introduction-article-sacla {
    min-height:200px;
  }


  /* よくある質問のレイアウト */
  .one-third.faq-article-sacla {
    margin-right: 2% ;
    margin-bottom: 10px;
  }

  p.faq-support-time-sacla 
  p.faq-support-time-sacla {
    height: 150px;
  }

  p.faq-storage-time-sacla
  ,p.faq-update-year-sacla
  ,p.faq-customize-sacla
  ,p.faq-move-data-sacla
  ,p.faq-mobile-site-sacla
  {
    height: 50px;
  }

  /* 問い合わせ部分 */
  div.div-inquire-sacla {
    margin-top:50px;
  }
}



.campaign-sacla-login #wp-submit {
  background-color: #ff99cc;
  border-radius: 10px;        /* CSS3草案 */  
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 10px;   /* Firefox用 */ 
  box-shadow:3px 3px rgba(0,0,0,0.2); 
  margin-right:auto;
  margin-left:auto;
  color:white;
  transition: 0.3s ;
  cursor:pointer;
}

.campaign-sacla-login #wp-submit:hover {
  opacity: 0.8;
  background-color: #333333;
}

/* サクラキャンペーン用のCSS */

/* スマホ画面 */
@media screen and (max-width: 640px) {
  .campaign-info-sacla {
    background-image: url("https://www.jss-net.com/wp-content/uploads/sakura-bg.png");
    margin-bottom: 50px;
    min-height:500px;
  }

  p.sacla-campaign-info1 {
    text-align:center;
    font-size:20px;
    line-height: 1em;
    margin-bottom: 0.5em;
    padding-top: 0.5em !important;
  }
  p.sacla-campaign-info2 {
    font-size:20px; 
    line-height:1em;
    margin-bottom: 0.5em;
  }

  p.sacla-campaign-info3 {
    font-size:30px;color:red;
    line-height:1em;
    margin-bottom: 0.5em;
  }

  p.sacla-campaign-info4 {
    font-size:15px;
  }
  div.campaign-sacla-login {
    width:300px;
    margin-top:20px;
    margin-right:auto;
    margin-left:auto;
  }
  .sacla-campaign-confirm-message {
    width:300px;
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
  }

}

/* PC画面 */
@media screen and (min-width: 641px) {
  .campaign-info-sacla {
    background-image: url("https://www.jss-net.com/wp-content/uploads/sakura-bg.png");
    margin-bottom: 50px;
    min-height:500px;
  }

  p.sacla-campaign-info1 {
    text-align:center;
    font-size:30px;
    line-height: 1em;
    margin-bottom: 0.5em;
    padding-top: 0.5em  !important;
  }
  p.sacla-campaign-info2 {
    font-size:30px; 
    line-height:1em;
    margin-bottom: 0.5em;
  }

  p.sacla-campaign-info3 {
    font-size:48px;color:red;
    line-height:1em;
    margin-bottom: 0.5em;
  }

  p.sacla-campaign-info4 {
    font-size:20px;
  }
  div.campaign-sacla-login {
    width:300px;
    margin-top:20px;
    margin-right:auto;
    margin-left:auto;
  }
  
  .sacla-campaign-confirm-message {
    width:500px;
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
  }

}

p.login-submit {
  text-align:center;
}

#login-password,
.login-password {
  height: 0;
}

.sacla-campaign-confirm-message p:before{
  content: "※";
}
.sacla-campaign-confirm-message p{
  font-size:12px;
}