@charset "utf-8";

.sp_only {
	display: none;
}
.hide {
	display: none;
}

@media screen and (max-width: 640px) {
	.sp_only {
		display: block;
	}
	td.sp_only {
		display: table-cell;
	}
	.pc_only {
		display: none;
	}
	
	#header {
		height: auto;
		position: relative;
	}
	#header .header_top_wrapper {
		height: auto;
		padding: 0;
	}
	#menu-btn-check:checked ~ #header .header_top_wrapper {
		background-color: #fff;
	}
	#header .header_top {
		width: auto;
		padding: 5px 0;
	}
	#header .title {
		background-size: contain;
		display: block;
		float: none;
		width: 125.5px;
		height: 37px;
		margin: 0 auto;
	}
	#menu-btn-check:checked ~ #header .title {
		background: url(images/common/logoPink.png) no-repeat;
		background-size: contain;
	}
	/* 言語切替 */
	#header .lang_switch {
		top: auto;
		left: auto;
		bottom: 0;
		right: 2%;
		font-size: 5pt;
		background-color: #fff;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	#menu-btn-check:checked ~ #header .lang_switch {
		background-color: #ef91b4;
	}
	#header .lang_switch a {
		color: #de4e8d;
		display: block;
		padding: 4px 5px;
		line-height: 1;
	}
	#menu-btn-check:checked ~ #header .lang_switch a {
		color: #fff;
	}
	#header .lang_switch a:hover {
		color: #de4e8d;
	}
	#header .lang_switch a:after {
		content: '';
		display: inline-block;
		width: 7px;
		height: 6px;
		background-color: #de4e8d;
		clip-path: polygon(0 0, 100% 0%, 50% 100%);
		margin-left: 1px;
	}
	#menu-btn-check:checked ~ #header .lang_switch a:after {
		background-color: #fff;
	}
	/* ハンバーガーメニュー */
	.menu-btn {
		position: absolute;
		top: 0px;
		left: 0px;
		display: flex;
		height: 47px;
		width: 47px;
		justify-content: center;
		align-items: center;
		z-index: 90;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #ffffff;
		position: absolute;
	}
	.menu-btn span:before {
		bottom: 9px;
	}
	.menu-btn span:after {
		top: 9px;
	}
	#menu-btn-check:checked ~ #header .menu-btn span {
		background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#menu-btn-check:checked ~ #header .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
		background-color: #ef91b4;
	}
	#menu-btn-check:checked ~ #header .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
		background-color: #ef91b4;
	}
	#menu-btn-check:checked ~ #contents {
		display: none;
	}
	#menu-btn-check:checked ~ #footer_wrapper {
		display: none;
	}
	/* メニュー */
	#header ul.nav {
		display: none;
		position: absolute;
		height: auto;
		width: 100%;
		top: 47px;
		left: 0;
		z-index: 10;
		background-color: #fff;
	}
	#menu-btn-check:checked ~ #header ul.nav {
		display: block;
	}
	#header ul.nav > li {
		float: none;
		position: relative;
		margin: 0;
	}
	#header ul.nav > li > a:first-child {
		display: none;
	}
	#header ul.nav a {
		display: block;
		padding: 15px 30px;
		border-bottom: 1px dashed #333;
		font-size: 14pt;
	}
	
	#header ul.nav .submenu {
		display: block;
		position: relative;
		top: auto;
		left: auto;
		background-color: transparent;
		z-index: 10;
	}
    #header ul.nav li.open .submenu {
        display: block;
    }
	
	#header ul.nav .submenu_top {
		display: none;
	}
	#header ul.nav .submenu_bottom {
		display: none;
	}
	#header ul.nav .submenu_middle {
		width: auto;
		padding: 0;
		filter: none;
		background-color: transparent !important;
	}
	#header ul.nav .submenu_middle li {
	    list-style-image: none !important;
	}
	#header ul.nav .submenu_middle li a {
		font-size: 14pt;
		color: inherit;
		font-family: inherit;
		line-height: 0;
		max-height: 0;
		padding: 0 50px;
		border-width: 0;
		opacity: 0;
		visibility: hidden;
		transition:
			line-height .3s ease-out,
			max-height .3s ease-out,
			padding .3s ease-out,
			border-width .3s ease-out,
			opacity .3s linear,
			visibility .1s linear;
	}
	#header ul.nav li.open .submenu_middle li a {
		line-height: 1.5;
		max-height: 56px;
		padding: 15px 50px;
		border-width: 1px;
		opacity: 1;
		visibility: visible;
		transition:
			line-height .3s ease-out,
			max-height .3s ease-out,
			padding .3s ease-out,
			border-width .3s ease-out,
			opacity .3s linear,
			visibility .1s linear;
	}
	
	#header .search_button {
		position: absolute;
		width: 16.5px;
		height: 16.5px;
		top: 16px;
		right: 70px;
		background: url(images/common/glassWhite.png) no-repeat;
		background-size: contain;
	}
	#menu-btn-check:checked ~ #header .search_button {
		background-image: url(images/common/glassPink.png);
	}
	#header .searchbox {
		display: none;
		box-sizing: border-box;
		position: absolute;
		margin: 0;
		top: 90px;
		left: 15px;
		right: 15px;
		border-radius: 10px;
		box-shadow: 2px 2px 4px #80808080;
		background-color: rgba(255, 255, 255, 0.95);
		z-index: 20;
		padding: 5px;
	}
	#search_button_check:checked ~ .searchbox {
		display: block;
	}
	
	#header .searchbox .close_button {
		position: relative;
		display: flex;
		height: 47px;
		width: 47px;
		justify-content: center;
		align-items: center;
	}
	#header .searchbox .close_button span,
	#header .searchbox .close_button span:before,
	#header .searchbox .close_button span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #ef91b4;
		position: absolute;
	}
	#header .searchbox .close_button span {
		background-color: transparent;
	}
	#header .searchbox .close_button span:before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#header .searchbox .close_button span:after {
		top: 0;
		transform: rotate(-45deg);
	}
	#header .searchbox input[type=text] {
		display: block;
		width: 70%;
		margin: 20px auto;
		padding: 15px 10px;
		font-size: 11pt;
		line-height: 1;
	}
	#header .searchbox button[type=submit] {
		display: block;
		margin: 30px auto 50px;
		width: 41.25px;
		height: 41px;
		background: url(images/common/glassButton.png) no-repeat;
		background-size: contain;
	}

	#contents {
		width: auto;
	}
	#contents > .go_top {
		margin: 10px 0;
		text-align: right;
		font-size: 10pt;
		padding: 0 15px;
	}
	
	#footer_wrapper {
		background-color: transparent;
	}
	#footer {
		width: auto;
		height: auto;
	}
	#footer .main_menu {
		box-sizing: border-box;
		padding: 15px 25px;
		font-size: 10pt;
		line-height: 2.5;
	}
	#footer .main_menu h3 {
		color: #84cbc3;
		font-size: 14pt;
	}
	#footer .main_menu a {
		display: block;
	}
	#footer .main_menu h4 {
		font-weight: normal;
	}
	#footer .main_menu .jm_shop_blog {
		padding-left: 30px;
	}
	#footer .footer_top {
		height: auto;
	}
	#footer .shop_link {
		width: auto;
		float: none;
		padding: 0 15px;
		font-size: 0;
		background-color: #eeeae1;
	}
	#footer .shop_link a {
		box-sizing: border-box;
		float: none;
		display: inline-block;
		width: 50%;
		padding: 0 10px;
		font-size: 10pt;
		margin-top: 25px;
		margin-bottom: 25px;
	}
	#footer .shop_link a img {
		width: 100%;
		height: auto;
		border-radius: 2.5vw;
	}
	#footer .online_link {
		float: none;
		width: auto;
		margin: 0;
		padding: 25px;
		background-color: #eeeae1;
	}
	#footer .online_link a {
		display: block;
		margin-top: 0;
	}
	#footer .online_link a img {
		width: 100%;
		height: auto;
	}
	#footer .about {
		float: none;
		width: auto;
		height: auto;
		margin: 0;
		padding: 25px 25px 15px;
	}
	#footer .about a {
		margin: 0;
		font-size: 10pt;
		line-height: 2.5;
	}
	#footer .about a:first-child {
		margin: 0;
		font-size: 14pt;
	}
	#footer .footer_menu {
		height: auto;
		width: auto;
		border-top: 1px dashed #333;
		border-bottom: none;
		text-align: left;
		font-size: 10pt;
		line-height: 2.5;
		padding: 15px 25px;
	}
	#footer .footer_menu ul {
		height: auto;
		margin: 0;
		border: none;
		display: block;
	}
	#footer .footer_menu li {
		display: inline;
		float: none;
		border: none;
	}
	#footer .footer_menu li a {
		display: block;
	}
	#footer .sns {
		text-align: center;
	}
	#footer .sns a {
		display: inline-block;
		width: 50px;
		margin: 20px 10px;
	}
	#footer .sns a img {
		width: 100%;
	}
	#footer .copyright {
		margin-top: 13px;
		height: auto;
		line-height: 2.5;
	}
	
	/* TOPページ */
	.home #contents {
		padding-top: 0;
	}
	#top_banner {
		display: flex;
		justify-content: space-between;
	}
	#top_banner a {
		display: block;
		margin: 12px 10px;
	}
	#top_banner a img {
		width: 100%;
		height: auto;
	}
	#top {
		width: auto;
	}
	#top .top_image_sp,
	#top .top_image_sp2 {
		width: auto;
		overflow: hidden;
		position: relative;
	}
	#top .top_image_sp img {
		transform-origin:left top;
		width: 200%;
		height: auto;
	}
	#top .top_image_sp2 img {
		transform-origin:right top;
		position: absolute;
		top: 0;
		right: 0;
	}
	#top .news {
		width: 70%;
		height: 16%;
		position: absolute;
		left: 16%;
		top: 10%;
		overflow: auto;
	}
	
	/* What's Blythe / Shop / About CWC */
	.page-id-35 #contents,
	.page-id-37 #contents,
	.page-id-39 #contents {
		width: auto;
		border: none;
		padding: 20px 15px;
	}
	.page-id-35 #contents img,
	.page-id-37 #contents img,
	.page-id-39 #contents img {
		max-width: 100%;
		height: auto;
	}
	
	/* News */
	.category-news #contents,
	.single-post #contents {
		display: block;
	}
	#main {
		width: auto;
		border: none;
	}
	#side {
		width: auto;
	}
	
	#news {
		padding: 15px 0;
	}
	#news .menu {
		margin: 0;
		width: 100%;
		padding: 20px 0;
	}
	#news .menu ul {
		width: auto;
		float: none;
		border: none;
	}
	#news .menu ul li {
		width: auto;
		float: none;
		padding: 2px 0 2px 35px;
	}
	#news .menu ul li:first-child {
		padding: 2px 0 2px 35px;
	}
	#news .list {
		width: auto;
		padding: 0 15px;
		margin: 0;
	}
	#news .list .list_title {
		padding: 0;
	}
	#news .list .list_left {
		float: none;
		width: auto;
	}
	#news .list .list_left div {
		float: none;
		width: auto;
		display: inline-block;
	}
	#news .list .list_left .genre {
		margin-left: 10px;
	}
	#news .list .list_contents {
		float: none;
		width: auto;
		margin: 0;
	}
	#news .list .list_image {
		margin-top: 0;
		width: 90px;
		margin: 0 0 0 10px;
	}
	#news .list .list_image img {
		max-width: 100%;
	}
	#news .pager {
		margin: 10px 0;
		text-align: right;
		padding: 0 15px;
	}
	
	#side .banner_area {
		padding-bottom: 0;
	}
	#side .archives {
		box-sizing: border-box;
		margin: 0;
		padding: 15px;
	}
	#side .archives .archives_title {
		padding: 0 0 11px 0;
		width: auto;
		text-align: center;
	}
	#side .archives .months li {
		margin-left: 0;
		text-align: center;
		font-size: 10pt;
	}
	
	#news .news_menu {
		position: relative;
	}
	#news .news_menu .menu {
		display: none;
		position: absolute;
		z-index: 5;
		background-color: rgba(255, 255, 255, 0.9);
	}
	#news .news_menu .news_menu_label {
		background-color: #ef91b4;
		color: #fff;
		padding: 5px 15px;
		line-height: 1;
		margin: 30px 0 0;
		text-decoration: underline;
	}
	#news .news_menu .news_menu_label:before {
		content: '';
		display: inline-block;
		width: 10px;
		height: 11px;
		background-color: #fff;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		margin-right: 6px;
	}
	#news_menu_check:checked ~ .news_menu_label:before {
		width: 11px;
		height: 10px;
		clip-path: polygon(0 0, 100% 0%, 50% 100%);
		margin-right: 5px;
	}
	#news .news_menu .close_button {
		display: none;
		position: absolute;
		right: 0;
		height: 47px;
		width: 47px;
		justify-content: center;
		align-items: center;
		z-index: 6;
	}
	#news .news_menu .close_button span,
	#news .news_menu .close_button span:before,
	#news .news_menu .close_button span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #ef91b4;
		position: absolute;
	}
	#news .news_menu .close_button span {
		background-color: transparent;
	}
	#news .news_menu .close_button span:before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#news .news_menu .close_button span:after {
		top: 0;
		transform: rotate(-45deg);
	}
	#news_menu_check:checked ~ .menu {
		display: block;
	}
	#news_menu_check:checked ~ .close_button {
		display: flex;
	}
	#news .news_detail {
		width: auto;
		margin: 0;
		padding: 15px;
		word-break: break-all;
	}
	#news .news_detail .date {
		display: inline-block;
		margin: 0;
	}
	#news .news_detail .genre {
		display: inline-block;
	}
	#news .news_detail .genre li {
		float: none;
		display: inline-block;
		margin: 0;
	}
	#news .news_detail .detail_title {
		padding: 2px 0 0 32px;
		margin: 10px 0;
	}
	#news .news_detail .contents {
		margin: 0;
	}
	#news .news_detail .contents img {
		max-width: 100%;
		height: auto;
	}
	#news .news_detail .contents iframe {
		max-width: 100%;
	}
	#news .go_top {
		margin: 10px 15px;
		text-align: right;
	}
	
	/* 検索結果 */
	.search #contents {
		padding: 20px 15px;
	}
	.search #contents li {
		margin-bottom: 20px;
	}
	
	/* お問い合わせ */
	#contact_top {
		width: auto;
		padding: 20px 15px;
	}
	#contact_top p {
		margin-bottom: 15px;
	}
	#contact_top .buttons > div {
		float: none;
		margin: 0 auto 40px;
	}
	#contact_top .buttons p.upper {
		margin-bottom: 0;
	}
	#contents.contact {
		width: auto;
		padding: 20px 15px;
	}
	#contents.contact #contact_form {
		width: auto;
	}
}