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

body{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";font-size: 13px;}
a:hover {opacity: 1;}

/*　MV　*/
#mv{
	background-color: #c51a1f;
	height: 540px;
	overflow: hidden;
	position: relative;
}

/*　パンくず　*/
#pankuzu li,#pankuzu li a {color: #ffffff;}
#mv ul li:nth-child(2){margin-top: 4%;}
.wrap{
	position: absolute;
	transform: translate(50%,50%);
	bottom: 25px;
	width: 100%;
}
.wrap #pankuzu{margin:0;}
.wrap #pankuzu li{
	text-align: left;
	display: inline;
	background: url("../../img/common/icon2_pan.png")center right 10px / 8px no-repeat;
}
.wrap #pankuzu li:nth-child(2){background: none;}
#mv ul{margin: 0 auto;display: table;}
#mv ul li{float: left;}
#mv ul li span{
	display: block;
	margin: 0 auto;
	font-weight: bolder;
	color: #ffffff;
	line-height: 25px;
	letter-spacing: 2px;
	margin-top: 30px;
	text-align: center;
	font-size: 14px;
}
#mv ul li:nth-child(1){margin-top: 4%;}
#mv ul .pc:nth-child(2){margin-top: 1%;}

@media screen and (max-width: 1400px){
	#mv .pc{display: none;}
	#mv .sp{display: block;}
	#mv{height: 720px;}
	#mv img{margin: 0 auto;margin-top: 20px;}
	
	#mv p{
	font-weight: bolder;
	color: #ffffff;
	line-height: 25px;
	letter-spacing: 2px;
	margin-top: 30px;text-align: center;
	width: 418px;
    display: inline-flex;
	}
	.wrap {transform: translate(0%,0%);margin-left: 20px;}
}


/*@media screen and (max-width: 1400px){
#mv {
    height: 750px;
}
}*/
@media screen and (max-width: 530px){
	#mv img{width: 95%;margin-top: 80px;}
	#mv p {margin-top: 35px;width: 80%}
}
@media screen and (max-width: 490px){
	#mv {height: 680px;}
}
@media screen and (max-width: 400px){
	#mv {height: 630px;}
}

/*　一覧　*/
.tabs{
	background-color: #f9e8e8;
	width: 100%;
	display: flow-root;
}
.tabs .cta{
	max-width: 920px;
    margin: 0 auto;
    height: 48px;
	margin-top: 35px;
	font-size: 14px;
}
.tabs ul li a{
	width: 24%;
    display: block;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #ffffff;
	color: #c51a1f;
    font-weight: bolder;
    text-align: center;
    padding: 17px 0;
	border: solid 3px #c51a1f;
	border-radius: 7px;
	margin-left: 5px;
	text-decoration: none;
}
.searchButtonnBlock .onActive{
	color: #ffffff;
	background: #c51a1f url("../img/plus2_img.png") no-repeat center top;
	background-size: 80px 150px;
}
@media screen and (max-width: 750px){
	.tabs ul li a{width: 49%;margin-bottom: 5px;}
}
@media screen and (max-width: 516px){
	.tabs ul li a{width: 48%;}
}

/*　質問　*/
#box .pc{display: block;}
#box .sp{display: none;}
.color{background-color: #f9e8e8;width: 100%;}
#box{
	overflow: hidden;
    max-width: 980px;
    padding: 80px 0 85px;
    margin: 0 auto;
}
#box li{float: left; margin: 0 15px 65px 15px;}
#box a{
	background-color:#ffffff;
    width: 215px;
    height: 215px;
    display: inline-block;
    border-radius: 50%;
	text-align: center;
	position: relative;
	text-decoration: none;
}
#box a::before{
	content: "";/*必須*/
	position: absolute;
	width: 114px;
	height: 106px;
	background: url("../img/plus_img.png")no-repeat;
	top: -35px;
	right: -5px;
}
#box a:hover{opacity: 0.8 ;cursor: pointer;}
#box a img{margin: 30px 0 15px;}
#box a p{ 
	border-top: dotted 2px #c51a1f;
	padding: 15px 0 25px;
	color: #000000;
	width: 170px;
	text-align: left;
	margin: 0 auto;
}
#box a .botom{padding: 15px 0 0px;}
#box a span{
	font-weight: bolder;
	font-size: 15px;
	color: #ffffff;
	background-color: #c51a1f;
	letter-spacing: 1px;
	padding: 3px 10px 4px;
	border-radius: 5px;
} 
#box .img{background-color: #c51a1f;width: 215px;
    height: 215px;
    display: inline-block;
    border-radius: 50%;
	position: relative;
}
#box .img::before{
	content: "";/*必須*/
	position: absolute;
	width: 114px;
	height: 106px;
	background: url("../img/plus2_img.png")no-repeat;
	top: -35px;
	right: -5px;
}
@media screen and (max-width: 1000px){
	#box{margin: 0 auto;width: 747px;
}
}
@media screen and (max-width: 750px){
	#box .pc{display: none;}
	#box .sp{display: block;}
	#box{margin: 0 auto;width: 95%;max-width: 356px;}
	#box a {width: 170px;height: 170px;}
	#box a p {padding: 15px 0 11px;width: 143px;font-size: 11px;}
	#box a img {margin: 20px 0 15px;}
	#box .img {width: 170px;height: 170px;}
	#box .img img{width: 101%;}
	#box li {margin: 0 3px 65px 5px;}
	#box a::before {right: -28px;}
	#box .img::before {right: -26px;}
	#box a span {font-size: 13px;}
	
}

/* モーダルCSS */
/* モーダル全体(背景＋本体) */
.modal{
	display: none;
  	position: fixed;
  	top: 0;
  	height: 100vh;
  	width: 100%;
  	z-index: 11111;
}
/* モーダル背景 */
.modal-bg{
  	position: absolute;
  	height: 100vh;
  	width: 100%;
  	background: rgba(0, 0, 0, 0.8);
}
/* モーダル本体 */
.modal-content{
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform:translate(-50%,-50%);
 	width: 70%;
  	max-width: 580px;
  	padding: 50px 51px 40px;
  	background-color: #fff;
  	border-radius: 25px;
  	text-align: left;
  	color: #c51a1f;
  	box-shadow: 0px 1px 10px #000000;
}
/* 微調節 */
.modal-content .size{
	font-size: 20px;
	margin: 20px 0;
	border-bottom: dotted 2px #c51a1f;
	padding-bottom: 20px;
	font-weight: bolder;
}
.modal-content h1{
	font-size: 24px;
	font-weight: bolder;
	margin-bottom: 10px;
}
.modal-content h1 img{margin: 5px 10px 0 0;}
.modal-content .size_2{font-size: 13px;}

.js-modal-close{
  	position: absolute;
  	top: 2rem;
  	right: 2rem;
  	cursor: pointer;
  	width: 50px;/*枠の大きさ*/
  	height: 50px;/*枠の大きさ*/
  	background-color: #c51a1f;
  	border-radius: 50%;
}
.js-modal-close::before, .js-modal-close::after{
    content: "";
    display: block;
    width: 60%;/*バツ線の長さ*/
    height: 3px;/*バツ線の太さ*/
    background: #ffffff;
    transform: rotate(45deg);
    transform-origin:0% 50%;
    position: absolute;
    top: calc(37% - 5px);
    left: 29%;
}
.js-modal-close::after{
    transform: rotate(-45deg);
    transform-origin:100% 50%;
    left: auto;
    right: 27%;
}
@media screen and (max-width: 750px){
	.modal-content {width: 85%; padding: 50px 34px 40px;}
}
@media screen and (max-width: 550px){
.js-modal-close {top: 6%;right: 7%;}
}

/* タブ切り替え */
li.filterDiv {display: none;}
li.filterDiv.show {display: inline-block;}
.show {display: inline-block;}
.btn {
  	border: none;
  	outline: none;
  	padding: 12px 16px;
  	background-color: #f1f1f1;
  	cursor: pointer;
}