@import url("activity_pc.css") screen and (min-width:801px) ;
@import url("activity_sp.css") screen and (min-width:0px) and (max-width: 800px);

/********************************************************

    レイアウト変更修正 - 202208

********************************************************/
article > section:nth-child(odd) h1 > span { background: #fff;}
#towing ul { display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; width: 1100px; max-width: 90%; margin: 50px auto 0 auto;}
#towing li { width: 49%; display: flex; flex-direction: column; padding: 2em; background: #e6f5f9;}
#towing li h2 { margin: 1em 0 .6em; text-align: center; line-height: 1.3; font-size: 2.4rem;}
#towing li h2 span { width: 100%; font-family: 'Montserrat', sans-serif; font-size: 1.6rem; color: #ccc; display: block;}
#towing li figure { width: 100%; height: 350px; border-radius: 8px; border: 1px solid #fff; overflow: hidden;}
#towing li figure img { width: 120%; margin-top: -80px;}
#towing li:nth-of-type(1) figure img { margin-left:-5vw;}
#towing li:nth-of-type(2) figure img { width: 110%; margin-top: -120px;}
#towing li:nth-of-type(3) figure img { width: 100%; margin-top: -50px;}
#towing li:nth-of-type(4) figure img { margin-top: -60px; margin-left: -6vw;}
#towing li:nth-of-type(1), #towing li:nth-of-type(2) { margin-bottom: 2%;}
#towing li > p { font-size: 1.7rem; margin-bottom: 0;}
#towing li > p span { text-indent: -.5em; display: inline-block; margin-top: .5em;}
#towing > div { position: relative; background: #e6f5f9; margin-top: 2%; padding: 2em; width: 1100px; max-width: 90%; align-items: flex-end; justify-content: center;}
#towing > div p { font-size: 1.7rem; text-align: center; display: block; margin-bottom: .4em;}
#towing > div h4 { font-size: 2rem; letter-spacing: 2px; color: #39acd6; display: block; margin: 0 .6em 0 .8em; padding:0;}
#towing > div h4 b { font-size: 4.4rem; font-family: 'Montserrat', sans-serif; font-weight: 600;}
#towing li h6 { text-align: center; font-size: 2rem; margin-top: 1.5em; font-weight: normal;}
#towing li h6 span { display: inline-block; padding: .5em 1.2em; border: 1px solid #39acd6; color: #39acd6;}
.activeArea div ul.boat { background: #fff; padding: 3% 0;}
.activeArea div ul.boat li { text-align: center;}
@media(max-width:1200px) {
    #towing li figure { height: 25vw;}
    #towing li:nth-of-type(1) figure img { margin-top: -40px;}
    #towing li:nth-of-type(2) figure img { margin-top: -60px;}
    #towing li:nth-of-type(3) figure img { margin-top: -60px;}
    #towing li:nth-of-type(4) figure img { margin-top: -40px;}
}
@media(max-width:767px) {
    #towing ul { flex-direction: column; margin: 30px auto 0 auto; width: 100%; max-width: 100%;}
    #towing li { width: 100%; padding: 0; background: none;}
    #towing li h2 { font-size: 2.2rem;}
    #towing li figure { height: 30vh; border-radius: 0; border: 0;}
    #towing li figure img { width: 120%; margin-top: -80px;}
    #towing li:nth-of-type(1) figure img { margin-top: -12vh; margin-left: -18vw;}
    #towing li:nth-of-type(2) figure img { margin-top: -20vh; margin-left: 0;}
    #towing li:nth-of-type(3) figure img { margin-top: -8vh; margin-left: 0;}
    #towing li:nth-of-type(4) figure img { margin-top: -10vh; margin-left: -15vw;}
    #towing li, #towing li:nth-of-type(1), #towing li:nth-of-type(2) { margin-bottom: 15%;}
    #towing li > p { font-size: 1.5rem; padding: 0 5%;}
    #towing > div { flex-direction: column; align-items: center; margin: 3% auto 10%;}
    #towing > div p { font-size: 1.7rem;}
    .activeArea div ul.boat { padding: 6% 0;}
}