/*
Theme Name: クロスハウス
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: CHIKA KASHIMA

*/
@charset "utf-8";
body {
	font: normal 18px/1.7 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Noto Sans jP",Meiryo,"ＭＳ Ｐゴシック",Arial,Verdana,sans-serif;
	text-align: left;
	color:#000;
	text-align: justify;
	overflow-x: hidden;
}

body .sp-item {
    display: none !important; }
  body .pc-item {
    display: block !important; }

  @media screen and (max-width: 640px) {
    body {
      min-width: inherit;
	  height:100%;
	  }
      body .sp-item {
        display: block !important; }
      body .pc-item {
        display: none !important; }
	  body .sp-item img {
		width:100%;}
}

@media screen and (max-width: 640px) {
	.sp img{
		max-width:90%;
}
	.sp02 img{
		max-width:100%;
}
.sp03 img{
		max-width:70%;
}
}

.fl_left {
	float: left;
}
.fl_right {
	float: right;
}
.ov_hd {
	overflow: hidden;
}
.bg_none {
	background-image: none!important;
}
a.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.center {
	text-align: center;
}
.right {
	text-align:right;
}
.line_0 {
	line-height: 0;
}
.zindex {
	z-index: 200;
}
input[type=radio] {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}
input[type=image]:hover{
		opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	}


/* ----------------------------------------------------

    text

---------------------------------------------------- */
em {
	text-decoration: underline;
  font-style: normal;
}
.bd_red {
	border-bottom: 1px solid #FF0004;
	padding-bottom: 2px;
}
.bd_red02 {
	border-bottom: 3px solid #FF0004;
	padding-bottom: 0px;
}
.red {
	color: #ff0000;
}
.yellow {
	background-color: #ffff00;
}
.gray {
	color:#666666;
}
.bold {
	font-weight: bold;
}
strong {
	font-weight: bold;
}
.strike {
	text-decoration: line-through;
}
.ac {
	text-align: center !important;
}
.ar {
	text-align: right !important;
}
.al {
	text-align: left !important;
}
.bold {
	font-weight: bold !important;
}
.font10 {
	font-size: 10px !important;
}
.font11 {
	font-size: 11px !important;
}
.font12 {
	font-size: 12px !important;
}
.font13 {
	font-size: 13px !important;
}
.font14 {
	font-size: 14px !important;
}
.font15 {
	font-size: 15px !important;
}
.font16 {
	font-size: 16px !important;
}
.font17 {
	font-size: 17px !important;
	line-height:150%;
}
.font18 {
	font-size: 18px !important;
}
.font19 {
	font-size: 19px !important;
}
.font20 {
	font-size: 20px !important;
}
.font21 {
	font-size: 21px !important;
}
.font22 {
	font-size: 22px !important;
}
.font23 {
	font-size: 23px !important;
}
.font24 {
	font-size: 24px !important;
}
.font25 {
	font-size: 25px !important;
}
.font26 {
	font-size: 26px !important;
}
.font27 {
	font-size: 27px !important;
}
.font28 {
	font-size: 28px !important;
}
.font29 {
	font-size: 29px !important;
}
.font30 {
	font-size: 30px !important;
}
.font32 {
	font-size: 32px !important;
}
/* ----------------------------------------------------

    float

---------------------------------------------------- */
.fr {
	float: right !important;
}
.fl {
	float: left !important;
}
.clear {
	clear: both;
}
img {
	line-height: 0;
	padding: 0;
	margin: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.4;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ----------------------------------------------------
    clearfix の代用
    <div class="hr"><hr /></div>
---------------------------------------------------- */


.pc-item img{
	width:100%;
}
.rd-pc{
position: relative;
}
.pc-item .btn{
	position: absolute;
	bottom:3%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.pc-item .btn img{
	width:33vw;
}
.rd-sp{
	position: relative;
}
.sp-item .btn{
	position: absolute;
	bottom:4%;
	width:100%;
}
.sp-item .btn img{
	width:94%;
}
.area5{
	background: #e1f4f9;
	padding-bottom: 80px;
}

.qa-container {
  margin: 0 auto ;
  max-width: 1000px;
  width: 100%;
	padding-top: 60px;
}
.qa-list{
	padding:0.8% 0;
}
@media screen and (max-width: 1200px) {
	.qa-list{
		padding:1% 0;
	}
.qa-container{
	max-width:90%;
}
}

.question-title {
  background: #0071bc;
  cursor: pointer;
  font-size: 30px;
  padding: 3% 12% ;
  position: relative;
	color:#fff;
	
	line-height: 1.3;
	
}

.question-title:before {
  position: absolute;
  display: block;
  content: 'Q.';
  top: 8%;
  left:3%;
  color:#fff;
  font-size:180%;

}

.question-title:after {
  position: absolute;
  display: block;
  content: '';
  top: 35%;
  right: 5%;
  width: 20px;
  height: 20px;
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
  transform: rotate(135deg);
  transition: all .3s ease-in-out;
}

.question-title.open:after {
  transform: rotate(-45deg);
  top: 45%;
}

.answer-text {
  border-left: 1px solid #ddd;
  border-right: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  display: none;
  padding: 3% 5% 3% 12%;
  position: relative;
	background: #fff;
	

	font-size: 24px;
}

.answer-text:before {
  position: absolute;
  display: block;
  content: 'A.';
  top: 2.7%;
  left: 3%;
  color: #0071bc;
  font-size: 240%;
 
}

small{
	font-size: 18px;
}
@media screen and (max-width: 1200px) {
	.area5{
		padding-bottom:20px ;
	}
	.question-title:before {
		font-size:150%;
		top:6%;
	}
	.question-title{
		font-size: 160%;
	}
	.question-title:before{
		font-size: 140%;
	}
	.question-title:after {
    top:30%;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
	
	}
	.answer-text{
		font-size: 20px;
	}
	.answer-text:before {
		top: 3%;
		font-size: 190%;
	}
}
@media screen and (max-width: 640px) {
	.qa-container{
		padding-top: 20px;
	}
	.qa-list{
		padding:1.6% 0;
	}
	.question-title{
		font-size: 16px;
		padding:5% 13%;
	}
	.answer-text{
		font-size: 14px;
		padding:5% 6% 6% 13%;
		line-height: 1.5;
	}
	.question-title:before {
		
		top:18%;
	}
	.question-title:after {
		width: 10px;
		height: 10px;
		
	}
	
}
form{
	max-width:900px;
	width:90%;
	margin:40px auto;
	border: 1px solid #000;
	padding:20px ;
}

.area8 li{
	width:50%;
}
li{
	padding:2%;
	border-bottom:1px dotted #000;
	
}
li:last-of-type{
	border:none;
}
.c-form__label{
	text-align: left;
	margin-bottom: 10px;
	line-height: 1.3;
}
.c-form__label-text{
font-size: 24px;
padding-left: 20px;
color:#000;
font-weight: bold;

}
.c-form__label-text p{
	font-size: 18px;
	margin-left: 20px;
}
.area6 dl{
	max-width:800px;
	width:100%;
	display: flex;
}

.area6 dt{
	width:40%;
	text-align: left;
}
.area6 dd{
	width:60%;
}
.c-form__input{
	font-size: 22px;
padding-left: 3%;
width:100%;
display: flex;

}
.c-form__input p{
	margin-left: 10px;
	color:#000;
}
.c-form__input-text{
	width:100%;
	height:36px;
	border: 2px solid #666666;
 border-radius: 6px;
 padding:0 14px;
 font-size: 18px;
}
.red{
	background-color: #ffebeb;
}
.gray{
	background: #fff;
}
.age{
	width:20% !important;
}
.required{
	color: #fff;
	font-weight: bold;
	background: #c1272d;
	padding:0 10px;
	border-radius: 50px;
	margin-left: 10px;
	font-size: 14px;
}
::placeholder{
	font-family: 'Noto Sans JP';
	color:#b3b2b2;
	font-size: 18px;
	
}
.c-form__input-radio{
	font-size: 20px;
	font-weight: bold;
	text-align: left;
	margin-left: 20px;
}
.c-form__input-radio label{
	padding-left: 20px;
}
input[type=radio]{
	margin-right: 10px;
}
.c-form__input-select{
	text-align: left;
	padding-left: 3%;
}

.Form-Item-Textarea{
	height:300px;
	width:94%;
	padding:3%;
	font-size: 18px;
	border-radius: 10px;
	border: 2px solid #666666;
	margin-bottom: 10px;

}

/* 送信ボタン */
.submit-button{
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}
.submit-btn {
  /* buttonタグのリセットCSS */
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
font-size: 26px;
  color: #fff;
  padding: 20px 80px;
	margin-top: 20px;
  background-color: #3abec1;
	border-radius: 20px;
  cursor: pointer; /* ポインターカーソルを表示 */
}


footer{
	background: #0071bc;
	padding:30px 0;
	color: #fff;
}
@media screen and (max-width: 1200px) {
	form{
		max-width:90%;
		width:90%;
		padding:10px;
	}
	.area6 li{
		margin:0 auto;
	}
	.area6 dl{
		flex-direction: column;
	
	}
	.c-form__label-text{
    font-size: 18px;
		padding-left: 0px;
		color:#000;
		font-weight: bold;
		}
	.area6 li{
		width:94%;
	}
	li{
		padding:2% 0;
	}
	.c-form__label-text{
	padding-left: 10px;
	}
	.area6 dl{
		width:100%;
	}
	.area6 dt{
		width:100%;
		text-align: left;
		padding-bottom: 0px;
	}
	.area6 dd{
		width:94%;
	}
	.c-form__input-text{
		width:90%;
		height:30px;
		border: 1px solid #666666;
		margin-bottom: 10px;
	}
 .age{
	width: 30% !important;;
 }
	.c-form__input-radio{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.c-form__input-select{
		
		margin-bottom: 10px;
	}



	/* 送信ボタン */
	.submit-button{
		display: flex;
		justify-content: center;
	}
	.submit-btn {
		/* buttonタグのリセットCSS */
	
	font-size: 20px;
		color: #fff;
		padding: 16px 40px;
		font-size: 20px;
	margin-bottom: 20px;
	}
	
	footer{
		font-size: 14px;
		padding:20px 0;
	}
}
/* きらっと光るボタン */
.reflection-img{
	width       :900px;
  margin:0 auto;
	position    :relative;
	overflow    :hidden;
	
}

.reflection {
	height      :100%;
	width       :30px;
	position    :absolute;
	top         :-180px;
	left        :0;
	background-color: #fff;
	opacity     :0;
	transform: rotate(45deg);
	animation: reflection 3s ease-in-out infinite;
	-webkit-transform: rotate(45deg);
	-webkit-animation: reflection 3s ease-in-out infinite;
	-moz-transform: rotate(45deg);
	-moz-animation: reflection 3s ease-in-out infinite;
	-ms-transform: rotate(45deg);
	-ms-animation: reflection 3s ease-in-out infinite;
	-o-transform: rotate(45deg);
	-o-animation: reflection 3s ease-in-out infinite;
}

@keyframes reflection {
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { transform: scale(4) rotate(45deg); opacity: 1; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
	0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
	0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
	0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
	0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}