@charset "utf-8";

/*###########################################################

 全ページ共通のレスポンシブ
 
#############################################################/*/

@media screen and (max-width: 1260px) {
	/*=======　Beauty and Health 　美と健康のために　==========*/
	.container.bandh{width:96%;}

}





@media screen and (max-width: 1200px) {
	#wrapper img{max-width: 100%;height: auto;width /***/:auto;}	
	

	/*全ページ共通のテーブル構造　-------------------*/
	.container {width:96%;}
	
	/*=======　Beauty and Health 　美と健康のために　==========*/
	dl.bandh-dl dt{width:58%;}
	dl.bandh-dl dd{width:40%;}

}





@media screen and (max-width: 1050px) {
	/* ==================== 全ページ共通の横メニュー ==================== */
	ul.headermenu-ul li:first-child{display:none;}
}



@media screen and (max-width: 1120px) {
	/*=======　NEWS　お知らせ =============*/
	.container.index-news{width:90%;}
	
	/*========  全ページ共通のフッター  ==============*/
	.footer-left {float: left;width: 37%;margin-left: 0;}
	.footer-right {width: 61%;margin-right: 0;}
}




@media screen and (max-width: 1000px) {
	/*indexのオープニング 切り替わる背景画像 slider-pro -------------*/
	/*スクロールダウンボタン*/
	.btn-scroll-box{display:none;}

}






@media screen and (max-width: 940px) {
	/* ==================== 全ページ共通の横メニュー ==================== */
	ul.headermenu-ul li:last-child{display:none;}
	
	/*========  全ページ共通のフッター  ==============*/
	.footer-left {float: none;width: 330px;margin: 0 auto;}
	.footer-right { float: none;width: 630px;margin: 20px auto 0 auto;}
}






@media screen and (max-width:800px) {
	#wrapper {font-size: 96%;}
	
	/*indexのオープニング 切り替わる背景画像 slider-pro -------------*/
	.sp-mask,
	.sp-mask.sp-grab{height:460px !important;}
	.sp-slide,
	.sp-image-container{height: inherit !important;align-items: center;display: flex;justify-content: center;}
	.sp-image-container img {max-width: unset;width:800px !important;height: 460px !important;margin-left:0 !important;}
	
	/*index上部の切り替わる背景画像  slider-pro内のタイトル	-----ここで大きさ固定*/
	.slider-pro p.sp-layer.bigimg-title{transform: scale(0.6) !important;top: 155px !important;display: flex;justify-content: center;}
	.slider-pro div.sp-layer.bigimg-circle{transform: scale(0.59) !important;top: 10px !important;display: flex;justify-content: center;}



	/*//////////   全ページ共通のheader  //////////////////*/
	#header {height: 62px;}
	#header.smaller dl.header-rogo {top: 8px;left: 10px;}
	dl.header-rogo dt {width: 40px;}
	dl.header-rogo dt img{width: 100%;}
	dl.header-rogo dd{width:180px;}
	dl.header-rogo dd .rogo{margin-top: 3px;}
	dl.header-rogo dd img{width: 100%;}
	



	/*-------------------------------------------------------------------------
	ページ上部右の出てくるナビmenuが出現して、入れ替わりに横メニューが消える
	--------------------------------------------------------------------------*/
	#header-right{display:none;}
	
	#menubtn{position:absolute;z-index:700;top:9px;right:15px;width:54px;height:42px;text-indent:-8989px;display:block;overflow:hidden;cursor:pointer;background-color: #f93f7b;}
	#menubtn.off{background-position:0 0;}
	#menubtn.on{background-position:0 -42px;background-color: #555;}


	/*右側のメニューボタン*/
	.menu-trigger {position:absolute;right: 0;top: 11px;z-index:200;width:34px;height:20px;display: inline-block;transition: all .4s;box-sizing: border-box;left: 0;margin: 0 auto;}
	.menu-trigger span {position: absolute;left: 0;width: 100%;height:2px;background-color:#fff;display: inline-block;transition: all .4s;box-sizing: border-box;}
	
	/*
	.menu-trigger::after {position: absolute;left: 0;bottom: -25px;content: 'メニュー';display: block;width: 100%;color: #003540;font-size:79%;font-weight: 600;text-decoration: none;text-align: center;transition: all .4s;white-space: nowrap;letter-spacing: -0.2em;}
	.menu-trigger.active::after {content: '閉じる';color:#fff;bottom: -33px;font-weight: normal;}
	a.menu-trigger{text-decoration:none;}
	*/
	.menu-trigger span:nth-of-type(1) {}
	.menu-trigger span:nth-of-type(2) {top: 50%;left: 50%;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);}
	.menu-trigger span:nth-of-type(3) {bottom: 0;}
	
	.menu-trigger.active span{height: 2px;}
	.menu-trigger.active span:nth-of-type(1) {z-index: 10;-webkit-transform: translateY(9px) rotate(-317deg) scale(1.15);transform: translateY(9px) rotate(-317deg) scale(1.15);}
	.menu-trigger.active span:nth-of-type(2) {display: none;}
	.menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-9px) rotate(317deg) scale(1.15);transform: translateY(-9px) rotate(317deg) scale(1.15);}


	/*------------------------------------
	ページ上部右の出てくるナビmenu
	------------------------------------*/
	/*#navi_sp {display:none;width:100%;background-color:#fde6ed;filter: alpha(opacity=95);-moz-opacity:0.95;opacity:0.95;position:absolute;z-index:400;margin-top:-35px;padding-bottom:15px;}--固定しない*/
	/*#navi_sp {display: none;width: 100%;position: fixed;z-index: 400;padding-top: 32px;width:85%;overflow-y: scroll;right: 0;height: 100%;top: 0;}--固定で幅85%*/
	#navi_sp {display: none;position: fixed;width:100%;z-index:49;overflow-y: scroll;height:100%;right: 0;top: 0;background-color:#f93f7b;opacity:0.9;}
	#navi_sp a,
	#navi_sp a:hover{text-decoration:none;}

	#navi_sp ul#yoko-menu-sp {width:100%;clear: both;font-size:108%;padding:65px 10px 0 10px;list-style:none none outside;background-image:none;text-align: center;}
	#navi_sp ul#yoko-menu-sp li {margin:21px 0;font-family:'Noto Serif JP', serif;font-weight:400;}
	#navi_sp ul#yoko-menu-sp li a {color: #fff;text-decoration: none;line-height:1.2;}
	#navi_sp ul#yoko-menu-sp li a:hover{opacity:0.7;}

	/*submenu*/
	#navi_sp ul#yoko-menu-sp li.spbox01{display:inline-block;width:50%;margin:1px 0;}
	#navi_sp ul#yoko-menu-sp li.spbox00 > a{}
	#navi_sp ul#yoko-menu-sp li.spbox02.title > a{}
	#navi_sp ul#yoko-menu-sp li.spbox02 > a{background:url(../img/header_menu_down.png) no-repeat left center;padding-left:14px;}
	#navi_sp ul#yoko-menu-sp li.selected > a{background:url(../img/header_menu_up.png) no-repeat left center;padding-left:14px;}

	#navi_sp ul#yoko-menu-sp ul.sub{font-size: 93%;line-height: 1.2;width: 94%;background-color: #0b6f9f;margin: 7px auto 0 auto;}
	#navi_sp ul#yoko-menu-sp ul.sub div{display:inline-block;width:40%;margin:0 3% 5px 3%;vertical-align:top;}
	#navi_sp ul#yoko-menu-sp ul.sub div > li a{border-bottom: 1px solid #ccc;padding-bottom: 10px;display: block;}
	#navi_sp ul#yoko-menu-sp ul.sub div > ul > li a{font-size: 93%;}
	#navi_sp ul#yoko-menu-sp ul.sub li {margin: 20px 0;}

	/*サブメニューの閉じる
	#navi_sp ul#yoko-menu-sp .sn_close{margin:0 0 0px 0;}
	#navi_sp ul#yoko-menu-sp .sn_close a{color:#fff;padding:11px 10px 11px 25px;display:block;background:#555 url(../img/header_menu_close.gif) no-repeat right center;cursor: pointer;}
	#navi_sp ul#yoko-menu-sp .sn_close a:hover{background-color:#111;opacity:1;filter: alpha(opacity=100);-ms-filter: "alpha( opacity=100 )";}
	*/
	/*subsubmenu
	#navi_sp ul#yoko-menu-sp ul.sub ul.children{display:block !important;}
	#navi_sp ul#yoko-menu-sp ul.sub ul.children li {margin:3px 0;}
	#navi_sp ul#yoko-menu-sp ul.sub ul.children li a{text-indent:30px;}
	*/

	/*メニューの閉じる*/
	#navi_sp p#menuclose{padding: 5px 0 25px 0;}
	#navi_sp p#menuclose a{font-size:100%;color:#FFF;padding:11px 0;line-height: 1.0;display: block;background:#444 url(../img/header_menu_close.gif) no-repeat right 15px center;cursor: pointer;width: 290px;margin: 0 auto;text-align: center;}
	#navi_sp p#menuclose a:hover{background-color:#777;opacity:1;}


	/*=====　Beauty and Health 　美と健康のために　=========*/
	dl.bandh-dl {margin-top: -30px;}
	dl.bandh-dl dt {float: none;width: 100%;}
	.bandh-img2 {position: relative;margin: 30px 0 30px 0;}
	dl.bandh-dl dd {width: 70%;float: none; margin: 0 auto;}
}








@media screen and (max-width: 740px) {
	/*lozad.jによるアニメーション------*/
	.fadein-			{opacity: 1;transition:none;}
	.fadein-left	{opacity: 1;transform:none;transition:none;}
	.fadein-right	{opacity: 1;transform:none;transition:none;}
	.fadein-up		{opacity: 1;transform:none;transition:none;}
	.transition-delay{transition-delay:0s;}

	/*全ページ共通のページ下部の上部へ戻る */
	#pagetop a {bottom: 15px;right: 15px;width: 50px;height: 50px;}
	
	/*=====　Introduction　ごあんない　=========*/
	h3 span {display: block;}
	
	/*========  全ページ共通のフッター  ==============*/
	.footer-right {width: 100%;}
	.foot-zip {font-size: 83%;}
	.foot-toiawase {width: 36%;}
	
}







@media screen and (max-width: 640px) {
	.container {width: 94%;}
	.section {padding: 50px 0 50px 0;}
	
	
	h2 {margin-bottom: 40px;}
	h2 .midashi{font-size: 170%;line-height: 0.6;}
	h2 .com{font-size: 70%;letter-spacing: 0.3em;text-indent: 0.3em;height: 50px;background-size: 76px;}
	
	h3 {font-size: 122%;margin-bottom: 15px;}


	/*------- ージ上部右の出てくるナビmenu ----------*/
	#navi_sp {font-size: 93%;}


	/*---- お知らせ ----------*/
	.section.news {padding: 60px 0 50px 0;}

	/*=====　Introduction　ごあんない　=========*/
	.midashi.intro {font-size: 150%;}
	.news-bg {padding: 60px 0 40px 0;}
	
	/*=====　Beauty and Health 　美と健康のために　=========*/
	.midashi.bandh{font-size:150%;}
	dl.bandh-dl dt .com {line-height: 2.1;text-align: left; padding: 0 3%;}
	dl.bandh-dl dt .com br{display:none;}
	.red-strong {font-size: 100%;}
}








@media screen and (max-width: 600px) {
	/*========  全ページ共通のフッター  ==============*/
	#footer {padding: 35px 0 0 0;}
	ul.footer-menu-ul {display: none;}
	.footer-right {text-align: center;}
	.foot-insta {float: none;width: 39px;margin: 0 auto 20px auto;}
	.foot-zip-box {float: none;display: inline-block;}
	.foot-toiawase {float: none;width: 40%;display: inline-block;margin-left: 4%;}
	.copyright {font-size: 60%;}
}





@media screen and (max-width: 540px) {
	/*---- お知らせ ----------*/
	.container.index-news {width: 94%;}
	.index-news-box dl.news-dl dt {float: none;width: 100%;}
	.index-news-box dl.news-dl a dd {background-position:left 18px top 7px;}
	.index-news-box dl.news-dl dd {padding: 0 0 0 28px;}
	.index-news-box dl.news-dl a:hover dd {background-position: left 25px top 7px;padding: 0 0 0 35px;}
	
	/*=====　Introduction　ごあんない　=========*/
	.intro-com {text-align: left;line-height: 2;}
	.intro-com br{display:none;}
	
	/*========  全ページ共通のフッター  ==============*/
	.foot-toiawase {width: 250px;margin: 12px 0 0 0;}
}





@media screen and (max-width:440px) {
	/*indexのオープニング 切り替わる背景画像 slider-pro -------------*/
	/*index上部の切り替わる背景画像  slider-pro内のタイトル*/
	.slider-pro p.sp-layer.bigimg-title{transform: scale(0.5) !important;top: 165px !important;}
	.slider-pro div.sp-layer.bigimg-circle{transform: scale(0.49) !important;top: 30px !important;}
	
	/*---- お知らせ ----------*/
	.index-news-box dl.news-dl dt {font-size: 86%;}
	.index-news-box dl.news-dl dd {font-size: 93%;}
	
	/*=====　Introduction　ごあんない　=========*/
	.midashi.intro {font-size: 120%;}
	
	/*=====　Beauty and Health 　美と健康のために　=========*/
	.midashi.bandh{font-size:110%;}
}





@media screen and (max-width:380px) {
	/*========  全ページ共通のフッター  ==============*/
	.footer-left {width: auto;}
	.footer-left dl.header-rogo {display: flex;justify-content: center;}
	.footer-left dl.header-rogo dt {width: 50px;}
	.footer-left dl.header-rogo dd {width: 230px;}

}