@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Cardo');
@import "loader.css";
@import "header.css";
@import "module.css";

.content{
	width: 100%;
	overflow: hidden;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite,
code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer,
header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-family: "ヒラギノ明朝 Pro","Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, serif;
	line-height: 1;
	-ms-word-wrap: break-word;
	    word-wrap: break-word;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	color: #22325f;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display:block;
}
br{
	line-height: 0;
}
ul li {
	list-style: none;
}
a,
a:hover,
a:focus,
a:active{
	text-decoration:none;
	color: #22325f;
}
h3{
	letter-spacing: 0.2rem;
}
/*a:hover{
	opacity: .7;
}*/
input,select,textarea,button{
	margin:0;
	padding:0;
	border:0;
	-webkit-box-shadow: none;
	        box-shadow: none;
	-webkit-border-radius: 0;
	        border-radius: 0;
	font-family: "ヒラギノ明朝 Pro","Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, serif;	
} 
select{
	-moz-appearance: none;
	-webkit-appearance: none;
	position: relative;
	background: url(/common/img/arrow_down.png);
}
.radio_parent{
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
}
input[type="radio"]{
    position: absolute;
    top: 2px;
    left: 0;
    width: 14px;
    height: 14px;
    background-color: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 24px;
    vertical-align: middle;
    content: "";
	-webkit-box-sizing: border-box;
   box-sizing: border-box;
   appearance: button;
    opacity: 1;
}
/*.radio:hover input[type="radio"] + label {
  background-color: red;
}*/
/*input[type="radio"]:checked:after {
    position: absolute;
    top: 47%;
    left: 47%;
    display: block;
    width: 8px;
    height: 8px;
	background: #333;
	border-radius: 12px;
	content: "";
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}*/

/* The check_box_contain */
.check_box_contain {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.check_box_contain input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 50%;
  left: 0;
  height: 12px;
  width: 12px;
  background-color: #fff;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 1px solid #acacac;
}

/* On mouse-over, add a grey background color */
.check_box_contain:hover input ~ .checkmark {
  background-color: #ffffff;
}

/* When the checkbox is checked, add a blue background */
.check_box_contain input:checked ~ .checkmark {
  background-color: #ffffff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.check_box_contain input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.check_box_contain .checkmark:after {
  left: 50%;
  top: 50%;
  width: 5px;
  height: 8px;
  border: solid #333;
  border-width: 0 3px 3px 0;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
     -moz-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
       -o-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
@media only screen and (max-width: 979px) {

	.radio_parent{
		position: relative;
		display: inline-block;
		width: .24rem;
		height: .24rem;
	}
	input[type="radio"] {
		position: absolute;
		top: 0;
		left: 0;
		width: .24rem;
		height: .24rem;
		/*background-color: #fff;*/
		border: 0.01rem solid #999;
		border-radius: .24rem;
		vertical-align: middle;
		content: "";
		/* -webkit-box-shadow: inset 0.04rem 0.04rem 0.1rem rgba(0,0,0,0.2); */
		/*box-shadow: inset 0.04rem 0.04rem 0.1rem rgba(0,0,0,0.2);*/
		 outline: none;    
	    -webkit-appearance: none;
	    -moz-appearance: none;
		 background-color: #dddddd;
		  border-style: none;
		  color: inherit;
		/*-webkit-box-sizing: border-box;
		box-sizing: border-box;
		vertical-align: top;*/
	}
	input[type="radio"]:checked:after {
		border-radius: inherit;
	    background-color: #dddddd;
	    border-style: inherit;
	    outline: none;    
        -webkit-appearance: none;
        -moz-appearance: none;
    	top: 26%;
    	left: 25%;
    	position: absolute;
		display: block;
		width: .12rem;
		height: .12rem;
		background: #7a7a7a;
		/*border-radius: 50%;*/
		content: "";

	}
/*	input[type="radio"]:checked{
		position: relative;
	}
	/*input[type="radio"]:checked:after {
		position: absolute;
		top: .12rem;
    	left: .12rem;
		display: block;
		width: .10rem;
		height: .10rem;
		background: #333;
		border-radius: 50%;
		content: "";
		-webkit-transform: translate(-50%,-50%);
		   -moz-transform: translate(-50%,-50%);
		    -ms-transform: translate(-50%,-50%);
		     -o-transform: translate(-50%,-50%);
		        transform: translate(-50%,-50%);

	}
*/
		.checkmark {
		position: absolute;
		top: 50%;
		left: 0;
		height: .24rem;
		width: .24rem;
		background-color: #fff;
		-webkit-transform: translateY(-50%);
		 -moz-transform: translateY(-50%);
		  -ms-transform: translateY(-50%);
		   -o-transform: translateY(-50%);
		      transform: translateY(-50%);
		border: .02rem solid #acacac;
	}
	.check_box_contain .checkmark:after {
		left: 50%;
		top: 50%;
		width: .08rem;
		height: .12rem;
		border: solid #333;
		border-width: 0 .03rem .03rem 0;
		-webkit-transform: translate(-50%, -50%) rotate(45deg);
		 -moz-transform: translate(-50%, -50%) rotate(45deg);
		  -ms-transform: translate(-50%, -50%) rotate(45deg);
		   -o-transform: translate(-50%, -50%) rotate(45deg);
		      transform: translate(-50%, -50%) rotate(45deg);
		}
}
button{
	cursor: pointer;
}
img{
	vertical-align:middle;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.clearfix:after {
	height: 0;
	display: block;
	clear: both;
	content: "";
}
.only_pc, .only_tb{
	display: block;
}
.only_sp{
	display: none;
}
.row:before,
.row:after{
	display: table;
	content: " ";
}
.row:after{
	height: 0;
	display: block;
	clear: both;
	content: "";
}
.grid_01,
.grid_02,
.grid_03,
.grid_04,
.grid_05,
.grid_tb_01,
.grid_tb_02,
.grid_tb_03,
.grid_tb_04,
.grid_tb_05,
.grid_sp_01,
.grid_sp_02,
.grid_sp_03,
.grid_sp_04,
.grid_sp_05{
	position: relative;
	min-height: 1px;
}

/*For PC*/
@media only screen and (min-width: 980px) {
	.grid_01,
	.grid_02,
	.grid_03,
	.grid_04,
	.grid_05{
		float: left;
	}
	.grid_01{
		width: 100%;
	}
	.grid_02{
		width: 50%;
	}
	.grid_03{
		width: 33.33333333%;
	}
	.grid_04{
		width: 25%;
	}
	.grid_05{
		width: 20%;
	}
	.only_pc{
		display: block;
	}
	.only_tb,
	.only_sp{
		display: none;
	}
}

/*For Tablet*/
@media only screen and (min-width: 768px) and (max-width: 979px) {
	.grid_tb_01,
	.grid_tb_02,
	.grid_tb_03,
	.grid_tb_04,
	.grid_tb_05{
		float: left;
	}
	.grid_tb_01{
		width: 100%;
	}
	.grid_tb_02{
		width: 50%;
	}
	.grid_tb_03{
		width: 33.33333333%;
	}
	.grid_tb_04{
		width: 25%;
	}
	.grid_tb_05{
		width: 20%;
	}
	.only_pc, .only_tb{
		display: block;
	}
	.only_sp{
		display: none;
	}
}

body{
	width: 100%;
	overflow: hidden;
	padding-top: 70px;
}

@media only screen and (max-width: 979px) {
	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite,
	code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset,
	form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer,
	header, hgroup, menu, nav, section, time, mark, audio, video {
		font-size:.12rem;
	}
	body{
		width: 100%;
		overflow: hidden;
		padding-top: .88rem;
	}
	.inner{
		width: 100%;
		margin: 0 auto;
	}
	.grid_sp_01,
	.grid_sp_02,
	.grid_sp_03,
	.grid_sp_04,
	.grid_sp_05{
		float: left;
	}
	.grid_sp_01{
		width: 100%;
	}
	.grid_sp_02{
		width: 50%;
	}
	.grid_sp_03{
		width: 33.33333333%;
	}
	.grid_sp_04{
		width: 25%;
	}
	.grid_sp_05{
		width: 20%;
	}
	.only_pc{
		display: none;
	}
	.only_sp,
	.only_tb{
		display: block;
	}
	
}