@charset "UTF-8";
/* CSS Document */

@media (min-width:1051px) {
	/*一枚画像の場合
	#index #main_image{text-align:center;padding: 20px 0;margin: 0 auto}
	#index #main_image img{width: 95%;max-width: 1200px}
	*/
	/*スライダーの場合*/	
	#index #main_image{margin: 0 auto;padding: 20px 0;}
	#index #main_image .image_slider {	width:100%;height: 430px; margin: 0 auto;}	
	#index #main_image .image_slider div{position: relative;width:100%;height: 100%;margin: 0 auto;padding: 0;text-align: center}		
	#index #main_image .image_slider div img{height: 100%;margin: 0 auto;padding: 0;object-fit: cover}
		
	#index #info_special{background:#feffe8;padding: 50px 0 50px 0;}
	#index #info_special a{display:block;width: 850px;height: 200px;margin: 0 auto;padding: 0 0 0 0px;background: #3ecbe3;border-radius: 20px;}
	#index #info_special a .inner{display:block;position: relative;width: 100%;height: 200px;}
	#index #info_special a .inner .camera{display:block;position: absolute;top: -20px;left: 20px;width:220px;}
	#index #info_special a .inner .camera img{width: 100%;}	
	#index #info_special a .inner .text_area{display:block;position: absolute;top: 50%;transform: translateY(-50%);left:280px;color: white;width: 400px;}
	#index #info_special a .inner .text_area .title span{display:block;font-size: 18px;letter-spacing: 1px}
	#index #info_special a .inner .text_area .title{display:block;font-size: 20px;letter-spacing: 1px;margin-bottom: 10px;font-weight: 600}
	#index #info_special a .inner .text_area .banner{position: relative;display:block;width:130px;background:white;border-radius: 50px;padding: 8px 20px;font-size: 14px;letter-spacing: 1px;color:  #7a6a56;font-weight: 500}
	#index #info_special a .inner .text_area .banner::before{content: '\f105';position: absolute;top: 50%;transform: translateY(-50%);right: 10%;font-family: "Font Awesome 5 Free";  font-weight: 900; }	
	#index #info_special a .inner .photo{display:block;position: absolute;top: 0px;right: 0%;width: 200px;height: 100%;border-radius: 0 20px 20px 0;overflow: hidden}
	#index #info_special a .inner .photo img{width: 100%;height: 100%;object-fit: cover;}	
	#index #info_special a:hover{background:#f8b62d;}
	
	
	#index #new_release{background:#fffcef;padding: 80px 0;}
	#index #new_release .inner{width:600px;margin: 0 auto 30px auto;display: flex;}
	#index #new_release .inner .cover{text-align: center; display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; display: flex;-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center;        vertical-align: middle;	order: 2;}
	#index #new_release .inner .cover figure{width:260px; margin: 0 auto;padding: 0;}
	#index #new_release .inner .cover figure img{width:100%;}
	
	#index #new_release .inner .title_area{text-align: center;width: 340px; display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; display: flex;-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center;        vertical-align: middle;	order: 1;}
	#index #new_release .inner .title_area .title h2{font-size: 48px;color: #67c7d8;margin: 0 auto 0px auto;font-weight: 300;}
	#index #new_release .inner .title_area .title .sub_title{;margin: 0 auto 60px auto;color: #474648;font-size: 18px;}
	#index #new_release .inner .title_area .title .number{position: relative;font-size: 50px;color: #474648}
	#index #new_release .inner .title_area .title .number span{font-size:40px}
	#index #new_release .inner .title_area .title .number::before{content:'';position: absolute;top: -30px;left: 50%;transform: translateX(-50%);width: 50px;height: 1px;background: #67C6D7}
	#index #new_release .inner .title_area .title .season{font-size: 28px;color: #474648;margin: 0 auto 20px auto}
	#index #new_release .inner .title_area .title .link a{display: block;margin: 0 auto 10px auto; padding:14px 0px 14px 0px;color: white;font-size: 17px;text-align: center;text-decoration: none;border-radius: 3px;background:#67c7d8}
	#index #new_release .inner .title_area .title .link a .fa-angle-right{margin-left: 10px}
	#index #new_release .inner .title_area .title .link a:hover{background:#F84A56}
	#index #new_release .inner .title_area .title .download_all a{display: block;margin: 0; padding:14px 50px 14px 30px;color: white;font-size: 17px;text-align: center;text-decoration: none;border-radius: 3px;background:#F27400 url("../img/download_icon.png") no-repeat;background-size:auto 15px;background-position: 90% 50%}
	#index #new_release .inner .title_area .title .download_all a:hover{background:#F84A56 url("../img/download_icon.png") no-repeat;background-size:auto 15px;background-position: 90% 50%;}
	
	#index #news_topics_index{padding: 50px 0;}
	#index #news_topics_index .inner{position: relative;width:1000px;margin: 0 auto 0px auto;}
	#index #news_topics_index .inner::before{position:absolute;top: 0%;left: -50px;/*transform: translateY(-50%); */content:'';width:1px;height:100%;background:#67c7d8;}
	#index #news_topics_index .inner h3{font-size: 38px;color: #67c7d8;margin: 0 auto 0px auto;font-weight: 300;}
	#index #news_topics_index .inner .sub_title{;margin: 0 auto 30px auto;color: #474648;font-size: 16px;}
	
	#index #news_topics_index .inner #wpsp-55 .wp-show-posts-single{border-bottom:1px dotted #898989;padding: 0 0 10px 0}
	#index #news_topics_index .inner #wpsp-55 .wp-show-posts-single:last-of-type{border-bottom:none;}
	#index #news_topics_index .inner #wpsp-55 a{color: #595757;text-decoration: underline}
	#index #news_topics_index .inner #wpsp-55 a:hover{color:#67c7d8}
	#index #news_topics_index .inner #wpsp-55 .wp-show-posts-entry-title a{padding:5px 0 0 0;}
	
	#index #news_topics_index .inner #banner a{display: block;width:260px;margin: 0 0 0px auto; padding:14px 0px 14px 0px;color: white;font-size: 15px;text-align: center;text-decoration: none;border-radius: 3px;background:#67c7d8}
	#index #news_topics_index .inner #banner a .fa-angle-right{margin-left: 10px}
	#index #news_topics_index .inner #banner a:hover{background:#F84A56;}
	
	#index #contents{background:#feffe8;padding: 80px 0;}
	#index #contents .inner{width:980px;margin: 0 auto 0px auto;}
	#index #contents .inner h4{position: relative;width: 100%;font-size: 48px;color: #f8b62d;margin: 0 auto 50px auto;padding:50px 0 0 0;font-weight: 300;text-align: center}
	#index #contents .inner h4::before{position:absolute;top: 0%;left: 50%;transform: translateX(-50%); content:'';width:60px;height:1px;background:#f8b62d;}
	#index #contents .inner #list_area{font-size: 0}
	#index #contents .inner #list_area .list{display: inline-block;margin: 0 10px 20px 0;vertical-align: top}
	#index #contents .inner #list_area .list:nth-of-type(2n){margin: 0  0 20px 10px;}
	#index #contents .inner #list_area .list .flex_area{display: flex;}
	#index #contents .inner #list_area .list .flex_area a{display:block;width: 480px;height: 160px;margin: 0; padding:0px 5% 0px 55%;color:#f8b62d;font-size: 22px;text-decoration: none;border-radius: 10px;box-sizing: border-box;border: 2px solid #f8b62d;display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; display: flex;-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center;        vertical-align: middle;}
	#index #contents .inner #list_area .list .flex_area a .blank{}
	#index #contents .inner #list_area .list .flex_area a:hover{color:#67c7d8;border: 2px solid #67c7d8;opacity: 0.5}
	#index #contents .inner #list_area .list .flex_area a#how_communication_works{background:white url("../img/how_communication_works/how_communication_works_header.png") no-repeat;background-position: 5% 50%;background-size:auto 80%;}
	#index #contents .inner #list_area .list .flex_area a#world{background:white url("../img/world/world_header.png") no-repeat;background-position: 5% 50%;background-size:auto 80%;}
	#index #contents .inner #list_area .list .flex_area a#book{background:white url("../img/book/book_header.png") no-repeat;background-position: 5% 50%;background-size:auto 90%;}
	#index #contents .inner #list_area .list .flex_area a#paper{background:white url("../img/paper/paper_header.png") no-repeat;background-position: 5% 50%;background-size:auto 80%;}
	#index #contents .inner #list_area .list .flex_area a#award{background:white url("../img/award/award_header.png") no-repeat;background-position: 5% 50%;background-size:auto 90%;}
	#index #contents .inner #list_area .list .flex_area a#experiment_work{background:white url("../img/experiment_work/experiment_work_header.png") no-repeat;background-position: 5% 50%;background-size:auto 80%;}
	#index #contents .inner #list_area .list .flex_area a#english_course{background:white url("../img/english_course/english_course_header.png") no-repeat;background-position: 5% 50%;background-size:auto 85%;}
	#index #contents .inner #list_area .list .flex_area a#museum{background:white url("../img/museum/museum_header.png") no-repeat;background-position: 5% 50%;background-size:auto 90%;}
	
	#photo_index{padding:120px 0 80px 0;}
	#photo_index .inner{width:900px;margin: 0 auto 30px auto;display: flex;}	
	#photo_index .inner .photo_area{width: 360px;margin: 0;padding: 0; display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; display: flex;-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center;        vertical-align: middle;	}
	#photo_index .inner .photo_area figure{width:100%; margin: 0 auto;padding: 0;}
	#photo_index .inner .photo_area figure a{position: relative;display: block;height: 220px;font-family: din-condensed, sans-serif;font-weight: 300;font-style: normal;border-radius: 20px;z-index: 1;overflow: hidden;box-sizing: border-box;border:6px solid #73d8b6}
	#photo_index .inner .photo_area figure a img{width:100%; height: 220px;object-fit: cover;margin: 0 ;padding: 0;transition:1s all}	
	#photo_index .inner .photo_area figure a::before{content:'';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width:100px;height: 100px;background: url("../img/photo/photo_icon.png") no-repeat;background-size:100% auto;background-position: 50% 50%;z-index: 1}
	#photo_index .inner .photo_area figure a::after{content:'Look!';position: absolute;top: 72%;left: 0%;display: block;width: 100%; font-size: 28px;color:white;text-align: center;}		
	#photo_index .inner .photo_area figure a:hover img{transform: scale(1.2, 1.2);    transition: 1s all;}
	#photo_index .inner .photo_area figure a:hover{opacity:0.5;}
	
	#photo_index .inner .title_area{text-align: center;width: 540px; display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; display: flex;-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center;        vertical-align: middle;	order: 1;}
	#photo_index .inner .title_area .title .sub_title{position: relative;;margin: 0 auto 0px auto;color:#73d8b6;font-size: 25px;}
	#photo_index .inner .title_area .title .sub_title::before{content:'';position: absolute;top: -30px;left: 50%;transform: translateX(-50%);width: 50px;height: 1px;background: #67C6D7}
	#photo_index .inner .title_area .title h5{font-size: 28px;color: #474648;margin: 0 auto 20px auto;font-weight:normal;}	
	#photo_index .inner .title_area .title .number{font-size: 50px;color: #474648}
	#photo_index .inner .title_area .title .number span{font-size:40px}	
	#photo_index .inner .title_area .title .season{font-size: 28px;color: #474648;margin: 0 auto 20px auto}
	#photo_index .inner .title_area .title figure{width:40%; margin: 0 auto 20px auto;padding: 0;}
	#photo_index .inner .title_area .title figure img{width:100%;}
	#photo_index .inner .title_area .title .link a{display: block;width:60%; margin: 0 auto 0px auto; padding:14px 0px 14px 0px;color: white;font-size: 17px;text-align: center;text-decoration: none;border-radius: 3px;background:#73d8b6}
	#photo_index .inner .title_area .title .link a .fa-angle-right{margin-left: 10px}
	#photo_index .inner .title_area .title .link a:hover{background:#F84A56}
}

@media screen and (min-width:701px) and ( max-width:1050px)  {
	/*一枚画像の場合
	#index #main_image{text-align:center;padding: 20px 0;margin: 0 auto}
	#index #main_image img{width: 95%;max-width: 1200px}
	*/
	
	/*スライダーの場合*/	
	#index #main_image{margin: 0 auto;padding: 20px 0;}
	#index #main_image .image_slider {	width:90%;/*height:330px; */margin: 0 auto;}	
	#index #main_image .image_slider div{position: relative;width:100%;height: 100%;margin: 0 auto;padding: 0;text-align: center}		
	#index #main_image .image_slider div img{width:100%;/*height: 100%;*/margin: 0 auto;padding: 0;/*object-fit: cover*/}
	
	#index #info_special{background:#feffe8;padding: 50px 0 50px 0;}
	#index #info_special a{display:block;width:60%;margin: 0 auto;padding: 0 0 0 0px;background: #3ecbe3;border-radius: 20px;text-decoration: none;}
	#index #info_special a .inner{display:block;position: relative;width: 100%;}
	#index #info_special a .inner .camera{display:block;position: absolute;top:45%;right: -80px;width:50%;max-width: 200px}
	#index #info_special a .inner .camera img{width: 100%;}	
	#index #info_special a .inner .text_area{display:block;color: white;width:80%;margin: 0 auto 20px auto;padding:30px 0 0 0;}
	#index #info_special a .inner .text_area .title span{display:block;font-size: 16px;letter-spacing: 1px}
	#index #info_special a .inner .text_area .title{display:block;font-size: 18px;letter-spacing: 1px;margin-bottom: 10px;font-weight: 600}
	#index #info_special a .inner .text_area .banner{position: relative;display:block;width:30%;background:white;border-radius: 50px;padding: 5px 20px;font-size: 14px;letter-spacing: 1px;color:  #7a6a56;font-weight: 500}
	#index #info_special a .inner .text_area .banner::before{content: '\f105';position: absolute;top: 50%;transform: translateY(-50%);right: 10%;font-family: "Font Awesome 5 Free";  font-weight: 900; }	
	#index #info_special a .inner .photo{display:block;width: 100%;height: 250px;border-radius: 0 0px 20px 20px;overflow: hidden}
	#index #info_special a .inner .photo img{width: 100%;height: 100%;object-fit: cover;}	
	#index #info_special a:hover{background:#f8b62d;}
	
	
	#index #new_release{background:#fffcef;padding: 60px 0;}
	#index #new_release .inner{width:600px;margin: 0 auto 30px auto;display: flex;}
	#index #new_release .inner .cover{text-align: center; display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; display: flex;-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center;        vertical-align: middle;	order: 2;}
	#index #new_release .inner .cover figure{width:260px; margin: 0 auto;padding: 0;}
	#index #new_release .inner .cover figure img{width:100%;}
	
	#index #new_release .inner .title_area{text-align: center;width: 340px; display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; display: flex;-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center;        vertical-align: middle;	order: 1;}
	#index #new_release .inner .title_area .title h2{font-size: 45px;color: #67c7d8;margin: 0 auto 0px auto;font-weight: 300;}
	#index #new_release .inner .title_area .title .sub_title{;margin: 0 auto 50px auto;color: #474648;font-size: 18px;}
	#index #new_release .inner .title_area .title .number{position: relative;font-size: 45px;color: #474648}
	#index #new_release .inner .title_area .title .number span{font-size:35px}
	#index #new_release .inner .title_area .title .number::before{content:'';position: absolute;top: -30px;left: 50%;transform: translateX(-50%);width: 50px;height: 1px;background: #67C6D7}
	#index #new_release .inner .title_area .title .season{font-size: 25px;color: #474648;margin: 0 auto 20px auto}
	#index #new_release .inner .title_area .title .link a{display: block;margin: 0 auto 10px auto; padding:14px 0px 14px 0px;color: white;font-size: 17px;text-align: center;text-decoration: none;border-radius: 3px;background:#67c7d8}
	#index #new_release .inner .title_area .title .link a .fa-angle-right{margin-left: 10px}
	#index #new_release .inner .title_area .title .link a:hover{background:#F84A56}
	#index #new_release .inner .title_area .title .download_all a{display: block;margin: 0; padding:14px 50px 14px 30px;color: white;font-size: 17px;text-align: center;text-decoration: none;border-radius: 3px;background:#F27400 url("../img/download_icon.png") no-repeat;background-size:auto 15px;background-position: 90% 50%}
	#index #new_release .inner .title_area .title .download_all a:hover{background:#F84A56 url("../img/download_icon.png") no-repeat;background-size:auto 15px;background-position: 90% 50%;}
	
	#index #news_topics_index{padding: 50px 0;}
	#index #news_topics_index .inner{position: relative;width:80%;margin: 0 auto 0px auto;}
	#index #news_topics_index .inner::before{position:absolute;top: 0%;left: -50px;/*transform: translateY(-50%); */content:'';width:1px;height:100%;background:#67c7d8;}
	#index #news_topics_index .inner h3{font-size: 38px;color: #67c7d8;margin: 0 auto 0px auto;font-weight: 300;}
	#index #news_topics_index .inner .sub_title{;margin: 0 auto 30px auto;color: #474648;font-size: 16px;}
	
	#index #news_topics_index .inner #wpsp-55 .wp-show-posts-single{border-bottom:1px dotted #898989;padding: 0 0 10px 0}
	#index #news_topics_index .inner #wpsp-55 .wp-show-posts-single:last-of-type{border-bottom:none;}
	#index #news_topics_index .inner #wpsp-55 a{color: #595757;text-decoration: underline}
	#index #news_topics_index .inner #wpsp-55 a:hover{color:#67c7d8}
	#index #news_topics_index .inner #wpsp-55 .wp-show-posts-entry-title a{padding:5px 0 0 0;}
	
	#index #news_topics_index .inner #banner a{display: block;width:260px;margin: 0 0 0px auto; padding:14px 0px 14px 0px;color: white;font-size: 15px;text-align: center;text-decoration: none;border-radius: 3px;background:#67c7d8}
	#index #news_topics_index .inner #banner a .fa-angle-right{margin-left: 10px}
	#index #news_topics_index .inner #banner a:hover{background:#F84A56;}
	
	#index #contents{background:#feffe8;padding: 60px 0;}
	#index #contents .inner{width:680px;margin: 0 auto 0px auto;}
	#index #contents .inner h4{position: relative;width: 100%;font-size: 38px;color: #f8b62d;margin: 0 auto 40px auto;padding:30px 0 0 0;font-weight: 300;text-align: center}
	#index #contents .inner h4::before{position:absolute;top: 0%;left: 50%;transform: translateX(-50%); content:'';width:60px;height:1px;background:#f8b62d;}
	#index #contents .inner #list_area{font-size: 0; text-align: center;}
	#index #contents .inner #list_area .list{display: inline-block;margin: 0 5px 10px 0;vertical-align: top}
	#index #contents .inner #list_area .list:nth-of-type(2n){margin: 0  0 10px 5px;}
	#index #contents .inner #list_area .list .flex_area{/*display: flex;*/}
	#index #contents .inner #list_area .list .flex_area a{display:block;width:330px;/*width: 600px;*/height: 160px;margin: 0; padding:0px 2% 0px 52%;color:#f8b62d;font-size: 20px;letter-spacing: 0;text-decoration: none;border-radius: 10px;box-sizing: border-box;border: 2px solid #f8b62d;display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; /*display: flex;*/-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center; vertical-align: middle; text-align: left;}
	#index #contents .inner #list_area .list .flex_area a .blank{}
	#index #contents .inner #list_area .list .flex_area a:hover{color:#67c7d8;border: 2px solid #67c7d8;opacity: 0.5}
	#index #contents .inner #list_area .list .flex_area a#how_communication_works{background:white url("../img/how_communication_works/how_communication_works_header.png") no-repeat;background-position: 5% 50%;background-size:auto 50%;}
	#index #contents .inner #list_area .list .flex_area a#world{background:white url("../img/world/world_header.png") no-repeat;background-position: 5% 50%;background-size:auto 50%;}
	#index #contents .inner #list_area .list .flex_area a#book{background:white url("../img/book/book_header.png") no-repeat;background-position: 0% 50%;background-size:auto 70%;}
	#index #contents .inner #list_area .list .flex_area a#paper{background:white url("../img/paper/paper_header.png") no-repeat;background-position: 0% 50%;background-size:auto 60%;}
	#index #contents .inner #list_area .list .flex_area a#award{background:white url("../img/award/award_header.png") no-repeat;background-position: 5% 50%;background-size:auto 70%;}
	#index #contents .inner #list_area .list .flex_area a#experiment_work{background:white url("../img/experiment_work/experiment_work_header.png") no-repeat;background-position: 5% 50%;background-size:auto 50%;}
	#index #contents .inner #list_area .list .flex_area a#english_course{background:white url("../img/english_course/english_course_header.png") no-repeat;background-position: 5% 50%;background-size:auto 55%;}
	#index #contents .inner #list_area .list .flex_area a#museum{background:white url("../img/museum/museum_header.png") no-repeat;background-position: 5% 50%;background-size:auto 60%;}
	
	#photo_index{padding:80px 0 80px 0;}
	#photo_index .inner{width:80%;margin: 0 auto 30px auto;display: flex;}	
	#photo_index .inner .photo_area{width: 60%;margin: 0;padding: 0; display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; display: flex;-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center;        vertical-align: middle;	}
	#photo_index .inner .photo_area figure{width:100%; margin: 0 auto;padding: 0;}
	#photo_index .inner .photo_area figure a{position: relative;display: block;height: 220px;font-family: din-condensed, sans-serif;font-weight: 300;font-style: normal;border-radius: 20px;z-index: 1;overflow: hidden;box-sizing: border-box;border:6px solid #73d8b6}
	#photo_index .inner .photo_area figure a img{width:100%; height: 220px;object-fit: cover;margin: 0 ;padding: 0;transition:1s all}	
	#photo_index .inner .photo_area figure a::before{content:'';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width:100px;height: 100px;background: url("../img/photo/photo_icon.png") no-repeat;background-size:100% auto;background-position: 50% 50%;z-index: 1}
	#photo_index .inner .photo_area figure a::after{content:'Look!';position: absolute;top: 72%;left: 0%;display: block;width: 100%; font-size: 28px;color:white;text-align: center;}		
	#photo_index .inner .photo_area figure a:hover img{transform: scale(1.2, 1.2);    transition: 1s all;}
	#photo_index .inner .photo_area figure a:hover{opacity:0.5;}
	
	#photo_index .inner .title_area{text-align: center;width: 540px; display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; display: flex;-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center;        vertical-align: middle;	order: 1;}
	#photo_index .inner .title_area .title .sub_title{position: relative;;margin: 0 auto 0px auto;color:#73d8b6;font-size: 25px;}
	#photo_index .inner .title_area .title .sub_title::before{content:'';position: absolute;top: -30px;left: 50%;transform: translateX(-50%);width: 50px;height: 1px;background: #67C6D7}
	#photo_index .inner .title_area .title h5{font-size: 25px;color: #474648;margin: 0 auto 20px auto;font-weight:normal;}	
	#photo_index .inner .title_area .title .number{font-size: 50px;color: #474648}
	#photo_index .inner .title_area .title .number span{font-size:35px}	
	#photo_index .inner .title_area .title .season{font-size: 25px;color: #474648;margin: 0 auto 20px auto}
	#photo_index .inner .title_area .title figure{width:40%; margin: 0 auto 20px auto;padding: 0;}
	#photo_index .inner .title_area .title figure img{width:100%;}
	#photo_index .inner .title_area .title .link a{display: block;width:100%; margin: 0 auto 0px auto; padding:14px 0px 14px 0px;color: white;font-size: 17px;text-align: center;text-decoration: none;border-radius: 3px;background:#73d8b6}
	#photo_index .inner .title_area .title .link a .fa-angle-right{margin-left: 10px}
	#photo_index .inner .title_area .title .link a:hover{background:#F84A56}
}

@media (max-width: 700px) {
	/*一枚画像の場合
	#index #main_image{text-align:center;padding: 20px 0;margin: 0 auto}
	#index #main_image img{width: 95%;}
	*/
	/*スライダーの場合*/	
	#index #main_image{margin: 0 auto;padding: 20px 0;}
	#index #main_image .image_slider {	width:90%;/*height:330px; */margin: 0 auto;}	
	#index #main_image .image_slider div{position: relative;width:100%;height: 100%;margin: 0 auto;padding: 0;text-align: center}		
	#index #main_image .image_slider div img{width:100%;/*height: 100%;*/margin: 0 auto;padding: 0;/*object-fit: cover*/}
	
	#index #info_special{background:#feffe8;padding:30px 0 30px 0;}
	#index #info_special a{display:block;width:80%;margin: 0 auto;padding: 0 0 0 0px;background: #3ecbe3;border-radius: 10px;text-decoration: none;}
	#index #info_special a .inner{display:block;position: relative;width: 100%;}
	#index #info_special a .inner .camera{display:block;position: absolute;top:65%;left: 5%;width:48%;max-width:250px}
	#index #info_special a .inner .camera img{width: 100%;}	
	#index #info_special a .inner .text_area{display:block;color: white;width:80%;margin: 0 auto 20px auto;padding:20px 0 0 0;}
	#index #info_special a .inner .text_area .title span{display:block;font-size: 14px;letter-spacing: 0px}
	#index #info_special a .inner .text_area .title{display:block;font-size: 16px;letter-spacing: 0px;margin-bottom: 10px;font-weight: 600}
	#index #info_special a .inner .text_area .banner{position: relative;display:block;width:50%;background:white;border-radius: 50px;padding: 3px 20px;font-size: 12px;letter-spacing: 0px;color:  #7a6a56;font-weight: 500}
	#index #info_special a .inner .text_area .banner::before{content: '\f105';position: absolute;top: 50%;transform: translateY(-50%);right: 10%;font-family: "Font Awesome 5 Free";  font-weight: 900; }	
	#index #info_special a .inner .photo{display:block;width: 100%;height: 150px;border-radius: 0 0px 10px 10px;overflow: hidden}
	#index #info_special a .inner .photo img{width: 100%;height: 100%;object-fit: cover;}	
	#index #info_special a:hover{background:#f8b62d;}
	
	#index #new_release{background:#fffcef;padding: 30px 0 10px 0;}
	#index #new_release .inner{width:80%;margin: 0 auto 30px auto;/*display: flex;*/}
	#index #new_release .inner .cover{text-align:center;margin: 0 auto 20px auto;}
	#index #new_release .inner .cover figure{width:100%;max-width: 200px;; margin: 0 auto;padding: 0;}
	#index #new_release .inner .cover figure img{width:100%;}
	
	#index #new_release .inner .title_area{text-align: center; margin: 0px auto 0 auto;}
	#index #new_release .inner .title_area .title h2{font-size: 30px;color: #67c7d8;margin: 0 auto 0px auto;font-weight: 300;}
	#index #new_release .inner .title_area .title .sub_title{;margin: 0 auto 20px auto;color: #474648;font-size: 16px;}
	#index #new_release .inner .title_area .title .number{position: relative;font-size: 40px;color: #474648}
	#index #new_release .inner .title_area .title .number span{font-size:30px}
	#index #new_release .inner .title_area .title .number::before{content:'';position: absolute;top: -15px;left: 50%;transform: translateX(-50%);width: 50px;height: 1px;background: #67C6D7}
	#index #new_release .inner .title_area .title .season{font-size: 20px;color: #474648;margin: 0 auto 20px auto}
	#index #new_release .inner .title_area .title .link a{display: block;margin: 0 auto 10px auto; padding:14px 0px 14px 0px;color: white;font-size: 16px;text-align: center;text-decoration: none;border-radius: 3px;background:#67c7d8}
	#index #new_release .inner .title_area .title .link a .fa-angle-right{margin-left: 10px}
	#index #new_release .inner .title_area .title .link a:hover{background:#F84A56}
	#index #new_release .inner .title_area .title .download_all a{display: block;margin: 0; padding:14px 40px 14px 15px;color: white;font-size: 16px;text-align: center;text-decoration: none;border-radius: 3px;background:#F27400 url("../img/download_icon.png") no-repeat;background-size:auto 15px;background-position: 90% 50%}
	#index #new_release .inner .title_area .title .download_all a:hover{background:#F84A56 url("../img/download_icon.png") no-repeat;background-size:auto 15px;background-position: 90% 50%;}
	
	#index #news_topics_index{padding: 30px 0;}
	#index #news_topics_index .inner{width:80%;margin: 0 auto 0px auto;}
	#index #news_topics_index .inner h3{font-size: 30px;color: #67c7d8;margin: 0 auto 0px auto;font-weight: 300;}
	#index #news_topics_index .inner .sub_title{;margin: 0 auto 15px auto;color: #474648;font-size: 14px;}
	
	#index #news_topics_index .inner #wpsp-55 .wp-show-posts-single{border-bottom:1px dotted #898989;padding: 0 0 10px 0;font-size: 14px}
	#index #news_topics_index .inner #wpsp-55 .wp-show-posts-single:last-of-type{border-bottom:none;}
	#index #news_topics_index .inner #wpsp-55 a{color: #595757;text-decoration: underline}
	#index #news_topics_index .inner #wpsp-55 a:hover{color:#67c7d8}
	#index #news_topics_index .inner #wpsp-55 .wp-show-posts-entry-title a{padding:5px 0 0 0;}
	
	#index #news_topics_index .inner #banner a{display: block;margin:10px auto 0 auto; padding:14px 0px 14px 0px;color: white;font-size: 14px;letter-spacing: 0;text-align: center;text-decoration: none;border-radius: 3px;background:#67c7d8}
	#index #news_topics_index .inner #banner a .fa-angle-right{margin-left: 10px}
	#index #news_topics_index .inner #banner a:hover{background:#F84A56;}
	
	#index #contents{background:#feffe8;padding: 30px 0;}
	#index #contents .inner{width:85%;margin: 0 auto 0px auto;}
	#index #contents .inner h4{position: relative;width: 100%;font-size: 30px;color: #f8b62d;margin: 0 auto 10px auto;padding:20px 0 0 0;font-weight: 300;text-align: center}
	#index #contents .inner h4::before{position:absolute;top: 0%;left: 50%;transform: translateX(-50%); content:'';width:60px;height:1px;background:#f8b62d;}
	#index #contents .inner #list_area{font-size: 0; text-align: center;}
	#index #contents .inner #list_area .list{margin: 0 auto 10px auto; width: 100%;}	
	#index #contents .inner #list_area .list .flex_area{/*display: flex;*/}
	#index #contents .inner #list_area .list .flex_area a{display:block;height: 100px;margin: 0; padding:0px 2% 0px 50%;color:#f8b62d;font-size: 16px;letter-spacing: 0px;text-decoration: none;border-radius: 10px;box-sizing: border-box;border: 2px solid #f8b62d;display:-webkit-box;display:-ms-flexbox; display: -webkit-flex; /*display: flex;*/-webkit-box-align: center;  -ms-flex-align: center;-webkit-align-items: center;  align-items: center; vertical-align: middle; text-align: left;}
	#index #contents .inner #list_area .list .flex_area a .blank{}
	#index #contents .inner #list_area .list .flex_area a:hover{color:#67c7d8;border: 2px solid #67c7d8;opacity: 0.5}
	#index #contents .inner #list_area .list .flex_area a#how_communication_works{background:white url("../img/how_communication_works/how_communication_works_header.png") no-repeat;background-position: 5% 50%;background-size:auto 70%;}
	#index #contents .inner #list_area .list .flex_area a#world{background:white url("../img/world/world_header.png") no-repeat;background-position: 5% 50%;background-size:auto 65%;}
	#index #contents .inner #list_area .list .flex_area a#book{background:white url("../img/book/book_header.png") no-repeat;background-position: 5% 50%;background-size:auto 80%;}
	#index #contents .inner #list_area .list .flex_area a#paper{background:white url("../img/paper/paper_header.png") no-repeat;background-position: 5% 50%;background-size:auto 70%;}
	#index #contents .inner #list_area .list .flex_area a#award{background:white url("../img/award/award_header.png") no-repeat;background-position: 5% 50%;background-size:auto 85%;}
	#index #contents .inner #list_area .list .flex_area a#experiment_work{background:white url("../img/experiment_work/experiment_work_header.png") no-repeat;background-position: 5% 50%;background-size:auto 70%;}
	#index #contents .inner #list_area .list .flex_area a#english_course{background:white url("../img/english_course/english_course_header.png") no-repeat;background-position: 5% 50%;background-size:auto 70%;}
	#index #contents .inner #list_area .list .flex_area a#museum{background:white url("../img/museum/museum_header.png") no-repeat;background-position: 5% 50%;background-size:auto 70%;}
	
	#photo_index{padding:30px 0;}
	#photo_index .inner{width:80%;margin: 0 auto 0px auto;/*display: flex;*/}	
	#photo_index .inner .photo_area{margin: 0 auto 30px;padding: 0; }
	#photo_index .inner .photo_area figure{width:90%; margin: 0 auto;padding: 0;}
	#photo_index .inner .photo_area figure a{position: relative;display: block;height: 150px;font-family: din-condensed, sans-serif;font-weight: 300;font-style: normal;border-radius: 20px;z-index: 1;overflow: hidden;box-sizing: border-box;border:6px solid #73d8b6}
	#photo_index .inner .photo_area figure a img{width:100%; height:100%;object-fit: cover;margin: 0 ;padding: 0;transition:1s all}	
	#photo_index .inner .photo_area figure a::before{content:'';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width:60px;height: 60px;background: url("../img/photo/photo_icon.png") no-repeat;background-size:100% auto;background-position: 50% 50%;z-index: 1}
	#photo_index .inner .photo_area figure a::after{content:'Look!';position: absolute;top: 72%;left: 0%;display: block;width: 100%; font-size: 22px;color:white;text-align: center;}		
	#photo_index .inner .photo_area figure a:hover img{transform: scale(1.2, 1.2);    transition: 1s all;}
	#photo_index .inner .photo_area figure a:hover{opacity:0.5;}
	
	#photo_index .inner .title_area{text-align: center;margin: 0 auto;}
	#photo_index .inner .title_area .title .sub_title{position: relative;;margin: 0 auto 5px auto;padding: 20px 0 0 0;color:#73d8b6;font-size: 18px;}
	#photo_index .inner .title_area .title .sub_title::before{content:'';position: absolute;top: 0px;left: 50%;transform: translateX(-50%);width: 50px;height: 1px;background: #67C6D7}
	#photo_index .inner .title_area .title h5{font-size: 20px;color: #474648;margin: 0 auto 0px auto;font-weight:normal;}	
	#photo_index .inner .title_area .title .number{font-size: 35px;color: #474648}
	#photo_index .inner .title_area .title .number span{font-size:25px}	
	#photo_index .inner .title_area .title .season{font-size: 18px;color: #474648;margin: 0 auto 20px auto}
	#photo_index .inner .title_area .title figure{width:70%;max-width: 160px; margin: 0 auto 20px auto;padding: 0;}
	#photo_index .inner .title_area .title figure img{width:100%;}
	#photo_index .inner .title_area .title .link a{display: block; margin: 0 auto 0px auto; padding:14px 0px 14px 0px;color: white;font-size: 16px;text-align: center;text-decoration: none;border-radius: 3px;background:#73d8b6}
	#photo_index .inner .title_area .title .link a .fa-angle-right{margin-left: 10px}
	#photo_index .inner .title_area .title .link a:hover{background:#F84A56}
}