@charset "utf-8";
/* CSS Document */
@media screen and (max-width:1200px) {
	.container .main_con .title{
		height:420px;
	}
	
}
/* ipad pro */
@media screen and (max-width:1025px) {
	.bg_inside{
		background-image: url(../img/bg_long.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 150vh;
	}
	.container .main_con .title{
		height:400px;
	}
	.bg_inside_qa {
		height: 70vh;
	}
}
@media screen and (max-width:992px) {
	.container .main_con .title{
		height:300px;
	}
	.container .logo img{
		width:20%;
	}
	.header{
		display: none;
	}
	.mobile_header,.toggle{
		display: block;
	}
	.mobile_header{
		position: fixed;
		top: 0;
		background: #fff;
		z-index: 120;
		width: 100%;
		height: 70px;
		box-shadow: 2px 0 7px rgba(0,0,0,0.3);
		padding-top: 6px;
	}
	a.logo_inside{
		background-size: contain;
		width: 120px;
		height: 40px;
		margin: 12px 0 0 15px;
	}
	.toggle{
		position: fixed;
		top:14px;
		right:15px;
		z-index:130;
		background:url(../img/m_nav.png);
		height: 45px;
		width: 45px;
	}
	.active{
		background:url(../img/m_close.png);
		background-repeat:no-repeat;
	}
	.mobile_nav{
		position: fixed;
		right:0;
		top:59px;
		z-index:140;
		height:100%;
		width:100%;
		font-size: 1.5em;
		font-weight: bold;
		background: rgba(248,248,248,0.95);
		margin-top: 10px;
		}
	.mobile_nav ul{
		margin: 0;
		padding: 0;
	}
	.mobile_nav li{
		position: relative;
		color: #e75c00;
		list-style: none;
		border-bottom: 1px solid #ccc;
		padding: 20px 0px 20px 16%;
		vertical-align: middle;
		text-align: left;
	}
	.mobile_nav li span{
		width: 54px;
		height: 18px;
		display: inline-block;
		background: url(../img/icon1.png) no-repeat;
		vertical-align: baseline;
		line-height: 40px;
		margin-right: 10px;
	}
	.mobile_nav li span.home{
		width: 25px;
		height: 25px;
		display: inline-block;
		background: url(../img/icon_home.png) no-repeat;
		vertical-align: baseline;
		line-height: 40px;
		margin-right: 10px;
	}
	.mobile_nav ul{list-style: none}li.mnav::before {
		content: "";
		display: inline;
		vertical-align: text-top;
		padding-left:0;
	}
	.mobile_nav a {
		display: block; 
		color: #e75c00;
		text-decoration: none;
	}
	ul.breadcrumb_nav{
		display:none;
	}
	.inside_visual img.left-float{
		left: -3%;
		top: -5%;
		width: 20%;
	}
	.inside_visual img.middle-title{
		margin: 8% auto 8% auto;
		width: 60%;
	}
	.inside_visual img.right-float{
		right: -3%;
		top: 26%;
		width: 33%;
	}
	.paddingtop{
		padding-top:90px;
	}
	.content{
		padding-top:35px;
		padding-bottom:25px;
	}
	.paddingbottom{
		padding-bottom: 0px;
	}
	.content_wrapper{
		min-height: calc(100vh - 50px);
	}
	.container .button_nav {
		width:60%;
		margin: -18% 4% 0% 25%;
	}
	.inside_visual img.sit_parent{
		left: 1%;
		top: 16%;
		width: 18%;
	}
	.inside_visual img.play_child{
		right: 0%;
		top: 39%;
		width: 26%;
	}
	.inside_visual img.qa_human{
		left: 1%;
		top: 25%;
		width: 18%;
	}
	.inside_visual img.qa_birdall{
		right: 0%;
		top: 31%;
		width: 18%;
	}
}

/* ipad */
@media screen and (max-width:769px) {
	.container .button_nav{
		width: 50%;
		margin: -16% 11% 0% 38%;
		float: none;
		display: inline-block;
	}
	.container .main_con .title{
		height:232px;
	}
	.box .box-outline{
		margin: 40px -2% 70px -2%;
		padding: 30px 30px 20px 30px;
	}
	.subnav_box{
		width:calc(100%/2);
	}
	.subnav_inactive,.subnav_active{
	    background: url(../img/blue-btn.png) no-repeat;
		height: 64px;
		width: calc(100% - 2px);
		margin: 2px auto;
		background-position: center;
		background-size: contain;
		font-weight: bold;
		font-size: 0.90em;
		vertical-align: middle;
		line-height: 45px;
	}
	.subnav_inactive:hover,.subnav_active{
		background: url(../img/yellow-btn.png) no-repeat;
		height: 64px;
		width: calc(100% - 2px);
		margin: 2px auto;
		background-position: center;
		background-size: contain;
		vertical-align: middle;
		line-height: 45px;
	}
	img.bird{
		right: 2%;
		bottom: -47%;
	}
	.content img.child{
		right: -14%;
		top: -75%;
	}
	.content img.parent{
		left: -15%;
		bottom: -35%;
	}
	.color-text{
		font-size:0.7em;
	}
	.footer-container {
		font-size: 0.5em;
		padding: 8px 0px;
	}
	.content_wrapper{
		min-height: calc(100vh - 30px);
	}
	.card_ad .card_con{
		width:100%;
		display:block;
		text-align:center;
	}
	.card_ad .card_con .card3{
		background-size:contain;
		width: calc(100% - 2px);
		height: 180px;
		margin: auto 10px;
		text-align: center;
	}
	.card_ad .left{
		text-align:left;
	}
	.content img.va{
		width: 9%;
	}
}
/* ipad */
@media screen and (max-width:640px) {
	.container .main_con {
		max-height: 580px;
	}	
	.mainvisual {
		height: 115vh;
	}
	.container .main_con .title{
		position: relative;
		background-image: url(../img/bg_mobile.png);
		background-position: center top;
		background-repeat: no-repeat;
		width: 100%;
		height: 590px;
		background-size: contain;
		display: block;
		padding: 0px 0px;
	}
	.container .button_nav{
		width: 100%;
		margin: 0% 0% 0% 0%;
	}
	.container a.btn2,.container a.btn1,.container a.btn3,.container a.btn2:hover,.container a.btn1:hover,.container a.btn3:hover {
		width: calc(100% - 2px);
		height:90px;
		background-position: center top;
	}
	.footer-container {
		padding: 10px 0px;
		line-height: 20px;
		letter-spacing: 0;
	}
	.view-on-mobile {
		display: inline-block;
		width: 40px;
	}
	.view-on-destop,.view-on-destop2{
		display: none;
	}
	.content_wrapper{
		min-height: calc(100vh - 50px);
	}
	.content h3.paragraph{
		font-size:0.8em;
		line-height:28px;
	}
	.content ul.paragraph{
		font-size:0.8em;
		line-height:28px;
	}
	.content p.orange_text{
		font-size:0.88em;
	}
	.card_ad h2.blue_main_title span.break{
		display:block;
	}
	.content .width_85{
		width:100%;
		margin:10px auto;
	}
	.content .note_big_con{
		margin-top:30px;
	}
	.content .note_con{
		width:calc(97%/3);
		display:inline-block;
	}
	.content img.note{
		width: calc(100% - 20px);
	}
}

/* phone */
@media screen and (max-width:480px) {
	.container .logo img{
		width:30%;
	}
	.container .main_con {
		max-height: 530px;
	}	
	.mainvisual {
		height: 100vh;
	}
	.footer{
		padding: 8px 20px;
	}
	.footer span.text_footer{
		color:#fff;
		line-height:20px;
		font-size:0.5em;
		margin-right:20px;
		display: block;
		text-align: left;
	}
	.mobile_nav{
		font-size: 1em;
	}
	.bg_inside{
		height: 280vh;
	}
	.inside_visual img.left-float{
		left: -3%;
		top: -35%;
		width: 25%;
	}
	.inside_visual img.middle-title{
		margin: 10% auto 4% auto;
		width: 71%;
	}
	.inside_visual img.right-float{
		right: -2%;
		top: 65%;
		width: 45%;
	}
	img.bird{
		right: 3%;
		bottom: -25%;
		width: 14%;
	}
	.content img.child{
		right: -10%;
		top: -50%;
		width: 30%;
	}
	.content img.parent{
		left: -6%;
		bottom: -30%;
		width: 30%;
	}
	.box{
		margin: auto 10px;
	}
	.box .box-outline{
		padding: 35px 20px 20px 20px;
		margin: 40px -2% 70px -2%;
	}
	.color-text{
		display:block;
		text-align:center;
	}
	.color-text .pink,.color-text .blue,.color-text .orange{
		width: calc(100% - 50px);
		height: auto;
		font-size: 1.4em;
		margin: auto 25px;
	}
	.content .title-top{
		left: calc((100% - 239px)/2);		
	}
	.footer_in{
		position:relative;
		padding: 8px 20px;
	}
	.footer_in span.text_footer{
		color:#fff;
		line-height:20px;
		font-size:0.5em;
		margin-right:20px;
		display: block;
		text-align: left;
	}
	.subnav{
		padding-top:30px;
	}
	.subnav_inactive,.subnav_active{
	    background: url(../img/blue-btn-mobile.png) no-repeat;
		height: 75px;
		width: calc(100% - 2px);
		font-size: 0.82em;
		background-size: contain;
		background-position:center;
		line-height:22px;
		padding-top: 15px;
	}
	.subnav_inactive:hover,.subnav_active{
		background: url(../img/yellow-btn-mobile.png) no-repeat;
		height: 75px;
		width: calc(100% - 2px);
		background-size: contain;
		background-position:center;
		line-height: 22px;
	}
	.subnav_inactive span.break,.subnav_active span.break,.subnav_inactive:hover span.break{
		display:block;
	}
	.con_80 img.hug{
		right: -28%;
		bottom: 11%;
		width: 26%;
	}
	.content tr.table_second,.content tr,.content td,.content th{
		font-size: 0.78em;
		line-height: 19px;
		padding: 5px 5px;
	}
	.content .note_con{
		width:100%;
		display:block;
		text-align: center;
		margin-bottom: 20px;
	}
	.content img.va{
		width: 6.5%;
	}
	.content img.note{
		width: calc(100% - 100px);
	}
	.inside_visual img.sit_parent{
		left: 1%;
		top: 55%;
		width: 19%;
	}
	.inside_visual img.play_child{
		right: 0%;
		top: 72%;
		width: 29%;
	}
	.inside_visual img.qa_human{
		left: 0%;
		top: -7%;
		width: 21%;
	}
	.inside_visual img.qa_birdall{
		right: 0%;
		top: 85%;
		width: 24%;
	}
	img.qa_bird{
		display:none;
	}
	.qa_con{
		width:100%;
	}
}
/* phone */
@media screen and (max-width:420px) {
	.container .main_con {
		max-height: 450px;
	}
	.mainvisual {
		height: 86vh;
	}	
}
/* phone */
@media screen and (max-width:380px) {
	.container .main_con {
		max-height: 410px;
	}
	.mainvisual {
		height: 84vh;
	}
	.content img.child{
		top: -46%;
	}	
	.content .width_85 ul.square_ul{
		padding-inline-start: 30px;
	}
}

/* phone */
@media screen and (max-width:330px) {
	.container .main_con {
		max-height: 345px;
	}	
	.container .main_con .title {
		height: 450px;
	}
	.subnav_inactive,.subnav_active{
		height: 69px;
		font-size: 0.75em;
		line-height:21px;
		padding-top: 15px;
	}
	.subnav_inactive:hover,.subnav_active{
		height: 69px;
		width: calc(100% - 2px);
		background-size: contain;
		background-position:center;
	}
}