@charset "utf-8";
/* CSS Document */
.display_pc {
    display: block;
}
.display_sp {
    display: none;
}

@media screen and (max-width: 750px) {
.display_pc {
    display: none;
}
.display_sp {
    display: block;
}
}

#mv {
    max-width: 1370px;
    margin: 0 auto;
    background: #3db156;
    text-align: center;
    padding: 50px;
}
#mv h1 {
    margin: 0 0 20px;
    padding: 0;
}
#mv h1 img {
    max-width: 798px;
    height: auto;
}
#mv .period {
    background: #fff600;
    padding: 15px;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 700;
    max-width: 798px;
    margin: 0 auto;
}



#contents {
	max-width: 950px;
    margin: 0 auto 100px;
}
#contents #leadtxt {
    font-size: 2.4rem;
    line-height: 1.6;
    font-weight: 700;
    text-align: center;
    margin: 20px 0;
}
#contents .product {
    text-align: center;
    margin-bottom: 50px;
}

#agreebtn .hosoku {
    display: block;
    width: 500px;
    max-width: 500px;
    margin: 0 auto;
}

@media screen and (max-width: 750px) {
#mv {
    max-width: 100%;
    padding: 25px;
}
#mv h1 {
    margin: 0 0 20px;
    padding: 0;
}
#mv h1 img {
    width: 90%;
    height: auto;
}
#mv .period {
    font-size: 3.3rem;
    max-width: 90%;
    margin: 0 auto;
    line-height: 1.5;
}



#contents {
	max-width: 950px;
    width: 86%;
    margin: 0 auto 100px;
}
#contents #leadtxt {
    font-size: 3.6rem;
    line-height: 1.6;
    font-weight: 700;
    text-align: left;
    margin: 20px 0;
}
#contents .product img {
    width: 100%;
    height: auto;
}
#agreebtn .hosoku {
    font-size: 3.0rem;
    width: 100%;
    max-width: 100%;
}
}



/*モーダル用
-------------------------------------------------------------------------*/
/*infoエリアをはじめは非表示*/
#info{
	display: none;
}



/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}


.modaal-content-container #attention {
    display: block !important;
    margin: 0 auto 20px !important;
    text-align: center !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}
.modaal-content-container p.attTxt {
    font-size: 18px !important;
}
.modaal-content-container p.qr {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
    max-width: 240px !important;
}
.modaal-content-container p.qr img {
    width: 100%;
    height: auto;
}