@charset "UTF-8";
/*/▼帯バナー削除用CSS▼//*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');

#beltbnr {
 display: none;
}
.h_bar{
  display: none;
}
/*/▲帯バナー削除用CSS▲//*/
#mainArea {
  letter-spacing: 0;
  line-height: 2;
  overflow: hidden;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
}
#mainArea div {
  font-family: 'Noto Sans JP', sans-serif;
}
#mainArea p {
  font-family: 'Noto Sans JP', sans-serif;
}
.bnr_ {
  width: 900px;
  margin: 0 auto;
  display: block;
}
section {
  width: 100%;
  margin: 7em auto 10em;	
  position: relative;	
}
.f-y {
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.f-f {
  font-family: futura-pt, sans-serif !important;
  font-weight: 400;
  font-style: normal;
  line-height: 2.1rem;
  font-size: 1.2rem;
  letter-spacing: 1px;		
}
.back-b {
	background: #b3c9a3;
}
.lead {
	background: #b3c9a3;	
  width: 100%;
  margin: 0 auto -2em;
  font-size: 1.3rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
  text-align: center;
}
.lead p {
	padding: 4em 0;
	font-size: 1.5rem;
	line-height: 1.9;
}
.lead-under {
  width: 100%;
  position: absolute;
  display: block;
  bottom: -11%;
}

/*///*/
#page_nav {
	background: #b3c9a3;	
	width: 100%;
    margin: 0 auto 0 auto;
	padding: 5% 0 0 0;	
    z-index: 1;	
}
#page_nav ul {
	width: 16%;
	margin: 0 auto;
	clear: both;
}
#page_nav ul li {
	width: 33%;
	float: left;
}
#page_nav ul li img {
    width: 100%;	
	height: auto;
	margin: 0 auto;
	display: block;	
}
#page_nav ul li img:hover {
	cursor: pointer;
}
#page_nav ul li a img {
	transition: 0.8s;
}

.comment_ {
	font-size: 1.3rem;
	line-height: 2.0;
    margin: 5% 0 7% 0;
    width: 86%;
}
#boytop {
    position: fixed;
    bottom: 40px;
    right: 100px;
    width: 73px;
    height: 73px;
    border-radius: 50%;
    /* background: rgba(245,217,163,1); */
    display: none;
	border: #364592 2px solid;
}
#girltop {
    position: fixed;
    bottom: 40px;
    right: 100px;
    width: 73px;
    height: 73px;
    border-radius: 50%;
    /* background: rgba(245,217,163,1); */
    display: none;
	border: #eb6b32 2px solid;
}
#boy.visible #boytop,
#girl.visible #girltop {
    display: block; 
}
#boytop a {
    color: #364592;
    text-decoration: none;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    letter-spacing: 1px;
    width: 100%;
    display: block;
    height: 100%;
    padding-top: 21%;	
    font-family: futura-pt, sans-serif;
    font-weight: 400;
}
#girltop a {
    color: #eb6b32;
    text-decoration: none;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    letter-spacing: 1px;
    width: 100%;
    display: block;
    height: 100%;
    padding-top: 21%;	
    font-family: futura-pt, sans-serif;
    font-weight: 400;
}
#boytop a:hover {
	background: #364592;
    color: #fff;	
    border-radius: 50%;	
}
#girltop a:hover {
	background: #eb6b32;
    color: #fff;	
    border-radius: 50%;	
}
/*///*/
.main_creditArea {
	padding: 0;
	width: 95%;
}
.main_credit {
  display: inline;
  vertical-align: middle;
  line-height: 1.8;
  font-size: 1.1rem;
	padding-right: 8%;
}
.main_creditArea table {
	width: 90%;
}
.main_creditArea table tr {
	padding-bottom: 5%;
}
.item .main_creditArea table td.txt {
	width: 80%;
    padding: 4% 0;	
}
.main_creditArea table td.txt {
    width: 60%;
    padding: 2% 0;
}
.main_creditArea table td.txt b {
	font-weight: normal;
	font-size: 1.2rem;	
}
.main_creditArea table td.btn {
	width: 15%;
}
/*///*/
.crdit {
  margin-bottom: 15px;
}
/*////*/
.button_crdit {
  width: 73%;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.7;
  font-size: 1.2rem;
}
.button_bl {
  width: 100%;
  height: auto;
  border: solid 2px #202020;	
  background: #202020;
  text-align: center;
  transition: 1s;
  vertical-align: middle;
  display: inline-block;
  color: #ffffff;
  line-height: 2.5;
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: 1px;
  font-family: noto-sans-cjk-jp, sans-serif;
}
.button_bl:hover {
  background: none;
  border: solid 2px #202020;
  color: #202020 !important;
  transition: .3s;
}

/*////*/
.button_all {
  width: 500px;
  height: 51px;
  border: solid 2px #202020;
  background: #202020;
  text-align: center;
  transition: 1s;
  vertical-align: middle;
  display: block;
  color: #fff;
  line-height: 47px;
  font-size: 1.4rem;
  letter-spacing: 1px;
  font-weight: 400;
  text-decoration: none;
  margin: 0 auto;
}
.button_all:hover {
  background: none;
  border: solid 2px #202020;
  color: #202020 !important;
  transition: .3s;
}

/*////*/
.fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s, transform 1s;
}
.fade.active {
  opacity: 1;
  transform: translateY(0px);
}


.of_img {
    z-index: 3;	
}
.of_img img {
	width: 100%;
	height: auto;	
}
.arrow_anime {

}
.svg__anime {
  display: none;
}
.on .svg__anime {
  display: block;
}

.contents_wrap {
	width: 900px;
	margin: 0 auto;
	padding: 11% 0 0 0;
	position: relative;	
}
#boy {
	position: relative;
	width: 100%;
    margin: 0 auto;
	background: #b3c9a3;
	padding-bottom: 11%;
}
#boy .main_link {
	width: 900px;
	margin: 0 auto 25% auto;
	position: relative;
	height: 300px;
}
#boy .main_link img {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.8s ease, transform 0.8s ease;	
}
#boy .main_link .ttl_img {
	width: 45%;
	position: absolute;
    top: 8%;
    left: 84%;
}
#boy .main_link .ttl_img img {
	width: 25%;
	opacity: 1;
	transform: none;
}
#boy .main_link .link_1 {
	width: 23%;
	position: absolute;
    top: 10%;
    left: 2%;	
}
#boy .main_link .link_2 {
	width: 23%;
	position: absolute;
    top: 28%;
    left: 25%;	
}
#boy .main_link .link_3 {
	width: 23%;
	position: absolute;
    top: -4%;
    left: 51%;
}
#boy .main_link .link_4 {
	width: 23%;
	position: absolute;
    top: 30%;
    left: 70%;	
}
#boy .main_link .link_1 a:hover,
#boy .main_link .link_2 a:hover,
#boy .main_link .link_3 a:hover,
#boy .main_link .link_4 a:hover {
	opacity: 1;
}
#boy .main_link .link_1 img {
	width: 100%;		
	display: block;	
	transition: transform 0.3s ease;	
    animation: fadeInUp 0.8s ease forwards 0.2s;
}
#boy .main_link .link_2 img {
	width: 100%;		
	display: block;
	transition: transform 0.3s ease;		
    animation: fadeInUp 0.8s ease forwards 0.4s;
}
#boy .main_link .link_3 img {
	width: 100%;		
	display: block;	
	transition: transform 0.3s ease;		
    animation: fadeInUp 0.8s ease forwards 0.6s;
}
#boy .main_link .link_4 img {
	width: 100%;		
	display: block;	
	transition: transform 0.3s ease;		
    animation: fadeInUp 0.8s ease forwards 0.8s;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#boy .main_link .link_1 a,
#boy .main_link .link_2 a,
#boy .main_link .link_3 a,
#boy .main_link .link_4 a {
	display: inline-block;
}
#boy .main_link .link_1 a img,
#boy .main_link .link_2 a img,
#boy .main_link .link_3 a img,
#boy .main_link .link_4 a img {
    transition: 0.8s;
}
#boy .main_link .link_1 a img:hover,
#boy .main_link .link_2 a img:hover,
#boy .main_link .link_3 a img:hover,
#boy .main_link .link_4 a img:hover {
    transform: translateX(-10px) rotate(-5deg); /* 左に10px移動し、左に5度回転 */
}
#boy h3 {
	color: #161616;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-style: normal;	
    line-height: 2.1rem;
    font-size: 2rem;	
    text-align: left;
	display: inline-block;
	background: #f2d6a0;
}
#boy .item_1 {
	position: relative;
	width: 100%;
	margin-top: 13%;	
}
#boy .item_1 .of_img {
    width: 480px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 -7%;
}
#boy .item_1 .item_Text {
    width: 410px;
    vertical-align: middle;
    display: inline-block;
    margin: 5% 0 0 5%;
}
#boy .item_2 {
	position: relative;
	width: 100%;
	margin-top: 15%;	
}
#boy .item_2 .item_Text {
    width: 410px;
    vertical-align: middle;
    display: inline-block;
    margin: 5% -1% 0 3%;
}
#boy .item_2 .of_img {
    width: 480px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 -5% 0 0;
}
#boy .item_3 {
	position: relative;
	width: 100%;
	margin-top: 13%;	
}
#boy .item_3 .of_img {
    width: 480px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 -7%;
}
#boy .item_3 .item_Text {
    width: 410px;
    vertical-align: middle;
    display: inline-block;
    margin: 5% 0 0 5%;
}
#boy .item_4 {
	position: relative;
	width: 100%;
	margin-top: 15%;	
}
#boy .item_4 .item_Text {
    width: 410px;
    vertical-align: middle;
    display: inline-block;
    margin: 5% -1% 0 3%;
}
#boy .item_4 .of_img {
    width: 480px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 -5% 0 0;
}

#girl {
	position: relative;
	width: 100%;
    margin: 0 auto;
	background: #e6d9d4;
	padding-bottom: 11%;
}
#girl .main_link {
	width: 900px;
	margin: 0 auto 21% auto;
	position: relative;
	height: 300px;
}
#girl .main_link img {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.8s ease, transform 0.8s ease;	
}
#girl .main_link .ttl_img {
	width: 45%;
	position: absolute;
    top: 9%;
    left: 81%;
}
#girl .main_link .ttl_img img {
	width: 25%;
	opacity: 1;
	transform: none;
}
#girl .main_link .link_1 img {
	width: 100%;		
	display: block;
	transition: transform 0.3s ease;	
    animation: fadeInUp 0.8s ease forwards 0.2s;
}
#girl .main_link .link_2 img {
	width: 100%;		
	display: block;
	transition: transform 0.3s ease;		
    animation: fadeInUp 0.8s ease forwards 0.4s;
}
#girl .main_link .link_3 img {
	width: 100%;		
	display: block;
	transition: transform 0.3s ease;		
    animation: fadeInUp 0.8s ease forwards 0.6s;
}
#girl .main_link .link_4 img {
	width: 100%;		
	display: block;	
	transition: transform 0.3s ease;		
    animation: fadeInUp 0.8s ease forwards 0.8s;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#girl .main_link .link_1 a img,
#girl .main_link .link_2 a img,
#girl .main_link .link_3 a img,
#girl .main_link .link_4 a img {
    transition: 0.8s;
}
#girl .main_link .link_1 img:hover,
#girl .main_link .link_2 img:hover,
#girl .main_link .link_3 img:hover,
#girl .main_link .link_4 img:hover {
    transform: translateX(-10px) rotate(-5deg); /* 左に10px移動し、左に5度回転 */
}
#girl .main_link .link_1 {
	width: 23%;
	position: absolute;
    top: -4%;
    left: 2%;	
}
#girl .main_link .link_2 {
	width: 23%;
	position: absolute;
    top: 18%;
    left: 26%;	
}
#girl .main_link .link_3 {
	width: 23%;
	position: absolute;
    top: 6%;
    left: 52%;
	z-index: 2;
}
#girl .main_link .link_4 {
	width: 23%;
	position: absolute;
    top: 36%;
    left: 70%;	
	z-index: 1;	
}
#girl .main_link .link_1 a,
#girl .main_link .link_2 a,
#girl .main_link .link_3 a,
#girl .main_link .link_4 a {
	display: inline-block;
}
#girl h3 {
	color: #161616;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-style: normal;	
    line-height: 2.1rem;
    font-size: 2rem;	
    text-align: left;
	display: inline-block;	
	background: #fff1cf;
}
#girl .item_1 {
	position: relative;
	width: 100%;
	margin-top: 13%;	
}
#girl .item_1 .of_img {
    width: 480px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 -7%;
}
#girl .item_1 .item_Text {
    width: 410px;
    vertical-align: middle;
    display: inline-block;
    margin: 5% 0 0 5%;
}
#girl .item_2 {
	position: relative;
	width: 100%;
	margin-top: 15%;	
}
#girl .item_2 .item_Text {
    width: 410px;
    vertical-align: middle;
    display: inline-block;
    margin: 5% -1% 0 3%;
}
#girl .item_2 .of_img {
    width: 480px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 -5% 0 0;
}
#girl .item_3 {
	position: relative;
	width: 100%;
	margin-top: 13%;	
}
#girl .item_3 .of_img {
    width: 480px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 -7%;
}
#girl .item_3 .item_Text {
    width: 410px;
    vertical-align: middle;
    display: inline-block;
    margin: 5% 0 0 5%;
}
#girl .item_4 {
	position: relative;
	width: 100%;
	margin-top: 15%;	
}
#girl .item_4 .item_Text {
    width: 410px;
    vertical-align: middle;
    display: inline-block;
    margin: 5% -1% 0 3%;
}
#girl .item_4 .of_img {
    width: 480px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 -5% 0 0;
}


.under_ {
	margin: 10% auto 0 auto;
}