@charset "UTF-8";


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

	/* common /////////////////////////////////////////////////////////////////////////////////////////// */

	.spNone {
		display: none;
	}

	#cmn_schbutton {
		position: absolute;
		width: 40px;
		height: 50px;
		margin: 0 0 0 0;
		background: url(../img/cmn_toggle.svg) no-repeat;
		background-size: 100% 100%;
		top: 20px;
		right: 10px;
		z-index: 100;
	}

	#cmn_schbutton a {
		display:block; width:100%; height:100%;
	}

	#cmn_logo {
		width: 250px;
		margin: 23px 0 40px 20px;
	}

	#cmn_logo img {
		width: 350px;
	}

	main {
		background-size: 150px;
	}

	.header_mainimg > div li p {
		padding: 0 3%;
		font-size: calc(15px + (22 - 15)*(100vw - 320px)/(980 - 320));
	}


	/* sub /////////////////////////////////////////////////////////////////////////////////////////// */

	#sub_modal {
		display: block;
		overflow: hidden;
	}

	#sub_modal_open,
	#sub_modal_close {
		cursor: pointer;
	}

	#sub_modal_open {
		position: absolute;
		left: 50%;
		top: 20px;
		width: 40px;
		transform: translate(-50%,0);
		display: inline-block;
	}

	#sub_modal_conts {
		position: relative;
		z-index: 99;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 100vh;
		transform: translate(0,-100%);
		background: url(../img/header_modal_patt.svg) repeat center #3C3C3C;
		transition: transform .3s;
	}

	#sub_modal_checkbox:checked ~ #sub_modal_conts {
		transform: none;
	}

	#sub_modal_checkbox:checked ~ #sub_modal_conts #sub_modal_close {
		display: inline-block;
	}

	#sub_modal_close {
		flex-shrink: 0;
		display: none;
		width: 30px;
		margin: 20px 0 30px 0;
	}

	#sub_modal_checkbox:checked ~ #sub_modal_conts > div {
		display: flex;
	}

	#sub_modal_conts > div {
		display: none;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		text-align: center;
	}

	#sub_modal_conts ul {
		flex-shrink: 0;
		display: none;
		width: 100%;
		height: 30%;
		min-height: 290px;
		padding: 10px 6% 40px;
	}

	#sub_modal_checkbox:checked ~ #sub_modal_conts ul {
		display: block;
	}

	#sub_modal_conts li {
		margin: 0 0 18px 0;
	}

	#sub_modal_conts a {
		display: block;
	}

	#sub_modal_conts a strong,
	#sub_modal_conts a span {
		color: #FFF;
	}

	#sub_modal_conts a strong {
		display: inline-block;
		margin: 0 10px 0 0;
		font-size: 1.9rem;
		/* font-size: calc(19px + (32 - 19)*(100vw - 320px)/(980 - 320)); */
	}

	#sub_modal_conts a span {
		display: inline-block;
		font-size: 1.6rem;
		/* font-size: calc(16px + (20 - 16)*(100vw - 320px)/(980 - 320)); */
	}


	/* dd /////////////////////////////////////////////////////////////////////////////////////////// */

	.dd_main {
		background-size: 150px;
	}

	.header_mainimg .slick-dots,
	.dd_header_mainimg .slick-dots {
		/* bottom: 15px;
		z-index: 9; */
	}

	.dd_header_msg p {
		padding: 0 3%;
		font-size: calc(15px + (22 - 15)*(100vw - 320px)/(980 - 320));
	}


	.dd_sns {
		padding: 60px 3%;
	}

	.dd_sns ul {
		display: block;
	}

	.dd_sns li {
		width: 100%;
		margin: 0 0 30px 0;
	}

	.dd_sns_conts > img  {
		width: 100%;
		max-width: none;
	}

	.dd_sns_name  {
		padding: 18px 0 16px;
	}

	.dd_sns_name h3 {
		margin: 0 0 -6px 0;
		font-size: 2.0rem;
	}


	.dd_system h1 {
		margin: 0 0 60px 0;
	}

	.dd_system dl {
		padding: 0 3%;
		margin: 0 auto 60px;
	}

	.dd_system dt h3 {
		font-size: 1.8rem;
	}

	.dd_system table {
		table-layout: auto;
	}

	.dd_system th {
		font-size: 1.5rem;
		width: 30%;
	}

	.dd_system td {
		padding: 14px 14px;
		font-size: 1.5rem;
	}

	.dd_system .other th,
	.dd_system .other td {
		display: block;
		width: 100%;
	}

	.dd_system .other th {
		padding: 6px 0;
	}

	.dd_system .other td {
		padding: 10px 12px;
		text-align: center;
	}


	.dd_system .other td span {
		font-size: 1.3rem;
	}




	/* contact /////////////////////////////////////////////////////////////////////////////////////////// */
	.contact_form {
	  padding: 70px 0;
	  margin: 0 0 70px 0
	}

	.contact_form_inr {
	  padding: 0 5%;
	}

	.contact_form_inr h3 {
	  margin: 0 0 36px 0;
	  font-size: 2.2rem;
	}

	.contact_form_inr > p {
	  margin: 0 0 30px 0;
	}

	/* mfp */
	#contactButton {
	  flex-direction: column;
	  align-items: center;
	}

	#contactButton button {
	  width: 100%;
	  max-width: 400px;
	  height: 88px;
	  line-height: 88px;
	}

	#contactButton button[type="submit"] {
	  margin: 0 0 30px 0;
	}


}


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

	#home_shop {
		display: block;
		width: calc(100% - 14px);
		margin: 0 7px 80px 7px;
	}

	#home_shop div {
		width: 100%;
		margin: 0 0;
	}

	#home_shop div:last-of-type {
		margin: 0 0;
	}

	#home_shop div a > img {
		margin: 0 0 35px 0;
	}

	#home_sns {
		padding: 60px 3%;
	}

	#home_sns ul {
		display: block;
	}

	#home_sns li {
		width: 100%;
		margin: 0 0 30px 0;
	}

	.home_sns_conts > img  {
		width: 100%;
		max-width: none;
	}

	.home_sns_name  {
		padding: 18px 0 16px;
	}

	.home_sns_name h3 {
		margin: 0 0 -6px 0;
		font-size: 2.0rem;
	}


	#home_cast {
		display: block;
		width: calc(100% - 14px);
		margin: 30px 7px 30px 7px;
	}

	#home_cast_title {
		width: 100%;
		padding: 30px 0 30px 0;
	}

	#home_cast_conts {
		width: 100%;
	}

	#home_campany {
		width: 100%;
		margin: 0 auto 30px auto;
		padding: 30px 0 30px 0;
	}

	#home_campany table {
		width: calc(100% - 14px);
		max-width: 1100px;
		margin: 0 7px;
	}

	#home_campany th {
		display: block;
		width: 100%;
		padding: 15px 0 15px 15px;
		text-align: left;
	}

	#home_campany td {
		display: block;
		width: 100%;
		padding: 15px 0 15px 15px;
	}



	/* dd /////////////////////////////////////////////////////////////////////////////////////////// */



	.dd_shop {
		display: block;
		width: calc(100% - 14px);
		margin: 60px 7px 80px 7px;
	}

	.dd_shop div {
		width: 100%;
		margin: 0 0;
	}

	.dd_shop div > img {
		margin: 0 0 35px 0;
	}

	.dd_news ul {
		padding: 0 3%;
		margin: 0 auto 60px;
	}

	.dd_news li {
		display: block;
		padding: 16px 0 14px;
	}

	.dd_news li span,
	.dd_news li p {
		font-size: 1.5rem;
	}

	.dd_news li span {
		margin: 0 0 6px 0;
	}


	.dd_cast {
		display: block;
		width: calc(100% - 14px);
		margin: 30px 7px 30px 7px;
	}

	.dd_cast_title {
		width: 100%;
		padding: 30px 0 30px 0;
	}

	.dd_cast_conts {
		width: 100%;
	}



	.dd_info {
		padding: 60px 0;
	}

	.dd_info > dl {
		padding: 0 6%;
		margin: 0 auto 40px;
	}

	.dd_info > dl dt,
	.dd_info > dl dd {
		font-size: 1.5rem;
	}


	.dd_info > dl dt {
		margin: 0 30px 0 0;
	}

	.dd_info > dl a {
		pointer-events: all;
	}

	.dd_info > div {
		height: 400px;
	}




	/* cast /////////////////////////////////////////////////////////////////////////////////////////// */
	.sub_cast {
		position: relative;
	}

	/* .cast_header_img {
		background-image: url("../img/sub_mainimg_cast_sp.jpg");
	} */


	.cast_dd_container, .cast_ca_container {
		max-width: 95%; margin: 10px auto 30px;
		padding: 20px 0 20px 0;
	}


	.cast_cms_box {
		padding: 0 30px;
	}

	.cast_cms_box article {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
		margin: auto auto 50px auto;
	}

	.cast_item_info {
		width: 100%;
	}

	.cast_item_img {
		width: 100%;
		padding: 0 0 20px 0;
		text-align: center;
	}

	.cast_item_img img {
		max-width: 250px;
	}

	.cast_item_info h3 span {
		/*display: none;*/
		padding: 8px 15px 0 25px;
	}

	.cast_name {
		display: none;
	}

	.cast_item_info dl div {
		display: block;
		flex-wrap: wrap;
		margin: auto auto 10px auto;
	}


	.cast_item_info dt {
		width: 100%;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.cast_item_info dd {
		width: 100%;
		padding: 10px 0 0 10px;
		font-size: 1.8rem;
	}



	/* contact /////////////////////////////////////////////////////////////////////////////////////////// */

	.contact_shopinfo {
		display: block;
	}

	.contact_shopinfo > div {
		text-align: center;
		margin: 10px auto;
	}

	.contact_info p {
		padding: 0 15px;
	}




}


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


	/* dd /////////////////////////////////////////////////////////////////////////////////////////// */

	#dd_system table {
		table-layout: auto;
	}

	#dd_system table th {
		width: auto;
	}

	#dd_system table th span {
		display: inline-block;
		transform: rotate(92deg)
	}

	#dd_system th[rowspan="3"] {
		width: 40px;
	}



	/* sub /////////////////////////////////////////////////////////////////////////////////////////// */
	.sub_page_title {
		font-size: 3rem;
	}


	/* cast /////////////////////////////////////////////////////////////////////////////////////////// */



}