body, h1, .block h2, footer p{margin: 0;}
h3{margin-bottom: 0;font-size: 36px;}
a{text-decoration: none;}
.marB1{margin-bottom: 40px;}
.marB2{margin-bottom: 80px;}
ul{list-style: none;padding-left: 0;}
span{color:#003366;font-weight: bold;}

.preface, .block h2, .intrBlock h1, .recTraB h2, .note h1, .ytVideo h1{font-size: 42px;}
.content, .block ul, .block p, .intrBlock p, .rContent, .note ul{font-size: 20px;line-height: 40px;}
.DowW, .apply{font-size: 20px;padding: 8px 16px;}
footer p{font-size: 16px;}

.intBeingT{width: 80%;}
.content, .block h2, .intrItem div{width: 50%;}
.itemP{width: 25%;}
.block h2, .block ul, .recTraB, .note, footer{text-align: center;}

.ubg h1, .block h2, footer p, .btn, .DowW, .apply, .mobileSize{color: white;}
.block h2, .btn, .DowW, .apply, .mobileSize{border-radius: 4px;}
.btn, .DowW, .apply, .mobileSize{background-color: #1E90FF;font-weight: bold;}


.ubg{
    background-image:url('/images/car/arashiyama.jpg');
    height: 480px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: end;
    align-items: end;
}
.ubg h1{
    font-size: 46px;
    margin-bottom: 2%;
    margin-right: 18%;
    border-radius: 4px;
    padding: 16px;
    background-color: rgba(0, 0, 0, .5);
}
.preface{
    border: 1px solid;
    width: fit-content;
    padding: 0 8px;
    margin-left: 25%;
    box-shadow: 3px 4px 3px;
}
.content{text-align: justify;margin: auto;}
.block, .intrBlock{display: flex;flex-flow: column;align-items: center;}
.block h2{
    background-color: #FF8099;
    padding: 8px;
}
.btn{
    font-size: 24px;
    padding: 4px 24px;
}
.btn:hover, .DowW:hover{
    background-color:orange;
    cursor: pointer;
}

.intrItem, .recTraPic{display: flex;justify-content: space-evenly;}
.intrItem{align-items: center;}
.intPic1, .intPic3{object-fit: contain;}
.intPic2{height: 340px;}
.intPic2, .intPic3{width: 500px;}
.intrItem p{text-align: justify;}


.recTraB h2 img{width: 2.5%;} 
.recTraBfTb{transform: scaleX(-1);}
.tra1, .tra2, .tra3{height: 502px;background-size: cover;position: relative;transition: opacity 1s linear;}
.tra1{background-image: url('/images/car/ginga.jpg');}
.tra2{background-image: url('/images/car/touhoku.jpg')}
.tra3{background-image: url('/images/car/touhoku2.jpg')}

.tra1Up{
    display:inline-block;
    position: absolute;
    top: 30px;
    left: -280px;
}
.rplayer{
    width: 25%;
    transform: rotate(-30deg);
}
.rStar{
    width: 5%;
    vertical-align: top;
}
.tra1Down{
    font-size: 20px;
    margin: 16px 0 0 0;
}
.tra1Down img{
    width: 10%;
    vertical-align: middle;
    margin-right: 3%;
}
.fThumb{transform: scaleX(-1);margin-left: 3%;}
.apply{
    position: absolute;
    top: 48%;
    left: 40%;
    opacity: 0;
    transition: opacity 1s linear;
}
.tra1:hover .apply, .tra2:hover .apply, .tra3:hover .apply{opacity: 1;}
.tra1:hover, .tra2:hover, .tra3:hover{opacity: .8;}
.mobileSize{
    font-size: 26px;
    padding: 8px 24px;
    display: none;
}

.ytVideo{
    text-align: center;
    margin-bottom: 60px;
}
.video{width: 700px;height: 395px;}
footer{background-color: #3CB371;padding: 24px 0;}
@media screen and (max-width:1200px) {
    .tra1, .tra2, .tra3{height: 406px;}
    .tra1Up{left: -210px;}
    .tra1Down{font-size: 16px;}
}
@media screen and (max-width:992px) {
    .tra1, .tra2, .tra3{height: 340px;}
    .tra1Up{left: -180px;}
    .tra1Down{font-size: 14px;}
    .intPic1, .intPic3, .intPic2{width: 40%;}
    .intPic2{object-fit: cover;height: 265px;}
}
@media screen and (max-width:768px) {
    .intrItem, .recTraPic{flex-wrap: wrap;}
    .content, .block h2, .intrItem div{width: 75%;}
    .intPic1, .intPic3, .intPic2{width: 60%;}
    .intPic2, .intPic3{height: 306px;}
    .itemP{width: 60%;margin-bottom: 5%;}
    .tra1, .tra2, .tra3{height: 620px;}
    .tra1Up{left: -300px;}
    .tra1Down{font-size: 20px;}
    .apply{display: none;}
    .mobileSize{display: block;width: fit-content;margin: auto;}
}
@media screen and (max-width:415px) {
    .marB1{margin-bottom: 20px;}
    .ubg h1{font-size: 36px;margin-right: 3%;margin-bottom: 20%;}
    .preface{margin-left: 12%;}
    .intrBlock p{text-align: justify;}
    .intPic1, .intPic3, .intPic2{width: 330px;}
    .intPic2, .intPic3{height: 224px;}
    .recTraB h2 img{width: 8.5%;}
    .itemP{width: 85%;}
    .tra1Up{left: -200px;}
    .tra1{background-size: contain;height: 485px;} 
    .tra2, .tra3{background-size: contain;height: 470px;}
    .rplayer{background-color: rgba(255,255,0,.7);}
    .video{width: 345px;height: 194px;}
    /* 400 250 */
    .ytVideo h1{font-size: 30px;}
    .note ul{font-size: 18px;}
}
@media screen and (max-width:320px) {
    .ubg{width: 320px;}
    .ubg h1{font-size: 30px;margin-bottom: 40%;}
    .preface, .block h2, .intrBlock h1, .recTraB h2, .note h1{font-size: 32px;}
    .block ul, .block p{font-size: 17px;}
    .content, .block ul, .block p, .intrBlock p, .rContent{line-height: 34px;}
    .rContent{font-size: 18px;}
    .intPic1, .intPic3, .intPic2{width: 320px;}
    .itemP{width: 84%;}
    .tra1Up{left: -140px;}
    .tra1Down{font-size: 16px;}
    .tra1{height: 372px;}
    .tra2, .tra3{height: 360px;}
    .ytVideo h1{font-size: 24px;}
    .video{width: 320px;}
    .note ul{font-size: 13px;line-height: 24px;}
}