@charset "UTF-8";

/* ----------------------------------
 * 1. 
 * ---------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  background-color: #ffffff; 
  overflow-x: hidden;
}

/* ----------------------------------
 * 2. 
 * ---------------------------------- */
.lp-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* 1〜5 */
.lp-part {
  width: 100%;
  line-height: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
}

.lp-part picture {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.lp-part img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  outline: none;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

/* ----------------------------------
 * 3. 
 * ---------------------------------- */
.lp-part-banner {
  width: 75%;
  margin: 0 auto;
}

.lp-banner-link {
  display: block;
  width: 100%;
  line-height: 0;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.lp-banner-link:hover {
  opacity: 0.9;
}

/* ----------------------------------
 * 4. 
 * ---------------------------------- */
.lp-sns-container {
  display: flex;
  flex-direction: column;    
  align-items: center;       
  width: 75%;                
  margin: 0 auto;
  padding: 20px 0 40px;
}

.sns-item {
  width: 100%;               
  margin-bottom: 12px;       
  text-decoration: none;
  line-height: 0;
  font-size: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.sns-item:last-child {
  margin-bottom: 0;          
}

.sns-item picture {
  display: block;
  width: 100%;
  line-height: 0;
}

.sns-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  outline: none;
  margin: 0 auto;
}

.sns-item:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* ----------------------------------
 * 5. 
 * ---------------------------------- */
@media (min-width: 768px) {
  .lp-sns-container {
    flex-direction: row;      
    justify-content: center;
    width: 50%;               
    padding: 32px 0 60px;
  }

  .sns-item {
    flex: 1;                  
    width: auto;
    margin-bottom: 0;         
    padding: 0 12px;          
  }
}