@CHARSET "UTF-8";
/*******************************************************************************
 * 天然温泉　海王 最強最高海王サウナクラブ
 * WEB SITE ver.2025
 * RESPONSIVE
*******************************************************************************/
@import url(html5-doctor-reset-stylesheet.min.css);
@import url(base.css);
@import url(common.css);

h2{
	font-size: 3.2rem;
	line-height: 1.3;
	text-align: center;
	margin-bottom:3rem;
}
article>figure{
	margin:0 auto 0;
}
article>p{
    font-size: 3rem;
    line-height: 1.4;
    margin-top: 5rem;
    text-align: center;
}
/** SMART PHONE **/
@media screen and (max-width: 768px){
	h2{
		font-size: 2.2rem;
		margin-bottom:1.4rem;
	}
   article>p{
        font-size: 2.6rem;
        margin-top: 2rem;
    }
}

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

 * #about
 
******************************************************************************/
#about{
	max-width:800px;
	width:90%;
	margin:4rem auto 0;
    text-align:center; 
}
#about h3{
    font-size: 3.2rem;
    display:inline-flex;
    gap:2rem;
    margin-bottom: 2rem;
}
#about h3 span{
    display: flex;
    gap:0.5rem;
}
#about h3 span>small{
    font-size: 1.4rem;
    line-height: 1.1;
    font-weight: normal;
}
#about>div>h3+p{
    font-size: 3.6rem;
    color: #EA5504;
    font-weight: bold;
    margin-top: 5rem;
}
#about ul{
    display: inline-grid;
    grid-template-columns:1fr auto;
    line-height: 1.5;
    margin: 3rem -3rem auto;
}
#about ul li{
    padding:1rem 3rem;
    position: relative;
}
#about ul li.plan{
    text-align: left;
}
#about ul li.plan:before {
  background-color:#333;
  content:"";
  display:block;
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:.1rem
}
#about ul h4{
    font-size: 3rem;
}
#about ul h4>span{
    display: block;
    font-size: 2rem;
}
#about ul p{
    font-size: 1.5rem;
}
#about ul li.day p{
    font-size: 2rem;
    color: #EA5504;
    font-weight: bold;
}
#about ul li.day p span{
    display: inline-block;
    background: #EA5504;
    border-radius:5px;
    padding:0.2rem 0.5rem;
    margin-right: 0.5rem;
    color: #fff;
}
#about ul li.plan p:last-child{
    display: inline-flex;
    align-items: center;
    gap:2rem;
    border:1px solid #333;
    padding:0.5rem 2rem;
    margin-top: 1rem;
}
#about ul li.plan p:last-child span{
    font-size: 2rem;
}

/** SMART PHONE **/
@media screen and (max-width: 768px){
	#about {
		margin:2rem auto 0;
	}
    #about h3{
        font-size: 2.2rem;
        flex-direction: column;
        align-items: center;
        gap:1rem;
    }
    #about h3 span{
        font-size: 2.6rem;
    }
    #about h3 span>small{
        font-size: 1.2rem;
        line-height: 1.2;
    }
    #about>div>h3+p{
        font-size: 2.2rem;
        line-height: 1.3;
        margin-top: 3rem;
    }
    #about ul{
        grid-template-columns:1fr;
        flex-direction: column;
        margin-top: 0;
    }
    #about ul li{
        padding:2rem 1rem;
    }
    #about ul li.plan:before {
      height:.1rem;
      width:100%;
    }
    #about ul h4{
        font-size: 2.4rem;
    }
    #about ul h4>span{
        font-size: 1.6rem;
    }
    #about ul li.day p{
        font-size: 1.8rem;
    }
    #about ul li.plan p:last-child{
        gap:1rem;
    }
}


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

 * #rules
 
******************************************************************************/
#rules{
	max-width:800px;
	width:90%;
	margin:8rem auto 0;
    text-align:center; 
}

/**rulesTitle**/
#rules .rulesTitle{
    display:inline-grid;
    grid-template-columns:auto 100px;
    gap:2rem;
    align-items: center;
}
#rules h3{
    width: 90%;
    max-width: 250px;
    margin:auto auto 1rem;
}
#rules h3+p{
    font-size: 2rem;
    line-height: 1.3;
    font-weight: bold;
}

/**rulesDetail**/
#rules .rulesDetail{
    background: #fff;
    padding: 2.4rem;
    margin-top: 3rem;
    display:grid;
    grid-template-columns:130px auto 130px;
    gap:2rem;
    text-align: center;
}
#rules .rulesDetail ul{
    display:inline-grid;
    grid-template-columns:repeat(2, auto);
    gap:3rem;
}
#rules .rules ul>li{
    font-size: 1.6rem;
    line-height: 1.5;
    text-align:left;
}
#rules .rules ul>li span{
    background: linear-gradient(transparent 70%, #FFE100 0%);
    font-weight: bold;
}

/** SMART PHONE **/
@media screen and (max-width: 768px){
	#rules {
		margin:4rem auto 0;
	}
    /**rulesTitle**/
    #rules .rulesTitle{
        display:inline-grid;
        grid-template-columns:auto 80px;
        gap:2rem;
        align-items: center;
    }
    #rules h3+p{
        font-size: 1.6rem;
    }

    /**rulesDetail**/
    #rules .rulesDetail{
        padding: 2rem;
        margin-top: 3rem;
        grid-template-columns:repeat(2, 1fr);
        gap:4rem;
    }
    #rules .manImg{order: 2; max-width: 150px; margin: auto;} 
    #rules .rules{order: 1; grid-column: span 2;}
    #rules .womanImg{order: 3; max-width: 150px; margin: auto;} 
    #rules .rulesDetail ul{
        grid-template-columns:1fr;
        gap:2rem;
    }
     #rules .rulesDetail ul>li{
        font-size: 1.5rem;
    }
    #rules .rulesDetail ul>li br{
        display: none;
    }
}