@charset "utf-8";

@media screen and (min-width: 769px) and (max-width: 1140px) {
	.main_area_header div,  .main_area_header,
	.movie-content-section,
	.s_01 h2, .bg_gray{
		padding-left: 40px;
		padding-right: 40px;
	}
	.side_gray{
		padding-left: 8%;
	}
	.side_gray::before {
    left: 5.3%;
	}
}








@media screen and (max-width : 768px){

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

	img { width: 100%;}

	#contents_area br.sp,
	#contents_area br.all {display: block !important;}

	.for_pc { display: none; }


	.content_wrapper,
	.content_head .h_banner,
	.content_foot .f_banner,
	.mv_block,
	.content_head .lead_block,
	.content_body,
	.mov_block,
	.content_body .block_inner,
	.content_block_01 .c01_video_area .video_thumb {
		min-width: auto;
		max-width: auto;
		width: auto;
	}

	.content_wrapper {
		padding: 0 0 10vw;
	}



	/* top_h_banners */
	.top_h_banners {
		margin: 4vw 3vw 5vw;
	}
	/*.top_h_banners:after {
		content: "";
		display: block;
		width: 42%;
		height: 1px;
		margin: 0 auto;
		border-top: 1px solid #2b2b2b;
	}*/
	.top_h_banners .h_banner {
		margin: 0 0 6vw;
	}
	.top_h_banners .h_banner div{
		display: flex;
		flex-direction: column-reverse;
	}
	.top_h_banners .h_banner .cp_caption {
		margin: 1em 0 .6em;
		text-align: center;
	}
	.top_h_banners .h_banner .btn_cp_entry {
		margin: 0;
		text-align: center;
	}
	.top_h_banners .h_banner .btn_cp_entry a {
		display: inline-block;
		padding: 1em 3em;
		background-color: #c00;
		color: #fff !important;
		font-size: 14px;
		letter-spacing: .2em;
		text-align: center;
	}

	/* modal */
	.modal_wrapper {
		box-sizing: border-box;
		position: relative;
		background: #fff;
		padding: 20px;
		width: auto;
		width: 96%;
		max-width: 500px;
		margin: 20px auto;
	}

	/* magnificPopup */
	.mfp-bg {
		z-index: 70000;
		background-color: #efefef;
	}
	.mfp-wrap {
		z-index: 70001;
	}

	/* requirements_wrapper */
	.requirements_wrapper {
		line-height: 1.5;
	}
	.requirements_wrapper h2 {
		margin: 0 0 .5em;
		font-size: 16px;
		font-weight: bold;
	}
	.requirements_wrapper dl {
		margin-bottom: 2em;
	}
	.requirements_wrapper dl dt {
		margin-top: 1em;
		font-size: 14px;
		font-weight: bold;
	}
	.requirements_wrapper dl dd {
		margin: .5em 0 1em;
		font-size: 14px;
	}
	.requirements_wrapper h3 {
		margin: 0 0 .5em;
		font-size: 16px;
		font-weight: bold;
	}
	.requirements_wrapper .inquiry_txt {
		margin-bottom: 1em;
	}

	/* sa_event_wrapper */
	.sa_event_wrapper {
		margin-top: 18vw;
		margin-bottom: 15vw;
	}
	.sa_event_wrapper:before {
		content: "";
		display: block;
		width: 42%;
		height: 1px;
		margin: 0 auto 18vw;
		border-top: 1px solid #2b2b2b;
	}
	.sa_event_box {
		background-color: #78d5f9;
		margin-bottom: 4vw;
	}
	.sa_event_wrapper .link_detail {

		font-size: 14px;
		font-weight: bold;
		text-align: center;
	}
	.sa_event_wrapper .link_detail span {
		padding-right: 16px;
		background: url(../img/link_arrow.png) no-repeat right center;
		background-size: 8px auto;
	}

	/* top_main_area */
	.top_main_area {
		/* background-color: #eee; */
		padding: 0;
	}

	/* top_section */
	.top_section {
		margin: 0 3vw;
	}
	.top_section + .top_section {
		margin-top: 18vw;
	}
	.top_section + .top_section:before {
		content: "";
		display: block;
		width: 42%;
		height: 1px;
		margin: 0 auto 18vw;
		border-top: 1px solid #2b2b2b;
	}
	.heading_type01 {
		margin-bottom: 2.4vw;
		font-size: 24px;
		font-weight: bold;
		text-align: center;
	}
	.lead_type01 {
		margin-bottom: 7vw;
		font-size: 14px;
		text-align: center;
		line-height: 1.5;
	}

	/* mov_block */
	.mov_block {
		margin: 0;
		padding: 8vw 4vw 4vw;
		background-color: #fff;
	}
	/* .mov_block .mov_list {

	} */
	.mov_block .mov_list .mov_item {
		margin-bottom: 6vw;
	}
	/* .mov_block .mov_list .mov_item .thumb {

	} */

	.mov_block .mov_list .mov_item .modal_mov_open a::after {
		content: none;
	}
	.bg_gray {

    margin-top: 6px;
	}
	/* ------------------------------
	#movie_modal
	------------------------------ */
	#movie_modal{
		width: 100%;
		height: 100%;
		display: none;
		visibility: hidden;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 65535;
	}

	#movie_modal .movie_overlay{
		width: 100%;
		height: 100%;
		background-color: #fff;
		opacity: 1;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#movie_modal .movie_btn_close{
		width: 20px;
		height: 20px;
		margin: 0 0 0 0;
		background-image:url(../img/parts_modal_close.png);
		background-repeat: no-repeat;
		background-size: 20px;
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 2;
		cursor: pointer;
		transition: opacity .1s ease;
	}

	#movie_modal .movie_btn_close:hover{
		opacity: .7;
	}

	#movie_modal_inner{
		margin: 0 auto;
		opacity: 0;
		text-align: center;
		position: fixed;
		top: 0;
		z-index: 2;
	}

	#movie_modal_data{
		width: 100%;
	}
	#movie_modal {
		position: fixed;
		text-align: center;
		white-space: nowrap;
	}
	#movie_modal::after,
	#movie_modal_inner {
		display: inline-block;
		vertical-align: middle;
	}
	#movie_modal::after {
		content: '';
		width: 0;
		height: 100%;
	}
	#movie_modal_inner {
		position: relative;
		width: 90%;
		max-width: 800px;
	}
	#movie_modal_data {
		position: relative;
		padding-top: 56.25%;
	}
	#movie_modal_data iframe {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}



	/* top_f_banners */
	.top_f_banners {
		margin-bottom: 8vw;
	}
	.top_f_banners .next_update_wrapper {
		background-color: #4c5ca6;
		padding: 5vw 0;
	}
	.top_f_banners .next_update_wrapper .next_inner {
		margin: 0 3vw;
	}
	.top_f_banners .next_update_wrapper .next_inner .next_text01 {
		font-size: 24px;
		font-weight: bold;
		color: #fff;
		text-align: center;
		margin-bottom: 2vw;
	}
	.top_f_banners .next_update_wrapper .next_inner .next_text02 {
		font-size: 12px;
		color: #fff;
		text-align: center;
		line-height: 1.5;
	}

	.top_f_banners .f_banner {
		margin: 12vw 3vw 4vw;
	}


	/* *********************** */
	.top_h2 {
    font-size: 24px;
    margin-bottom: 20px;
	}
	.main_area_header div{
		width: 97%;
		margin: 0 auto;
	}
	.main_area_header{
		padding: 91px 4% 4px;
	}
	.main_area_header_logo{
		width: 80px;
	}
	.main_area_header_logo.emotional{
		width: 116px;
	}

	.main_area_header_title {
    font-size: max(3.3vw, 20px);
	}
	.style_photo{
		font-size: 24px;
		flex-direction: column;
	}
	.style_photo .box {
    width: 90%;
	}
	.style_photo .box:last-child{
		margin-top: 56px;
	}
	.annotation{
		width: 90%;
		margin: 0 auto;
	}
	.recommend_box h4{
		font-size: max(17px, 3.7vw);
	  line-height: 20px;
	}
}

@media screen and (max-width : 500px){
	.recommend a {
	  margin-right: 0;
	}
	.main_area_header_logo{
		width: 76px;
	}
	.top_h2 {
    margin-bottom: 10px;
	}
}