/*520px以下の記述。（モバイル）*/
html{
    font-family: "Noto Sans", "Noto Sans CJK JP", "NotoSansCJKjp-Re", sans-serif;
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fadeInUpTrigger{
	opacity: 0;
}

.lp01{
    background-image: url("link/back01.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 250px;
      /* 親要素をフレックスコンテナとする */
      display: flex;
      /* 交差軸方向の整列位置を中央に指定 */
      align-items: center;
      /* 主軸方向の整列位置を中央に指定 */
      justify-content: center;
}


.lp01 img{
    width: 50%;
}


.lp02{background-image: url("link/back02.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      /* 親要素をフレックスコンテナとする */
  display: flex;
  /* 交差軸方向の整列位置を中央に指定 */
  align-items: center;
  /* 主軸方向の整列位置を中央に指定 */
  justify-content: center;
}

.lp02 img{
    display: flex;
    margin: 25px auto;
    width: 70%;
}

.lp02_text{
    margin: 30px auto;
    color:white;
    text-align: justify;
    line-height: 1.5em;
    width:70%;
    font-size: 0.8em;
}

.lp03 {
	background:linear-gradient(90deg,#6F6A56 0%,#6F6A56 50%,#6B5C00 50%,#6B5C00 100%);
    padding: 30px;
}

.lp03 video{
    width: 90%;
    display: block;
    margin: 30px auto 0px;
}

.lp03 .flex-video{
    width: 90%;
    margin: auto;
}

.lp03 .video-size{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    margin: 50px auto 10px;
}
.video_title{
    width: 100%;
    display: block;
    margin: 10px auto 0px;
    text-align: right;
    color: white;
    font-size: 0.8em;
    font-weight: 100;
}

.lp03_title{
    margin-top: 50px;
    text-align: center;
    color: white;
    font-weight: 700;
    font-size: 2.5em;
}

.lp03_subtitle{
    text-align: center;
    color: white;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5em;
}

.font_check1{
    color: #53A984;
}

.font_check2{
    color: #C55536;
}

.font_check3{
    color: #5171B5;
}
.lp04{
    background-image: url(link/lp04_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.lp04 img{
    width: auto;
}

.lp04_text{
    display: flex;
    justify-content: center;
}

.lp04_text img{
    width: 80%;
}

.lp04_text h1{
    font-size: 0.9rem;
    text-align: justify;
    width: 80%;
    margin: 20px auto;
    line-height: 1.3em;
    font-weight: 900;
}

.lp04_text p{
    font-size: 0.7rem;
    text-align: justify;
    width: 80%;
    margin: 15px auto;
    line-height: 1.3em;
}

.lp04_left{
    width: 50%;
    text-align: center;

}

.lp04_right{
    width: 50%;
    text-align: center;
}

.lp05{
    background-color: black;
    padding-bottom: 2%;
}

.lp05 img{
    width:auto;
}

.lp05 p{
    text-align: center;
}

.lp05_text{
    margin: auto;
    color:white;
    width:80%;
}

.lp05_text h1{
    text-align: center;
    margin-top: 5%;
    margin-bottom: 60px;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.3em;
}

    
.lp05_text h2{
    text-align: left;
    margin-top: 5%;
    font-size: 1.5rem;
    font-weight: 700;
}

.lp05_text h3{
    text-align: left;
    margin-bottom: 20px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 2em;
}
    

.lp05_text p{
    text-align: justify;
    font-size: 0.8rem;
    line-height: 1.7em;
    padding: 8%;

}


    .lp05_text dl{
        margin-bottom: 30px;
    }
    
    .lp05_text dt{
        font-size: 1rem;
        font-weight: bold;
        margin:0px 0px 20px 0; 
        background: linear-gradient(transparent 90%, gold 60%);
    }
    
    .lp05_text dd{
        font-size: 0.8em;
        margin:0px 0px 50px 20px;
        text-align: justify;
        line-height: 1.3em;
    }
    
.lp05_text ul {
    list-style-type: disc;
    position: relative;
    border-radius: 5px;
    padding: 3rem 3rem 1rem;
    background: #FFF;
}

.lp05_text ul::before {
    position: absolute;
    top: 0.8rem;
    font-weight: bold;
    font-size: 15px;
    color: #000;
    content: attr(data-title);
}

.lp05_text ul li {
    font-size: 15px;
    color: #000;
    line-height: 1.5;
}

.lp05 .contact{
    background-color: white;
    width: 60%;
    margin: 30px auto;
    padding: 3%;
}

.lp05 .contact p{
   text-align: center;
}

.lp05 .contact_wrapper{
    display:flex;
    justify-content: center;
    margin: 20px 0 0 0;
}

.lp05 .contact_tel{
    width: 50%;
    border-right: 1px solid;
}

.lp05 .contact_mail{
    width: 50%;
}

.lp05_gold{
    color: gold;
}

.lp05 .wing{
    width: 60%;
    margin: 0 auto 5%;
    display: block;
}

.lp05 .address{
    font-size: 0.7rem;
}

footer{
    background-color:gold;
    padding: 5%;
    font-size: 0.6rem;
    line-height: 1.5em;
}



footer .home{
    float: right;
    margin: 20px 20px 10px 0;
}

footer .copyright{
    clear: both;
    text-align: center;
    display: block;
    margin-top: 20px;
}



/*521px〜960pxの記述。（タブレット）*/
@media (min-width : 521px ){
.lp01{
    background-image: url("link/back01.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
      /* 親要素をフレックスコンテナとする */
      display: flex;
      /* 交差軸方向の整列位置を中央に指定 */
      align-items: center;
      /* 主軸方向の整列位置を中央に指定 */
      justify-content: center;
    padding: 10%;
}

.lp02 img{
    display: flex;
    margin: 60px auto;
    width: 60%;
}

.lp02_text{
    margin: 50px auto;
    color:white;
    text-align: justify;
    font-size: 0.9em;
    line-height: 1.7em;
    width:70%;
}

.lp03 {
    padding: 50px;
}

.lp03 video{
    width: 70%;
    display: block;
    margin: 30px auto 0px;
    border: none;
}
    
.lp03 .flex-video{
    width: 70%;
    margin: auto;
}

.lp03 .video-size{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    margin: 50px auto 10px;
}
    
    
.video_title{
    width: 100%;
    display: block;
    margin: 10px auto;
    text-align: right;
    color: white;
    font-size: 0.8em;
    font-weight: 100;
}
    
.lp03_title{
    font-size: 3em;
}

.lp03_subtitle{
    font-size: 1.5em;
}

    
.lp04_text h1{
    font-size: 1rem;
    text-align: justify;
    width: 80%;
    margin: 20px auto;
    line-height: 1.3em;
    font-weight: 900;
}

.lp04_text p{
    font-size: 0.9rem;
    text-align: justify;
    width: 80%;
    margin: 15px auto;
    line-height: 1.5em;
}

.lp05 img{
    width:auto;
}

.lp05_text{
    margin: auto;
    color:white;
    width:60%;
}

.lp05_text h1{
    text-align: center;
    margin-top: 5%;
    margin-bottom: 100px;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.3em;
}
    
.lp05_text h2{
    text-align: left;
    margin-top: 5%;
    font-size: 2.5rem;
    font-weight: 700;
}

.lp05_text h3{
    text-align: left;
    margin-bottom: 20px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 2em;
}
    
.lp05_text p{
    text-align: justify;
    font-size: 1rem;
    line-height: 1.2em;
    padding: 8%;

}

    .lp05_text dl{
        margin-bottom: 30px;
    }
    
    .lp05_text dt{
        font-size: 1.3rem;
        font: bold;
        margin:0px 0px 20px 0; 
        background: linear-gradient(transparent 90%, gold 60%);
    }
    
    .lp05_text dd{
        font-size: 1em;
        margin:0px 0px 50px 20px;
        text-align: justify;
        line-height: 1.5em;
    }
    
.lp05_text ul {
    list-style-type: disc;
    position: relative;
    border-radius: 5px;
    padding: 3rem 3rem 1rem;
    background: #FFF;
}

.lp05_text ul::before {
    position: absolute;
    top: 1rem;
    background: linear-gradient(transparent 60%, #ff6 60% 90%, transparent 90%);
    font-weight: bold;
    font-size: 18px;
    color: #000;
    content: attr(data-title);
}

.lp05_text ul li {
    color: #000;
    line-height: 1.5;
}
    

.lp05 .address{
    font-size: 0.9rem;
}

footer{
    background-color:gold;
    padding: 2%;
    font-size: 0.8rem;
    line-height: 1.5em;
}

footer .f_address{
    width: 80%;
    float: left;
    margin-bottom: 20px;
}
}

/*961px以上の記述。（デスクトップ）*/
@media ( min-width : 962px ){
.lp01{
    padding: 15%;
}
    
.lp02 img{
    display: flex;
    margin: 100px auto;
    width: 50%;
}

.lp02_text{
    margin: 70px auto;
    color:white;
    text-align: justify;
    font-size: 1.2rem;
    line-height: 1.7em;
    width:45%;
}
    
.lp03 video{
    width: 50%;
    display: block;
    margin: 50px auto 10px;
}

.lp03 .flex-video{
  /*（全体の幅 - gapでつけた余白の合計）をカラム数で割る */
  width: calc((100% - 15px) / 2);
}

.lp03 .video-size{
    width: 90%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    margin: 50px auto 10px;
}
    
.video_title{
    width: 90%;
    display: block;
    margin: 10px auto;
    text-align: right;
    color: white;
    font-size: 0.9em;
    font-weight: 100;
}

.lp03_title{
    font-size: 3em;
}

.lp03_subtitle{
    font-size: 1.5em;
    line-height: 2em;
}

    
.lp04_text h1{
    font-size: 1.7rem;
    text-align: justify;
    width: 70%;
    margin: 30px auto;
    line-height: 1.3em;
    font-weight: 900;
}

.lp04_text p{
    font-size: 1.4rem;
    text-align: justify;
    width: 70%;
    margin: 30px auto;
    line-height: 1.3em;
}

.lp05 img{
    max-width: 80%;
    display: block;
    margin: auto;
}


.lp05 .contact{
    background-color: white;
    width: 40%;
    margin: 30px auto;
    padding: 3%;
}
    
.lp05 .contact_tel{
    width: 50%;
    border-right: 3px solid;
}

.lp05 .contact_mail{
    width: 50%;
}

    
.lp05 .wing{
    width: 60%;
    margin: 0 auto 5%;
    display: block;
}
.lp05 .address{
    font-size: 1.2rem;
}

footer{
    background-color:gold;
    padding: 1%;
    font-size: 1rem;
    line-height: 1.5em;
}
    
footer .home img{
   width: 150px;
}
    
}