@charset "utf-8";

/* ===== Universal Reset ===== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body { 
    font-size:16px;
	font-family: 'Zen Kaku Gothic New', sans-serif;
    background: white;
    overflow-x: hidden;
}
*{
	margin:0;
	padding:0;
}
section{
    text-align: center;
}
section.all{
    width: 100%;
    height: 50%;
    background: url(hajimete_all/img/main.jpg) no-repeat center center/cover;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
section.r18{
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(hajimete_r18/img/main.jpg) no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
section a{
    display: block;
}
section a img{
    width: 40%;
}
@media screen and (max-width:767px) {
    section a img{
        width: 70%;
    }
}

/*modal*/
.modal-content .content .h-btn img:hover {
	opacity: 0.7;
}

.modal-content .content .h-btn {
	width: 15%;
	max-width: 190px;
	margin: 0 auto;
}
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1000;
}
.modal__bg{
    background: #000;
	opacity: 0.3;
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content {
    background:rgba(0,0,0,0.8);
    left: 50%;
    padding: 50px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/*モーダルコンテンツ内*/
.modal-inner p{
    font-size: 20px;
    padding-bottom: 30px;
}
.modal-inner a.button{
    display: inline-block;
    padding: 20px 0;
    width: 10em;
    text-align: center;
    color: #7E3FEC;
    border: 1px solid #7E3FEC;
    text-decoration: none;
    font-size: 20px;
    margin: 0 20px 20px 20px;
}
.modal-inner a.button:hover{
    background-image: linear-gradient(108deg, rgba(242,242,194,1) 0%, rgba(212,245,233,1) 55%, rgba(202,246,242,1) 78%, rgba(214,232,246,1) 100%);
    cursor: pointer;
}
/*バツボタン*/
.batsu {
	display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    right: 0px;
    border-radius: 50%;
}
 
.batsu::before, .batsu::after { /* 共通設定 */
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3.5px; /* 棒の幅（太さ） */
	height: 30px;
    background: #7E3FEC;
}
 
.batsu::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
.batsu::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}