@charset "UTF-8";

/* ---------------------------------

	SP

------------------------------------ */
@media screen and (max-width:768px) {
  #message #mv {
    background: url(../img/privacy/mv_bg01.png) center top no-repeat;
    background-size: auto 100%;
    color: #fff;
  }

  #message #mv .mv_in {
    position: relative;
    width: 100%;
    height: 46vw;
  }

  #message #mv .mv_in h1 {
    position: absolute;
    top: 12.2vw;
    left: 6vw;
    font-size: 7vw;
    letter-spacing: 0.02em;
  }

  #message #mv .mv_in h2 {
    position: absolute;
    width: 100%;
    font-size: 4.6vw;
    top: 34.2vw;
    letter-spacing: 0.02em;
    text-align: center;
  }

  #message #mv .mv_in h2 span {
    font-size: 3.4vw;
    font-weight: 400;
  }

  #message #ms {
    width: 76%;
    margin: 2.5em auto;
    font-size: 3.0vw;
    line-height: 1.6;
  }

  #message #ms p span.rinen {
    display: block;
    margin: 0 0 2.5em 0;
    font-size: 1.5em;
    line-height: 2.0;
    letter-spacing: 4px;
    font-weight: bold;
  }

  #message #ms p span.sign {
    display: block;
    text-align: right;
    margin-top: 2.5em;
  }

  #message #ms p span.sign img {
    display: block;
    margin: 8px 10px 0 auto;
    width: 180px;
  }
  
}

/* ---------------------------------

	PC 769～1280

------------------------------------ */
@media screen and (min-width:769px) and (max-width:1280px) {
  #message #mv {
    background: url(../img/privacy/mv_bg01.png) center top no-repeat;
    background-size: auto 100%;
    color: #fff;
  }

  #message #mv .mv_in {
    position: relative;
    width: 100%;
    height: 34vw;
  }

  #message #mv .mv_in h1 {
    position: absolute;
    top: 10vw;
    left: 12vw;
    font-size: 5.8vw;
    letter-spacing: 0.02em;
  }

  #message #mv .mv_in h2 {
    position: absolute;
    width: 100%;
    font-size: 3.7vw;
    top: 25.4vw;
    line-height: 0.8;
    letter-spacing: 0.02em;
    text-align: center;
  }

  #message #mv .mv_in h2 span {
    font-size: 2vw;
    font-weight: 400;
  }
  
  #message #ms{
    width: 600px;
    margin: 2.5em auto;
    font-size: 1.3vw;
    line-height: 1.5;
  }
  
  #message #ms p span.rinen{
    display: block;
    margin: 0 0 2em 0;
    font-size: 1.5em;
    line-height: 2.0;
    letter-spacing: 4px;
    font-weight: bold;
  }
  
  #message #ms p span.sign{
    display: block;
    text-align: right;
    margin-top: 2.5em;
  }
  
  #message #ms p span.sign img{
    display: block;
    margin: 8px 10px 0 auto;
    width: 180px;
  }
}

/* ---------------------------------

	PC 1281～

------------------------------------ */
@media screen and (min-width:1281px) {
  #message #mv {
    background: url(../img/privacy/mv_bg01.png) center top no-repeat, url(../img/overview/mv_bg02.png) center top no-repeat;
    background-size: auto 100%, 100% 100%;
    color: #fff;
  }

  #message #mv .mv_in {
    position: relative;
    width: 1280px;
    height: 440px;
    margin: 0 auto;
  }

  #message #mv .mv_in h1 {
    position: absolute;
    top: 135px;
    left: 164px;
    font-size: 74px;
    letter-spacing: 0.02em;
  }

  #message #mv .mv_in h2 {
    position: absolute;
    width: 1280px;
    font-size: 46px;
    top: 330px;
    line-height: 0.8;
    letter-spacing: 0.02em;
    text-align: center;
  }

  #message #mv .mv_in h2 span {
    font-size: 24px;
    font-weight: 400;
  }
  
  #message #ms{
    width: 1124px;
    margin: 2.5em auto;
    font-size: 1.3vw;
    line-height: 1.5;
  }
  
  #message #ms p span.rinen{
    display: block;
    margin: 0 0 2em 0;
    font-size: 1.5em;
    line-height: 2.0;
    letter-spacing: 4px;
    font-weight: bold;
  }
  
  #message #ms p span.sign{
    display: block;
    text-align: right;
    margin-top: 2.5em;
  }
  
  #message #ms p span.sign img{
    display: block;
    margin: 8px 10px 0 auto;
    width: 180px;
  }
}



/* フェードイン用のキーフレームを定義 */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 見出し */
.ttl {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    text-align: center; /* 見出しを中央揃えにする */
    position: relative; /* 擬似要素の位置調整のために設定 */
    border-bottom: 5px solid #ddd;
    padding: 30px 0;
}

/* 見出しの下線 */
.ttl:before {
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 20%;
    height: 5px;
    content: '';
    background: #27acd9;
}

/* 本文の基本スタイル */
.txt-box {
text-align: left;
    width: 75%;
    margin: 0 auto;
    margin-bottom: 20px;
    line-height: 30px;
    animation: fadeIn 2s ease-in-out; 
}




strong {
    color: #C00;
}


.txt-box ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 10px;
    text-align: left;
    animation: fadeIn 2s ease-in-out;
}

.txt-box ol {
    list-style-type: decimal;
    margin-left: 20px;
    margin-bottom: 10px;
    text-align: left;
    animation: fadeIn 2s ease-in-out; 
}

/* 注意事項 */
.note {
    background-color: #F5F5F5;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    animation: fadeIn 2s ease-in-out; 
}

/* 問い合わせ窓口 */
.contact {
    background-color: #EEE;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    animation: fadeIn 2s ease-in-out; 
}

.contact p {
    margin-bottom: 10px;
}

/* 改定日用 */
.additional-text {
    text-align: right;
    width: 75%;
    margin: 0 auto;
    line-height: 30px;
}

.security-text {
    text-align: left;
    width: 75%;
    margin: 0 auto;
    line-height: 30px;
}