@charset "UTF-8";
/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-size: 100%;
	line-height: 1.6;
	}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
input, textarea
{ border-radius: 0; }
abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

/* !Layout
---------------------------------------------------------- */
html { overflow-y: scroll; width: 100%; }
body { text-align: center;width: 100%; 
}

@media print {
	html,
	html body { *zoom: 0.65;}
}

a:link { color: #436392; text-decoration:none; font-weight:bold; font-size:110%;}
a:visited { color: #d390d7; }
a:hover { color: #e60012; }
a:active { color: #000; }

.fzS  { font-size: 80%;}
.fzSS  { font-size: 60%;}
.fwB { font-weight: bold;}
.fwN { font-weight: normal;}
.fzL  { font-size:  120%;}
.fzLL { font-size:  150%;}

.br-sp {display: none; }
.br-pc {display: block; }

/* 
---------------------------------------------------------- */
#content{ width:100v; height:auto; padding:0 0 10px 0;
text-align:center; margin:0 auto;

}
div.box-frame {width:100%; height:100%; margin: auto;}
div.box-container { margin:0; padding:0;
	width:100%;
    flex-wrap:wrap;
    flex-direction:column;
}

.photo-box{ width:100%; margin:auto; padding:70px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-around;
}

.title-box{ width:100%; height:auto; padding:0;}
.title-box img { width:100%; height:100%; position:relative; padding:0; margin: 0;
}

.box{ margin-bottom:20px; display:block;
}
.box2{ margin-bottom:20px; display:block;
}
.box3{ margin-bottom:20px; display:block;
}
.box img {width:400px; height:auto; position:relative; padding:0;
}
.box-1 img {
object-fit:contain;
}
.box3 img {width:auto; height:400px; position:relative; padding:0;
}
.title{ margin:0 auto; padding:0 0 20px 0; font-size:240%;width:100%;  color:#ef2d74;font-family: 'M PLUS 1p', sans-serif; font-weight:700; background-image: url(../images/child_artis-name_bg.jpg);
background-size: contain; background-repeat: no-repeat; background-position: bottom;
 display:flex;justify-content:center; align-items:center;

}

.copy-box{ width:100%; height: 200px; padding: 20px 0; text-align:center; margin: 0 auto;
}
.copy-box p{ margin: auto; width: 80%; font-size:160%; font-family: 'Noto Sans JP', sans-serif; font-weight:300; letter-spacing: 0.1em; line-height: 1.7; 
}
.copy-box p.long-copy{ margin: auto; margin-top: -20px; width: 80%; font-size:160%; color: #d52015;font-family: 'Noto Sans JP', sans-serif; font-weight:300; letter-spacing: 0.1em; line-height: 1.4;}

.shosai-bt{ width:40%; min-height:80px; margin:auto; display:block; padding:10px 20px; margin-top:30px; margin-bottom:20px; color:#ef2d74; font-size:clamp(1.375rem, 1.148rem + 1.14vw, 2rem);font-family: 'Noto Sans JP', sans-serif; font-weight:800;transform: rotate(0.05deg); border-radius: 10px;border: 0;

display:flex;
justify-content:center;
align-items:center;
transition: all .3s ease-out;
}

.shosai-bt:hover { cursor: pointer;
    background: #a3aacb;

}

div.btn-box{width:100%; display:flex;justify-content:space-around;
}
.bg-green{ background: #76C6AD;
background: linear-gradient(180deg, rgba(118, 198, 173, 1) 0%, rgba(139, 232, 203, 1) 100%);
border: 1px #5e9c89 solid;}
.bg-lavender{ background: #888DA7;
background: linear-gradient(180deg, rgba(136, 141, 167, 1) 0%, rgba(180, 187, 225, 1) 100%);border: 1px #556096 solid;}

#foot-box{ width: 100%; height: 250px; margin-top: 50px; bottom: 0;
padding: 20px 0;
background: rgb(255,255,255);
background-image: url(../images/child-footer-bg.jpg),linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,192,233,1) 100%);
background-repeat: no-repeat; background-position: bottom;
mix-blend-mode: overlay;
}

.jkt-line{border: 1px #d39f2a solid;}


@media screen and (max-width:767px){
.br-sp {display: block; }.br-pc {display: none; }
.title{ margin:0 auto; padding:0; font-size:180%;width:100%; min-height:40px;}
.bg-50{ background-position: center 55% !important; }

.copy-box { height: auto; line-height: 1; background-position: center 40%;}
.copy-box p{ font-size: 60%; height: auto; line-height: 2;}
.copy-box p.long-copy{ margin: auto; width: 100%; font-size:60%; color: #a40411; letter-spacing: 0em; line-height: 1.6; padding-bottom: 30px;}

div.btn-box{width:90%; margin: auto; display:flex;justify-content:space-around; flex-direction: column; }

.shosai-bt{ width: 96%; height:auto;padding:2px; height:30px;}
.shosai-bt:hover{
    flex-direction:column;
    justify-content:center;
	}

.title-box{ margin-bottom:10px; height:auto;
}
.title-box img { width:100%; height:auto;
}

.box{ width:100%; margin:auto; margin-bottom:0; display:block;
}
.box2{ display:none;
}
.box3{width:100%; margin-bottom:20px; display:block;
}
.box img {width:100%; height:auto; margin:auto;}
.mob-small{ font-size: 75%;}

}
    /* For iPad */
@media only screen and (min-width: 768px)and (max-width:950px) {
    .title{ margin:0 auto; padding:0; font-size:140%;width:100%; }
    .copy-box { height: auto;}
    .copy-box p{ font-size: 60%;  height: auto;}
    .shosai-bt{ 
        flex-direction:column;
        justify-content:center;
        }
    
.title-box{ margin-bottom:10px; height:auto; 
    }
.title-box img { width:100%; height:auto;
    }
.box{width:70%; margin:auto; margin-bottom:20px; display:block;
    }
.box img {width:100%; height:auto; margin:auto;}
.box-1 img {width:100%; height:auto; margin:auto;}
.box2{ display:none;
    }
.box3{width:100%; margin-bottom:20px; display:block;
    }

}

@media screen and (max-width: 1024px) and (orientation: portrait){
   	.photo-box{padding:10px;
    flex-direction:column;}
.box img {width:100%; height:auto; margin-bottom:30px; display:block;}	
}

/* inview.box{ opacity:0;}
---------------------------------*/


.fadeInlow{
  transition: all 1s ease-in;
  opacity: 1 !important;
}