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


@media screen and (min-width: 641px) {
	/* common
	------------------------------------------------------------------------*/
	.main {
		padding-top: 142px;
	}
	.inner {
		width: 1000px;
		margin: 0 auto;
	}

	/* promotion
	------------------------------------------------------------------------*/
	.promotion {
		position: relative;
		width: 100%;
		height: 332px;
		text-align: center;
		overflow: hidden;
		background: url(../images/slider_bg.png) repeat #eeeeee;
		padding-bottom: 40px;
	}
	.promotion ul.slider {
		position: relative;
		width: 100%;
		height: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.promotion ul.slider li {
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -700px;
		width: 1400px;
		height: 332px;
	}
	.promotion_01_bg {
		width: 100%;
		height: 100%;
		background: url(../images/slider_bg.png) repeat left top;
	}
	.promotion_02_bg {
		width: 100%;
		height: 100%;
		background: #002d79;
	}
	.promotion_03_bg {
		width: 100%;
		height: 100%;
		background: url(../images/slider_bg_03.png) no-repeat center top;
	}
	.promotion_04_bg {
		width: 100%;
		height: 100%;
		background: url(../images/slider_bg_04.png) repeat-x center top;
	}
	
	/* slider pager */
	.promotion .slider-pager {
		position: absolute;
		bottom: 46px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		z-index: 10;
	}
	.promotion .slider-pager .pager-item {
		display: inline-block;
		width: 10px;
		height: 10px;
		margin: 0 5px;
		background: #666;
		border-radius: 5px;
		text-indent: -9999px;
		overflow: hidden;
		cursor: pointer;
		transition: background 0.3s;
	}
	.promotion .slider-pager .pager-item:hover,
	.promotion .slider-pager .pager-item.active {
		background: #000;
	}
	.promotion ul.slider li img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* products
	------------------------------------------------------------------------*/
	.products .inner {
		position: relative;
		z-index: 2;
	}
	.products .inner ul li {
		float: left;
		margin-left: -1px;
		border-left: 1px solid #b8b8b8;
	}
	.products .inner ul li:first-child {
		margin-left: 0;
		border-left: 0;
	}
	.products .products_bg {
		background:url(../common/images/bg_pale_yellow.png) repeat left top;
	}
	.products .products_bg .products_01_bg {
		position: relative;
		width: 50%;
		height: 137px;
	}
	.products_sp {
		display: none;
	}

	/* contents
	------------------------------------------------------------------------*/
	.contents {
		position: relative;
		width: 100%;
		height: auto;
		margin: 0 auto;
		background: url(../common/images/bg_pale_yellow.png) repeat;
		padding-top: 40px;
	}
	.contents .btn_area ul.pane_01 {
		margin-bottom: 20px;
		width: 100%;
	}
	.contents .btn_area ul.pane_01 li {
		margin-bottom:20px;
		float: left;
        width: 494px;
	}

    .contents .btn_area ul.pane_01 li img {
        width: 100%;
    }

    .contents .btn_area ul.pane_01 li a:hover {
        opacity: 0.7;
    }


	.contents .btn_area ul.pane_01 li:nth-child(even) {
		float: right;
	}
	.contents .btn_area ul.pane_01 li:last-child {
		/*float: none;*/
		text-align: center;
	}
	.contents .btn_area ul.pane_01 li:last-child a {
		display: inline-block;
	}
	/* top-button
	------------------------------------------------------------------------*/
    .top-button {
		width: 100%;
		max-width: 900px;
		margin: 30px auto;
		height: 150px;
	}
	.top-button a {
		display: inline-block;
		height: 100%;
		width: 100%;
		background-image: url(../images/link-jikiabo-pc.jpg);
		background-size: cover;
	}
	.top-button a:hover {
		opacity: 0.7;
	}
    /* top-banner
	------------------------------------------------------------------------*/
    .top-banner {
		width: 100%;
		max-width: 997px;
		display: flex;
		flex-wrap: wrap;
		margin: 40px auto;
	}
	.top-banner p {
		width: 100%;
		max-width: 496px;
	}
	.top-banner p:nth-child(odd) {
		margin-right: 5px;
	}
	.top-banner p:nth-child(n + 3)  {
		margin-top: 5px;
	}
	/* news
	------------------------------------------------------------------------*/
	.news {
		padding: 40px 0;
	}
	.news .inner {
		width: 1000px;
		margin: 0 auto;
		background-color: #fffcef;
		position: relative;
		overflow: hidden;
	}
	.news .left_block {
		float: left;
	}
	.news .left_block .whatsnew_sp {
		display: none;
	}
	.news .right_block {
		float: left;
	}

	.news .right_block {
		color: #3d0607;
		font-size: 18px;
		padding: 35px 0 30px 32px;
	}
	.news .right_block ul li span {
		font-weight: 900;
		margin-right: 8px;
	}
	.news .right_block ul li.new_txt {
		margin-top: 20px;
	}
	.news .right_block ul li a {
		display: inline;
		text-decoration: none;
		color: #3d0607;
	}
	.news .right_block ul li a:link,
	.news .right_block ul li a:visited,
	.news .right_block ul li a:hover,
	.news .right_block ul li a:active {
		color: #3d0607;
	}
	.news .right_block ul li a:hover {
		opacity: 0.7;
	}

	/* banner
	------------------------------------------------------------------------*/
	.banner {
		text-align: center;
		padding-bottom: 10px;
		padding-top: 40px;
	}
	.banner p {
		display: inline-block;
	}
	.banner p.right {
		margin-right: 5px;
	}

	.banner-bottom {
		text-align: center;
		padding-bottom: 47px;
	}

	.banner-bottom p{
		display: inline-block;
	}

	.banner-bottom p.right {
		margin-right: 5px;
	}
}

@media screen and (max-width: 640px) {
	/* common
	------------------------------------------------------------------------*/
	body, html{
		height: 100%;
	}
	.main {
		padding-bottom: 10%;
	}

	/* promotion
	------------------------------------------------------------------------*/
	.promotion {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 200px;
		text-align: center;
		overflow: hidden;
		background: url(../images/slider_bg.png) repeat #eeeeee;
		padding-bottom: 40px;
	}
	.promotion ul.slider {
		position: relative;
		width: 100%;
		aspect-ratio: 576 / 538;
		overflow: hidden;
	}
	.promotion ul.slider li {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.promotion ul.slider li img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}
	/* slider pager for mobile */
	.promotion .slider-pager {
		position: absolute;
		bottom: 10vw;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		z-index: 10;
		width: 100%;
		pointer-events: none;
	}
	.promotion .slider-pager .pager-item {
		display: inline-block;
		width: 10px;
		height: 10px;
		margin: 0 5px;
		background: rgba(102, 102, 102, 0.8);
		border-radius: 5px;
		text-indent: -9999px;
		overflow: hidden;
		cursor: pointer;
		transition: background 0.3s;
		pointer-events: auto;
	}
	.promotion .slider-pager .pager-item:hover,
	.promotion .slider-pager .pager-item.active {
		background: rgba(0, 0, 0, 0.9);
	}
	/* products
	------------------------------------------------------------------------*/
	.products .products_01 {
		width: 100%;
	}
	.products .products_02 {
		width: 100%;
	}
	.products .products_01 img {
		width: 100%;
	}
	.products .products_02 img {
		width: 100%;
	}

	/* contents
	------------------------------------------------------------------------*/
	.contents {
		background: url(../common/images/bg_pale_yellow.png) repeat;
		padding: 10% 0 5%;
	}
	.contents .inner {
		width: 93.75%;
		margin: 0 auto;
		position: relative;
	}
	.contents .btn_area {
		height: auto;
	}
	.contents .btn_area ul.pane_01 {
		margin-bottom: 20px;
		width: 100%;
	}
	.contents .btn_area ul.pane_01 li {
		margin-bottom: 4%;
		float: none;
	}
	.contents .btn_area ul.pane_01 li:nth-child(even) {
		float: none;
	}
	.btn_area ul li img {
		width: 100%;
	}
	.products_pc {
		display: none;
	}

	/* news
	------------------------------------------------------------------------*/
	.news {
		background-color: #fffcef;
		width: 93.75%;
		margin: 8% auto;
	}
	.news .left_block .whatsnew_pc {
		display: none;
	}
	.news .left_block {
		width: 90%;
		margin: 0 auto;
		padding: 5% 0 2% 0;
	}
	.news .right_block {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 5%;
	}
	.news .right_block ul {
		margin-top: 3%;
	}
	.news .right_block ul li {
		margin-bottom: 3%;
		line-height: 130%;
		font-size: 100%;
	}
	.news .right_block ul li span {
		display: block;
		font-weight: 900;
		margin-bottom: 2%;
	}
		/* top-button
	------------------------------------------------------------------------*/
    .top-button {
		width: 100%;
		max-width: calc( 600 / 640 *100vw);
		margin: 30px auto;
		height:calc( 200 / 640 *100vw);
	}
	.top-button a {
		display: inline-block;
		height: 100%;
		width: 100%;
		background-image: url(../images/link-jikiabo-sp.jpg);
		background-size: cover;
	}

	/* banner
	------------------------------------------------------------------------*/
	.banner {
		width: 84.6%;
		margin: 0 auto;
		padding: 9% 0 5%;
	}

	.banner-bottom {
		width: 84.6%;
		margin: 0 auto;
		padding: 0;
	}
	.top-banner {
		width: 84.6%;
		max-width: initial;
		display: block;
		margin: 9% auto 5%;
	}
	.top-banner p {
		max-width: initial;
	}
	.top-banner p:nth-child(odd) {
		margin-right: 0;
	}
	.top-banner p:nth-child(n + 3)  {
		margin-top: 5%;
	}
	.top-banner p:nth-child(2) {
        margin-top: 5%;
	}
	

	.news .right_block ul li a:link, .news .right_block ul li a:visited, .news .right_block ul li a:hover, .news .right_block ul li a:active {
		color: #3d0607;
		display: inline;
		text-decoration: none;
	}
	.banner p.right {
		/*margin-top: 5%;*/
		margin-bottom: 5%;
	}

	.banner-bottom p.right {
		/*margin-top: 5%;*/
		margin-bottom: 5%;
	}



}

.none-padd .main {
	padding: 0;
}