footer.footer{margin-top:0}
body{
background: url("../over100/images/bg.webp")repeat top center;
}


.pc{display: none!important}
.sp{display: block!important}
@media only screen and (min-width: 960px){
.pc{display: block!important}
.sp{display: none!important}
}

.br_sp{display: none}



@media only screen and (max-width: 640px){
.contents{
margin: 0 auto;
width: 100%;
}
}

sup {font-size: .4em;vertical-align: top;}

.cap{
width: 1100px;
max-width: 100%;
margin: 0 auto;
font-size: 0.7em;
text-align: right;
}
.cap2{
width: 1000px;
max-width: 100%;
margin: 0 auto;
font-size: 0.7em;
text-align: left;
}

.main{
background: url("../over100/images/mv.webp");
width:100%;
max-width:100%;
margin:0 auto;
position:relative;
  aspect-ratio:auto;
  height:auto;
  min-height:100vh;
padding-top: 0%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

.main h2{
width:100%;
text-align:center;
color:#fff;
background:url(../images/access/bg-main.png) no-repeat 0 0;
background-size:cover;
font-size:16px;
padding:10px 0;
position:absolute;
top:0;left:0
}
@media only screen and (min-width: 640px){
.main h2{font-size:24px;padding:60px 0}}



.top-contents{
width: 1000px;
max-width: 100%;
margin: 0 auto;
text-align: center;
}





.contents img{
width: 100%;
}
@media only screen and (max-width: 640px){
.contents img{
width: 100%;
}
}

.mv_title{padding-top: 300px;}
@media only screen and (max-width: 640px){
.mv_title{
width: 80%;
margin: 0 auto;
padding-top: 200px;
}
}





.page_title{margin-top: 100px;}
@media only screen and (max-width: 640px){
.page_title{
width: 95%;
margin-top: 50px;
}
}

.page_title h3{
letter-spacing:.1em;
font-weight:300;
font-size:2em;
margin-bottom: 20px;
}
.page_title .sub_title{
font-size:1.2em;
}

@media only screen and (max-width: 640px){
.page_title{
font-size:min(5vw,24px);
padding:42px 0 40px
}
.page_title h3{
letter-spacing:.1em;
font-weight:300;
font-size:1.2em
}
.page_title .sub_title{
font-size:.8em;
}
}







.menu{
width: 850px;
max-width: 100%;
margin: 50px auto 0;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap; 
}
.menu div{
}
@media only screen and (max-width: 640px){
.menu{
width: 100%;
margin: 0 auto ;
gap: 10px 10px;


}
}



.sub-title{
font-size:1.6em;
margin-bottom: 20px;
}
.sub-read{
margin-bottom: 20px;
font-size: 1rem;
}
.sub-img{
}
figcaption{font-size: .8em}





.contents-title{
max-width: 1100px;
width: 100%;
text-align: center;
margin: 0 auto;
margin-bottom: 50px;
}
@media only screen and (max-width: 640px){
.contents-title-sp{
width: 90%;
margin-bottom: 100px;
}
}
.contents-title-img{
text-align: center;
max-width: 550px;
margin: 0 auto;
padding: 0;
}
.contents-title-img2{
text-align: center;
max-width: 100%;
margin: 0 auto;
padding: 0 0 50px 0;
}
@media only screen and (max-width: 640px){
.contents-title-img2{
text-align: center;
max-width: 100%;
margin: 0 auto;
padding: 0;
}
}

.contents-title h2{
font-size:2.2em;
margin: 20px 0;
}
@media only screen and (max-width: 640px){
.contents-title h2{
font-size: 2em;
margin: 20px 0;
}
}

.contents-title h3{
font-size:2.2em;
margin: 20px 0;
}
@media only screen and (max-width: 640px){
.contents-title h3{
font-size: 1.8em;
margin: 30px 0 20px;
}
}

.contents-title-read{
font-size: 1.1rem;
line-height: 200%;
}
@media only screen and (max-width: 640px){
.contents-title-read{
font-size: 1rem;
}
}

.sec1{margin-bottom: 50px;}
.box-l{
margin: 50px 0 20px;
}
@media only screen and (min-width: 640px){
.sec1{
max-width: 1100px;
margin: 0 auto;
padding-bottom: 50px;
}
.sec1 img{
width: 95%;
}
.box1{
display: flex;
position:relative;
}
.box-l{
width: 50%
}
.box-l img{
width: 80%
}
.box-r{
width: 50%;
text-align: right;
display: inline;
margin: auto 0;
}
}


.sec2{margin-bottom: 50px;}
.box2-r{
margin-bottom: 20px;
}
@media only screen and (min-width: 640px){
.sec2{
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding-bottom: 50px;
}
.sec2 img{
width: 90%;
}
.box2{
display: flex;
position:relative;
}
.box2-l{
width: 50%;
}
.box2-r{
width: 50%;
text-align: right;
display: inline;
margin: auto 0;
}
}



.box3{
width: 90%;
margin: 0 auto;
}
.box3-l{
margin-bottom: 20px;
}
.box3-r{
margin-bottom: 50px;
}
@media only screen and (min-width: 640px){
.sec3{
max-width: 1100px;
margin: 0 auto;
padding-bottom: 100px;
text-align: center;
}
.box3{
width: 100%;
display: flex;
position:relative;
}
.box3-l{
width: 60%;
}
.box3-l img{
width: 90%;
}
.box3-r{
width: 40%;
text-align: right;
display: inline;
/* margin: auto 0; */
}
.box3-r img{
width: 90%;
}
}




.box4{
width: 90%;
margin: 0 auto;
}
.box4-l{
margin-bottom: 50px;
}
@media only screen and (min-width: 640px){
.sec4{
max-width: 1100px;
margin: 0 auto;
padding-bottom: 50px;
text-align: center;
}
.box4{
width: 100%;
display: flex;
position:relative;
}
.box4-l{
width: 40%;
}
.box4-l img{
width: 90%;
}
.box4-r{
width: 60%;
text-align: right;
display: inline;
margin: auto 0;
}
.box4-r img{
width: 90%;
}
}




@media only screen and (min-width: 640px){
.sec6{
max-width: 800px;
margin: 0 auto;
padding-bottom: 100px;
text-align: center;
}
}

.box2-2-l{
text-align: left;
}
.box2-2-r{
margin-top: 50px
}
.box2-2-r span{
line-height: 140%;
display:block;
margin-top: 20px;
}

@media only screen and (min-width: 640px){
.sec2-2{
max-width: 900px;
margin: 0 auto;
padding: 50px 0;
text-align: center;
}

.box2-2{
display: flex;
position:relative;
}
.box2-2-l{
width: 40%;
text-align: left;
}
.box2-2-l img{
width: 90%;
}
.box2-2-r{
width: 60%;
text-align: left;
display: inline;
margin: auto 0;
}
.box2-2-r img{
width: 90%;
}
}






.sec5{
width: 1000px;
max-width: 100%;
margin: 0 auto 30px;
text-align: center;
}
.equip{
width: 1000px;
max-width: 100%;
margin: 50px auto 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px 10px;
}
.equip div{
flex-wrap: wrap; 
}
.equip figcaption{
font-size: 1em;
margin-top: 10px;
}
.premium{
max-width: 1100px;
width: 100%;
margin: 50px  auto;
}
@media only screen and (max-width: 640px){
.equip{
display: block;
margin: 0px auto 30px;
}
.equip div{
margin-bottom: 30px
}
.equip figcaption{
font-size: 1.2em;
margin-top: 10px;
}
}








.ib{display:inline-block}
@media only screen and (max-width: 640px){
.sp_off{display:none}}