@charset "UTF-8";

/* 全ページ共通 */
.cotainer{
	width: 1030px;
	margin:100px auto 0 auto;
}

:focus {
    outline: none;
}

input, button, textarea, select {
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.t-fixed{
	width: 100%;
	position: fixed;
}

.main-search .sub-word{
	display: flex;
	align-items: center;
	font-size:32px;/*40px;*/
	text-align: center;
	color:#fff;
	font-weight: normal;
	margin:0 auto 20px auto;
}

.main-search .sub-word:before,
.main-search .sub-word:after{
	content: "";
	-webkit-box-flex:1;
	-ms-flex-positive:1;
	flex-grow: 1;
	height: 2px;
	background: #fff;
}
.main-search .sub-word:before{
	margin-right: 40px;
}
.main-search .sub-word:after{
	margin-left: 40px;
}

.list_description .soap-t-box h2, /* 2020-02追加 */
.cotainer .h2-style,
.cotainer .soap-h2-style{
	display: flex;
	align-items: center;
	font-size:32px;
	text-align: center;
	color:#1b1b1b;
	font-weight: normal;
	margin:0 auto 20px auto;
}
.list_description .soap-t-box h2 { /* 2020-02追加 */
	margin-top: 45px;
}

.list_description .soap-t-box h2:before, /* 2020-02追加 */
.list_description .soap-t-box h2:after, /* 2020-02追加 */
.cotainer .h2-style:before,
.cotainer .h2-style:after,
.cotainer .soap-h2-style:before,
.cotainer .soap-h2-style:after{
	content: "";
	-webkit-box-flex:1;
	-ms-flex-positive:1;
	flex-grow: 1;
	background: #000;
	height: 2px;

}

.cotainer .soap-h2-style:before,
.cotainer .h2-style:before{
	margin-right: 40px;
}

.cotainer .soap-h2-style:after,
.cotainer .h2-style:after{
	margin-left: 40px;
}


/* バナー 2025-10追加 */
a:hover img {
	opacity: .7;
}


/* ボタン */
.button-base{
	width:420px;
	margin: 45px auto 0 auto;
  display: block;
}

.button-base a{
	font-size: 16px;
	background-color: #00b8ee;
	color:#fff;
	display: block;
	width:100%;
	text-align: center;
	position: relative;
	padding:10px 10px;
	line-height: 1.6;
	border-radius: 12px;
}

.button-base a:after{
	content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.search-text-box{
	display: flex;
	position: relative;
	width:342px;
}

.search-text{
	width: 300px;
	height:42px;
	font-size:14px;
	padding: 10px;
	border: solid 1px #a1a1a1;
  border-right: 0;
}

.search-text-btn{
	width: 42px;
	height: 42px;
	background-color:#a1a1a1;
	border:none;
	background: url("/image/icon_search.png") no-repeat center #a1a1a1;
	background-size: 60% auto;
}

.icon-pluse{
	width:20px;
	height: 20px;
	display: block;
	position: absolute;
	top:50%;
	right:2px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.icon-pluse:before,
.icon-pluse:after {
	content: '';
	position: absolute;
	display: block;
	width: 10px;
	height: 2px;
	background: #fff;
	left: 4px;
	top: 10px;
}

.icon-pluse:after {
	-webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.open .icon-pluse:after{
	display: none;
}

.icon-r-triangle{
	position: relative;

}

.icon-r-triangle:before{
	content: "";
	position: absolute;
	right: 10px;
	width: 0;
	height: 0;
	border-left: 10px solid #00b8ee;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	top: 50%;
	transform: translateY(-50%);
}

/* 新しい色のボタン設定 */
.button-base.button-style{
	width: 320px;
	margin-top: 1.5rem;
}
.button-base.button-style a{
	background: var(--primary-color-m);
}


/* hover設定 */
.button-base.button-style a:hover{
	background: var(--primary-color);
}

.main-serch-btnbox:hover,
.category-list li a:hover,
.button-base a:hover{
	background:#2f90d4;
}
.button-base a:hover{
	color:#fff;
}
/*
.kodawari-box li a:hover{
	color:#fff;
	background:#2f90d4;
	background:#2f90d4;border:solid 1px #2f90d4;
}*/
.kodawari-box li a:hover{
	color:#00b8ee;
}
.search-text-btn:hover{
	background: url("/image/icon_search.png") no-repeat center #00b8ee;
	background-size: 60% auto;
}
.category-box.shop-tag-wrap li a:hover{
	color: #fff;
	background: #00b8ee;
	border: solid 1px #00b8ee;
}


.area-contents li:hover a:before,
.footer-area li:hover a:before{
	content: "";
  display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(255,51,161,.5);
}

.ad-bnr-box a:hover img{
	opacity: .7;
}

.column-item h3 a:hover{
	color:#00b8ee;
}

.footer-item-box a:hover{
	color:#00b8ee;
}

.column-item figure a:hover img{
	opacity: .7;
}


/* gnav */
.drawer_nav_wrapper,
.gnav .drawer_button{
	display: none;
}


/* ページャー */
.pager-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin:100px auto 80px auto;
}

.pager-wrap li{
	display: inline-block;
	width: 50px;
	height: 50px;
	position: relative;
}

.pager-wrap li:not(:last-of-type){
	margin-right: 10px;
}

.pager-wrap a,
.pager-wrap p{
	font-size:18px;
	color:#00b8ee;
	border-radius: 8px;
	border:solid 1px #00b8ee;
	width:100%;
	height: 100%;
	position: absolute;
	display: table;
}

.pager-wrap span{
	display: table-cell;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
}

.pager-wrap .active,
.pager-wrap a:hover{
	background-color: #00b8ee;
	color:#fff;
}

.pager-wrap .prev span:before{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-right: 10px solid #00b8ee;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pager-wrap .next span:before{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-left: 10px solid #00b8ee;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pager-wrap .prev:hover,
.pager-wrap .next:hover{
	background-color:#00b8ee;
}

.pager-wrap .prev span:hover:before{
	border-right: 10px solid #fff;
}

.pager-wrap .next span:hover:before{
	border-left: 10px solid #fff;
}

.cotainer.fnav-cotainer{
	display: none;
}


@media (max-width: 1199px){
	.cotainer{
		margin:80px auto 0 auto;
	}

	.main-search .sub-word{
		margin-bottom: 20px;
	}

	.button-base{
		margin: 40px auto 0 auto;
	}

	.cotainer .h2-style{
		font-size:30px;
		margin-bottom: 20px;
	}




}


@media (max-width: 899px){
	.cotainer{
		margin: 60px auto 0 auto;
	}
	/* gnav */
	header {
    width: 100%;
    background: #fff;
    z-index: 999;
	}

	header.fixed {
		position: sticky;
		top: 0;
		box-shadow: 0 1px 5px 0 rgba(0,0,0,.1);
		-webkit-animation-duration:1s;
		-ms-animation-duration:1s;
		animation-duration:1s;
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
	}

	@-webkit-keyframes fadeIn {
	 0% {
		 opacity: 0;
		 transform: translateY(-40px);
		}
	 100% {
		 opacity: 1;
		 transform: translateY(0);
		}
	}


	@keyframes fadeIn {
	 0% {
		 opacity: 0;
		 transform: translateY(-40px);
		}
	 100% {
		 opacity: 1;
		 transform: translateY(0);
		}
	}




	.drawer_nav_wrapper{
		display: block;
	}

	.drawer_menu{
		margin: 0;
		padding: 0;
		outline: none;
		border: none;
		font: inherit;
		font-family: inherit;
		font-size: 100%;
		font-style: inherit;
		font-weight: inherit;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		text-align: left;
		text-decoration: none;
		list-style: none;
	}

	.modal-content a {
		color: inherit;
		text-decoration: none;
	}

	.modal-content a:visited {
		color: inherit;
	}

	.modal-search-category li a:visited {
		color:#00b8ee;
	}

	.drawer_menu .drawer_bg,
	.drawer_bg{
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		background-color: rgba(51, 51, 51, 0.5);
		display: none;
		top: 0;
		left: 0;
	}

	.gnav .drawer_menu .drawer_button {
		display: block;
		background: none;
		border: none;
		padding: 0;
		width: 44px;
		letter-spacing: 0.1em;
		cursor: pointer;
		position: fixed;
		top: 34px;
		right: 15px;
		z-index:9;
		text-align: center;
		outline: none;
	}

	.gnav .drawer_menu .drawer_menu_text {
		display: block;
	}

	.cotainer{
		margin-top:60px;
	}

	.main-search .sub-word{
		font-size: 28px;
	}

	.main-search .sub-word:before,
	.main-search .sub-word:after{
		width:100px;
	}

	.main-search .sub-word:before{
		margin-right: 20px;
	}

	.main-search .sub-word:after{
		margin-left: 20px;
	}

	.button-base{
		margin: 30px auto 0 auto;
	}

	.button-base a{
		padding:10px;
	}

	.cotainer .h2-style,
	.cotainer .soap-h2-style{
		font-size: 28px;
	}

	.cotainer .h2-style:before,
	.cotainer .h2-style:after{
		width:100px;
	}

    .cotainer .soap-h2-style:before,
	.cotainer .h2-style:before{
		margin-right:20px;
	}
	.cotainer .soap-h2-style:after,
	.cotainer .h2-style:after{
		margin-left: 20px;
	}


	.pager-wrap{
		margin:60px auto 40px auto;
	}





}




@media (max-width: 480px){
	.cotainer{
		margin-top:40px;
	}

	.search-text-box{
		width:100%;
	}

	.search-text{
		width:100%;
	}

	.button-base{
		width: 80%;
		margin-top:15px;
	}

	.button-base a{
		font-size: 16px;
	}
	.button-base.button-style{
		width: 68%;
		margin-top: 1.875rem;
	}

	.main-search .sub-word{
		font-size:20px;
		margin-bottom: 10px;
	}

	.main-search .sub-word:before{
		margin-right: 15px;
	}
	.main-search .sub-word:after{
		margin-left: 15px;
	}

	.cotainer .soap-h2-style,
	.cotainer .h2-style{
		font-size: 20px;
		margin-bottom: 10px;
	}
    .cotainer .soap-h2-style:before,
	.cotainer .h2-style:before{
		width: 16%;
		margin-right: 15px;
	}
	.cotainer .soap-h2-style:after,
	.cotainer .h2-style:after{
		width: 16%;
		margin-left: 15px;
	}


	/* ページャー */
	.pager-wrap{
		margin:30px auto 20px auto;
	}

	.pager-wrap li:nth-of-type(5){
		display: none;
	}


	footer .cotainer.fnav-cotainer{
		display: block;
		padding: 0;
	}

	/* エリアTOP横スクロール */

	/* 横スクロールここまで */

	.footer-ac-wrap h2{
		font-size: 16px;
		font-weight: bold;
		color:#fff;
		padding: 12px 15px;
		background:#00b8ee;
		margin-bottom: 0;
	}

	.f-ac-area{
		display: flex;
   	 	flex-wrap: nowrap;
    	align-items: center;
		padding-right: 15px;
		border-bottom: solid 1px #e5e5e5;
	}
	.f-ac-area i{
		position: relative;
		width: 16px;
		height:16px;
	}

	.f-ac-area i span{
		position: absolute;
		width: 100%;
		height: 2px;
		background-color: #000;
	}

	.f-ac-area i span:nth-of-type(1) {
		top: 7px;
    	-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
    	-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	.f-ac-area i span:nth-of-type(2) {
		top: 7px;
    	-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
    	-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	.f-ac-area.open i span:nth-of-type(2) {
		display: none;
	}

	.f-ac-area h3{
		font-size: 16px;
		width: 100%;
		color:#000;
		background:#fff;
		padding: 12px 0 12px 16px;
	}

	.f-ac-area-wrap{
		display: none;
		border-bottom: solid 1px #e5e5e5;
	}

	.f-ac-area-wrap li{
		background: #f5f5f5;
	}

	.f-ac-area-wrap li:not(:last-of-type){
		border-bottom:solid 1px #e5e5e5;
	}

	.f-ac-area-wrap li a{
		display: block;
		font-size: 15px;
		color:#000;
		padding: 12px 15px 12px 30px;
		position: relative;
	}

	.f-ac-area-wrap li a:after{
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		display: block;
		width: 11px;
		height: 11px;
		margin-top: -6px;
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}








}